PrimeReact - Problem with datatable and lazy loading

Question

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

Bihan Viranga · Accepted Answer · 2021-03-25 16:52:04Z

0

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 />

answered Mar 25, 2021 at 16:52

Bihan Viranga

3061 gold badge3 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PrimeReact - Problem with datatable and lazy loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related