Probably asked a million times guys... I can console.log the new filtered record count but every time I try to setState I get the "max loops" error in ReactJS because the DT re-renders...
I really REALLY need the # of recs // not pages // after a filter
Suggestions?
Thanks kindly!
Row count after filter
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Could you please attach a codesandbox link for us? Also, do you use onFilter method to calculate row counts? Please see; https://www.primefaces.org/primereact/#/datatable
You can use https://codesandbox.io/s/qjx332qq4 to provide the sample.
Best Regards,
Could you please attach a codesandbox link for us? Also, do you use onFilter method to calculate row counts? Please see; https://www.primefaces.org/primereact/#/datatable
You can use https://codesandbox.io/s/qjx332qq4 to provide the sample.
Best Regards,
Github Profile: https://github.com/mertsincan
Here ya go: https://codesandbox.io/s/primereact-tes ... ontsize=14
I know the {this.state.totalRecords} is incorrect for the filteredCount.
I see in the source for DataTable.js for method processData(localState) {} line 1080 (before the return data) if I console.log(data.length) the filteredCount is there but it never manifests itself anywhere else.
How can I use that for my filteredRecord count?
Thank you very much for your time & help with this
I know the {this.state.totalRecords} is incorrect for the filteredCount.
I see in the source for DataTable.js for method processData(localState) {} line 1080 (before the return data) if I console.log(data.length) the filteredCount is there but it never manifests itself anywhere else.
How can I use that for my filteredRecord count?
Thank you very much for your time & help with this
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Sorry for the delayed response! Please try the following index.js in your sample code;
Best Regards,
Code: Select all
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Button } from "primereact/button";
import { CarService } from "./service/CarService";
import { InputText } from "primereact/inputtext";
import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.css";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import "./styles.css";
class App extends Component {
constructor(props) {
super(props);
this.state = { dataTableValue: [], totalRecords: 0, totalFilteredValue: 0 };
this.carService = new CarService();
}
componentDidMount() {
this.carService
.getCarsMedium()
.then(data =>
this.setState({ dataTableValue: data, totalRecords: data.length, totalFilteredValue: data.length })
);
}
onSortChange(event) {
let value = event.value;
if (value.indexOf("!") === 0)
this.setState({
sortOrder: -1,
sortField: value.substring(1, value.length),
sortKey: value
});
else this.setState({ sortOrder: 1, sortField: value, sortKey: value });
}
componentDidUpdate(prevProps, prevState) {
if (this.dt) {
let filteredData = this.dt.processData();
if (filteredData && filteredData.length !== this.state.totalFilteredValue)
this.setState({totalFilteredValue: filteredData ? filteredData.length : 0})
}
}
render() {
var header = (
<div className="p-grid p-fluid">
<div className="p-col p-lg-2 p-sm-12">
<InputText
type="search"
onInput={e => this.setState({ first: 0, globalFilter: e.target.value })}
placeholder="Global Search"
size="50"
/>
</div>
<div className="p-col p-sm-12 p-lg-10" style={{ textAlign: "right" }}>
<span>
Total Cars: {this.state.totalRecords}
<br />
</span>
<span>Filtered Results: {this.state.totalFilteredValue}</span>
</div>
</div>
);
return (
<div className="App">
<div>
<h2>PrimeReact Issue Template</h2>
<p>
Please create a test case and attach the link of the plunkr to your
github issue report.
</p>
</div>
<div>
<DataTable
ref={(el)=> this.dt = el}
id="cars"
value={this.state.dataTableValue}
paginatorPosition="bottom"
header={header}
paginator={true}
rows={10}
first={this.state.first}
onPage={(e) => this.setState({first: e.first})}
responsive={true}
selection={this.state.dataTableSelection}
selectionMode="single"
resizableColumns={true}
groupField="brand"
globalFilter={this.state.globalFilter}
emptyMessage="No records found"
>
<Column field="brand" header="Brand" sortable={true} />
<Column field="vin" header="Vin" sortable={true} />
<Column field="year" header="Year" sortable={true} />
<Column field="color" header="Color" sortable={true} />
</DataTable>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot! Sorry for the late response again!
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 16 guests