Manual filtering and extracting the filter state

[thomas-tran-de]

Hi, I want to use the filter state outside MRT and got a little stuck.

As far as I understand, I need both the columnFilters and the columnFilterFns to determine which filters to apply. I use both states to create a DB query in mapMrtToApiFilters.

My idea is to do something like this:

const [filters, setFilters] = useState<string[]>([]);

function handleColumnFiltersChange(
  changeFn: MRT_Updater<MRT_ColumnFiltersState>,
) {
  // @ts-expect-error TS2349    Bonus question: Is there a way to avoid this?
  const newColumnFilters = changeFn(columnFilters);
  setColumnFilters(newColumnFilters);
  const newFilters = mapMrtToApiFilters(newColumnFilters, columnFilterFns);
  setFilters(newFilters);
  setPagination({ ...pagination, pageIndex: 0 });
}

// same as above for onColumnFilterFnsChange

const table = useMantineReactTable<DataModel>({
  columns,
  data: data.rows,
  rowCount: data.rowCount,
  onColumnFiltersChange: handleColumnFiltersChange,
  onColumnFilterFnsChange: handleColumnFilterFnsChange,
  manualFiltering: true,
  manualPagination: true,
  enableColumnFilterModes: true,
  state: {
    columnFilters,
    columnFilterFns,
    pagination,
  },
});

However, I ran into an issue. When updating the filter functions, the following happens:

1. handleColumnFilterFnsChange is called and correctly updates filters.
2. handleColumnFiltersChange is called and overwrites filters with the previous filter function.

This means that the filter functions used in filters always lack one value behind. What am I missing? The issue is not in mapMrtToApiFilters. I already replaced it by a simple console log without anything else.

Right now, my workaround is to add an if condition to handleColumnFiltersChange:

if (JSON.stringify(newColumnFilters) === JSON.stringify(columnFilters))
  return;

Another solution I can think of is introducing useEffect. But it feels wrong to use it here, because I have access to the onChange handlers. In my understanding, useEffect should only be used if I have no other way of knowing when a state changes, e.g., because it depends on an external system.

I appreciate your suggestions 🙏