CODEWITHSUNDEEP
reactjsreact-table
luha
luha

Reputation: 23

React Table removes Filters when updating data

I am using the material ui kitchen sink example of react table (https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-kitchen-sink)

My data updates frequently, the issue is, that the filters are cleared everytime I update the data. You can try this by setting a filter in the codesandbox example and changing a value in a cell. onBlur it sets the state and with that the filters are cleared and checkboxes are unchecked.

Is there a way to prevent that or a solution/workaround for it?

Thank you very much!

Upvotes: 1

Views: 4820

Answers (3)

Amin Mashayekhan
Amin Mashayekhan

Reputation: 593

I think in react-table (v7.7.0), you can avoid unexpected results in filters by adding autoResetFilters: false to useTable hook, (and also avoid unexpected results in sorting and pagination by adding autoResetPage: false, and autoResetSortBy: false to useTable hook) like so:

const tableInstance = useTable({
        columns,
        data,
        autoResetPage: false,
        autoResetFilters: false,
        autoResetSortBy: false
    }, usePagination)

You can also add autoResetAll: false instead of those three lines of code.

Upvotes: 0

Bartłomiej Ostojski
Bartłomiej Ostojski

Reputation: 1

Add autoResetAll: false into your useReactTable options const table = useReactTable({ autoResetAll: false })

Upvotes: 0

Rohit Garg
Rohit Garg

Reputation: 851

Set auto reset flag for global filters to false -

autoResetGlobalFilter: false

Fixed CSB - https://codesandbox.io/s/strange-oskar-sqefh?file=/src/components/EnhancedTable.js:3191-3226

More details - https://react-table.tanstack.com/docs/api/useGlobalFilter#table-options

Upvotes: 7

Related Questions