Page 1 of 1

Row count after filter

Posted: 19 Jun 2019, 06:27
by kwilhelm1
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


Thanks kindly!

Re: Row count after filter

Posted: 24 Jun 2019, 09:31
by mert.sincan

Could you please attach a codesandbox link for us? Also, do you use onFilter method to calculate row counts? Please see;

You can use to provide the sample.

Best Regards,

Re: Row count after filter

Posted: 24 Jun 2019, 19:06
by kwilhelm1
Here ya go: ... 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

Re: Row count after filter

Posted: 31 Jul 2019, 20:47
by kwilhelm1
well I suppose the answer is... do it my damn self

Re: Row count after filter

Posted: 10 Sep 2019, 13:22
by mert.sincan
Sorry for the delayed response! Please try the following index.js in your sample code;

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) {
    this.state = { dataTableValue: [], totalRecords: 0, totalFilteredValue: 0 };
    this.carService = new CarService();

  componentDidMount() {
      .then(data =>
        this.setState({ dataTableValue: data, totalRecords: data.length, totalFilteredValue: data.length })

  onSortChange(event) {
    let value = event.value;

    if (value.indexOf("!") === 0)
        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">
            onInput={e => this.setState({ first: 0, globalFilter: })}
            placeholder="Global Search"
        <div className="p-col p-sm-12 p-lg-10" style={{ textAlign: "right" }}>
            Total Cars: {this.state.totalRecords}
            <br />
          <span>Filtered Results: {this.state.totalFilteredValue}</span>

    return (
      <div className="App">
          <h2>PrimeReact Issue Template</h2>
            Please create a test case and attach the link of the plunkr to your
            github issue report.
            ref={(el)=> this.dt = el}
            onPage={(e) => this.setState({first: e.first})}
            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} />

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Best Regards,

Re: Row count after filter

Posted: 10 Sep 2019, 16:30
by kwilhelm1
I'll give it a shot! Thank you very kindly for getting back to me

Re: Row count after filter

Posted: 11 Sep 2019, 08:38
by mert.sincan
Thanks a lot! Sorry for the late response again!

Best Regards,