Data Grid - Filtering customization recipes

Advanced filtering customization recipes.

Persisting filters in local storage

You can persist the filters in the local storage to keep the filters applied after the page is reloaded.

In the demo below, the React.useSyncExternalStore hook is used to synchronize the filters with the local storage.

Quick filter outside of the grid

The Quick Filter component is typically used in the Data Grid's Toolbar component slot.

Some use cases may call for placing components like the Quick Filter outside of the Grid. This requires certain considerations due to the Grid's context structure. The following example shows how to accomplish this:

Calculating filtered rows in advance

The Grid API provides the getFilterState method, which allows you to display the row count for predefined filters upfront without applying filters to the Data Grid: