Persist filter values when data changes?

[AlexanderProd]

When the Data in my table changes, the filters get reset because the component reloads.
Obviously that is an expected behavior but is there an easy way to persist the filter settings?

Maybe someone has an example of how to persist filter settings?

[Idonoghue]

When calling useTable add autoResetFilters: false to the TableOptions. Docs describe it here

[AlexanderProd]

@Idonoghue Thanks, I didn't know this existed. But unfortunately it doesn't work for me. I've added autoResetFilters: false and other autoResets to my useTable hook but still resets when the data changes.

I'm using the latest version 7.7.0

useTable(
    {
      ...
      autoResetPage: false,
      autoResetSortBy: false,
      autoResetFilters: false,
    },
    useFilters,
  );

This is how I'm using my table. When fetchEintragungen is called, status, rows and columns changes. Rows and columns are memoized. Am I using it wrongly?

{status === 'pending' && (
  <Stack>
    {new Array(12).fill('').map((_, i) => (
      <Skeleton key={i} height="45px" />
    ))}
  </Stack>
)}
{status === 'success' && (
  <Table data={rows} columns={columns} fetchData={fetchEintragungen} />
)}

[Idonoghue]

From the snippet you shared it looks like Table is conditionally rendered depending on the lifecycle of your fetch (status === 'success'). If refetching is what updates your data then you don't want to conditionally render because it will remount the entire table which will definitely reset filters no matter your config.

If you want to hide the table and show a skeleton while fetching you might try a hack like display: hidden on the table while status === 'success'. If you absolutely need to conditionally render then I think you would need to lift filter state above Table and handle it manually using something like stateReducer (see here) but I would try and avoid that.