Persisting filters when using Insert, Update, or Delete rows with Form

The default behavior of a Table component is to reset the filters when the underlying data is refreshed. In order to persist existing filters when updating and refreshing table data, please follow this guide.

Create a Temporary state variable to store the filters

1. Click into the “State” Pane on the left sidebar
2. Create a new Temporary state variable
3. Rename it tableFilters
4. Set the Default Value to be {} to match the default table filters of the Table component
   
5. In the Table component's event handlers, add onFiltersChanged and set the state variable to be the Table's filter object {{Table1.filters}}
   

This will now track all the changes to the filters of the Table component and save them into the state variable that can be accessed later.

Update the Table’s filters when changes are made

info

Pre-requisites: Follow our Table bulk edit and update tutorial to learn how to set up the APIs for steps 1.1 and 1.2.

1. In the Table component's event handlers, update onSaveChanges to:
   1. Run the API to update the underlying dataset, in this example bulkEditAPI
   2. Run the API to refresh the Table’s dataset, in this example getTableDataAPI
   3. Set the Table’s Filters to the value of the state variable with {{tableFilters.value}}
2. Now, when the Table’s data is edited in-line, the filters will automatically get reapplied after the data is refreshed