CODEWITHSUNDEEP
reactjslazy-loadingprimereact
Korki Korkig
Korki Korkig

Reputation: 2814

How to implement lazy loading in DataTable of PrimeReact

I try to implement the lazy option of the DataTable. In the official example, only the onPage event is being used. But what if I need to use column filters, paging and sorting together? Is this the workflow which I need to develop?

  1. client collects all sort, filter, paging in a parameter list
  2. client send the parameter list to the backend
  3. backend filters the data according to the parameter list
  4. backend sends the new data to the client
  5. client updates the datatable by updating the state with the new updated data

If this is the workflow, then how do I do that since I don't see any global event which collects all the parameters from the DataTable.

I've created a test case where the CarService class supposed to filter the data based on the event parameters all together. Consider this CarService as the backend.

App

export class App extends Component<{}, State> {
    carService = new CarService();

    constructor(props) {
        super(props);

        this.state = {
        cars: this.carService.getCars()
        };
    }

    onSort = (event: any) => {
        this.setState({ cars: this.carService.getFilteredCars(event) });
    };

    onPage = (event: any) => {
        this.setState({ cars: this.carService.getFilteredCars(event) });
    };

    onFilter = (event: any) => {
        this.setState({ cars: this.carService.getFilteredCars(event) });
    };

    render() {
        return (
        <div className="App">
            <DataTable
            value={this.state.cars}
            paginator={true}
            lazy={true}
            rows={2}
            rowsPerPageOptions={[2, 4]}
            onSort={this.onSort}
            onPage={this.onPage}
            onFilter={this.onFilter}
            >
            <Column field="vin" header="Vin" filter sortable />
            <Column field="year" header="Year" filter sortable />
            </DataTable>
        </div>
        );
    }
}

CarService 

export class CarService {
    cars = [
        { vin: "aaa", year: 1980 },
        { vin: "bbb", year: 1981 },
        { vin: "ccc", year: 1982 },
        { vin: "ccc", year: 1983 },
        { vin: "csdd", year: 1984 },
        { vin: "cgg", year: 1982 },
        { vin: "cyy", year: 1982 }
    ];

    getCars() {
        return this.cars;
    }

    getFilteredCars(filter: string) {
        // filter the cars based on the filter
        // an example filter could be: ?name=TestName&page=1
        return this.cars;
    }
}

Upvotes: 0

Views: 7257

Answers (1)

Dusan Kovacevic
Dusan Kovacevic

Reputation: 1437

[UPDATE] for PrimeReact version < 3.x:

PrimeReact DataTable (set in lazy mode) has onLazyLoad event which is called in the following cases

  • when the current page number (or page size) is changed,
  • when any of defined column filters (actually inputs) are changed,
  • when sort direction of any column (where sorting is enabled) is changed.

Datatable with onLazyLoad event can be declared, for example, like this 

<DataTable value={this.state.cars} paginator={true}  lazy={true}
           rows={5} rowsPerPageOptions={[5, 10, 20]} 
           totalRecords={this.state.totalRecords}
           onLazyLoad={this.onLazyLoad} ... >

where onLazyLoad function can be

onLazyLoad = (event) => {
    console.log("On Lazy load event", event);
    this.carservice.getLazyCars(event)...
}

and where event parameter/object has the following properties

  • filters - key-value map of column filters
  • first - page number
  • multiSortMeta - key-value map if sorting is enabled for multiple columns simultaneously,
  • rows - number of rows per one page,
  • sortField - sort field name
  • sortOrder - sort order of sort field (1-ascending, -1 descending)

You can find more details here (with some other features demystified).

[UPDATE] for PrimeReact version > 3.x:

onLazyLoad event is removed from the library. Now relevant "lazy params" mentioned above are accessible via datatable's state property.

Add a reference to datatable

<DataTable ref={(el) => this.datatable = el} ... >

and retrieve "lazy params" (filters, sortField, sortOrder, first, multiSortMeta) from this.datatable.state object when you need them. For example

onPage = (event) => {
    console.log("Data table state", this.datatable.state)
    //get filtered data using lazy params
    //...
}

Upvotes: 2

Related Questions