Row count after filter

UI Components for React
Post Reply
kwilhelm1
Posts: 6
Joined: 04 Jun 2019, 02:24

19 Jun 2019, 06:27

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!

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

24 Jun 2019, 09:31

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,

kwilhelm1
Posts: 6
Joined: 04 Jun 2019, 02:24

24 Jun 2019, 19:06

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

kwilhelm1
Posts: 6
Joined: 04 Jun 2019, 02:24

31 Jul 2019, 20:47

well I suppose the answer is... do it my damn self

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

10 Sep 2019, 13:22

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) {
    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);

Best Regards,

kwilhelm1
Posts: 6
Joined: 04 Jun 2019, 02:24

10 Sep 2019, 16:30

I'll give it a shot! Thank you very kindly for getting back to me

aragorn
Posts: 3718
Joined: 29 Jun 2013, 12:38

11 Sep 2019, 08:38

Thanks a lot! Sorry for the late response again!

Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests