Keep/re-apply filters when data changes

Tags: #<Tag:0x00007efc657870b8> #<Tag:0x00007efc65786f50>
#1

Hello, I have a question.
So let’s say I have the following setup:

export default function MyComponent({data}) {
    const [filters, setFilters] = useState([]);

    const hotSettings = {
        ///..,
        filters: true,
        afterFilter: (conditionsStack) => {
            setFilters(conditionsStack[0].conditions);
        }
    }

    return (
      <HotTable data={data} settings={hotSettings} className="handsontable"
      ///...
      />
    );
}

Basically, the data that I display in the table, is passed as props in a component whose role is to only display the handsontable.
If I filter this table, I save the filters in the state, inside the afterFilter hook.

My question is, in this situation, how do I re-apply my saved filters when the data object changes?
I know I have to do something like this:

const tableFilters = formInstance.getPlugin('filters');
tableFilters.addCondition(filters);
tableFilters.filter();

But I am not sure where or when exactly.
Also, maybe my approach is wrong, if there is a better one, please let me know.

Thank you!

#2

Hi @vitorialipan

When you need to reapply the filters after changing the data set there are two options.

If you are just updating the data and want to keep the cells’ state you can use the updateData() method, and then afterUpdateData hook to reapply the filters conditions there.

If you don’t need to keep the cells’ state, then you can use the loadData() method and afterLoadData hook.

#3

Hello,

Thank you for the reply!
I think afterUpdateData was what I was looking for, but when I apply the filters inside this hook, I get the error:

Assertion failed: Expecting an unsigned number.

Do you have any idea in which context does this error appear? Like, in general, what is causing it?
Maybe this way I can understand where I went wrong with my code.

Thank you!