Skip to main content

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 frontend variable to store the filters​

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

This will now track all the changes to the filters of the Table component and save them into the frontend 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 frontend 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
Create a frontend variable to save the table filters