Filter option issue with same settings for two tables

Hi Team,

We are using Handsontable version “14.1” and Angular v17.

We have separate tables in two tabs with same settings (like tab1->table1` & tab2-> table2(*with nestedHeaders)). when we navigate between tabs, we are update the settings by updatesettings() with following details like data, columnHeaders, columns, hiddencolumns and nestedHeaders.

When doing filter from one table (like tab1->table1->column1) then navigate to tab2 that filter is affects in tab2->table2->column1 and bound data (rows) got filtered.

When I click the tab2->table2->column1 filter icon, it is showing tab1->table1->column1 row details in the filter option (check and uncheck options).

Please let us know how to reset or update the user filtered options for both the table while update the settings in navigations between the tabs.

Hi @saravanan.m

I am not sure if I will be able to solve this case without a demo.

Here, https://jsfiddle.net/fgc3zy45/1/, we have two tables in two tabs, and while performing filtering on one of the tables, it is not applied to the second out. Please tell me what am I missing here?

Hi @aleksandra_budnik,

In this example you used two container, two hot instance and you are render it when navigate.

In my example, I just has only one settings for the table and hot instance also and when navigate I just update the settings with data,column and columnHeaders then updateSettings(). so in that case what happen is data, column and columnheader details changed but old filter value(table1 filter) value is applied in table2 after navigate.

Please try with single container, hot instance and settings, while navigate please update the settings with new data and columns, then do filter and try navigate again.

thanks

OK, so when you have a single table and you update the data do you use the loadData(), updateData() or settings > data ?

If you were using 11.1 or older and switched to a newer version, then I can recommend checking this migration guide https://handsontable.com/docs/javascript-data-grid/migration-from-11.1-to-12.0/ as we changed the behavior of data loading. It was dedicated by the use of state in React.

In newer versions, you need to call loadData() to reset the plugins (filters as well).

Hi @aleksandra_budnik,

yes I have fix the issue.

Thank you so much.

Great. Thank you for the update.