CODEWITHSUNDEEP
reactjssortingdatatablelazy-loadingprimereact
Hugo dz
Hugo dz

Reputation: 55

PrimeReact - Problem with datatable and lazy loading

I have a problem with DataTable and lazy loading.

When I activate the lazy loading paramater (which i can't remove because the request from the api is too big) the filtering and sorting does not work when the lazy loading is activated. I understand why it works like that, but I really have no idea how to fix it.

If you have any solutions I take it beacause I'm really stuck here :)

link to codesandbox -> https://codesandbox.io/s/datatable-t92wk

I made some modifications with the base exemple in primereact like adding lazy loading, removing paggination and replace it by virtual scrolling. I also made a modification with the filtering but I think that what I did is not really correct, but it works in that case : it stops the lazy variable and therefore I can use lazy loading.

What I would love to do is to sort already loaded data in the table :)

Thank you

Upvotes: 2

Views: 1923

Answers (1)

Bihan Viranga
Bihan Viranga

Reputation: 306

Had the same issue. Apparently you can't use filtering with lazy loading mode (link). Makes sense really.

For sorting, you could pass an onSort function and everytime a sort event happens (i.e: user clicks on the column header), you can send back a DB request.

const onSort = (e) => {
 // use e.sortField and e.sortOrder to send a DB request,
}

<DataTable onSort={onSort} ... // rest of the stuff />

Upvotes: 0

Related Questions