Controlled pagination filtering stuck in continuous render

[niravbhimani53]

Hi, I have forked the example of controlled pagination and added a filtering code to test the server-side filtering. (v7)

https://codesandbox.io/s/agitated-saha-kr4vd?file=/src/App.js

As the docs([How can I use the table state to fetch new data?](How can I use the table state to fetch new data?)) mentioned that adding the filters in useEffect hook

/ When these table states change, fetch new data!
  React.useEffect(() => {
    onFetchData({ pageIndex, pageSize, sortBy, filters })
  }, [onFetchData, pageIndex, pageSize, sortBy, filters])

But my table is rendering every time and if I try to filter the column then filter value disappears.

Can anyone help me how to fix this issue? Is this an issue with the implementation of filtering or a bug?

Thanks

[mcgarryt]

You probably wanna check out the autoResetFilters option (link) -- setting it to false should get the result you want.

[niravbhimani53]

Cheers

[sonalk215]

Hi, Nirav
Can you please share the working code, as i have the same requirement. I need global filter with manual pagination, but my table is rendering indefinitely

[niravbhimani53]

Here I added config to disable filter state which is managed internally. Hope it helps. Advanced use
https://codesandbox.io/s/blissful-dhawan-rbsvn?file=/src/App.js

[sonalk215]

Hi Nirav,
Thanks a lot for your response. I have another question. Can you help me with having a global filtering option along with manual pagination.I tried searching online, but so far i have not found any link.
Column filtering with manual pagination is working fine for me, but when i try with Global filter option, render again runs indefinitely.
Please help

[niravbhimani53]

Can you provide me with implementation on code sandbox?

[niravbhimani53]

If your table keeps re-rendering when you use Global filter then you can try autoResetGlobalFilter: false. This will prevent the render loop. You can check the documentation here

[sonalk215]

Hi Nirav,
I have set manualGlobalFilter: true
to avoid indefinite rendering, and its working fine
Thanks a lot for your help and reply