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.

Save and manage filters from the panel

Create a custom filter panel by wrapping the GridFilterPanel component and pass it to the slots.filterPanel prop.

In the demo below, the custom component lets users to save and manage filters, which are stored in local storage. For a more scalable approach, you can replace local storage with a server-side database.

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 lets you display the row count for predefined filters upfront without applying filters to the Data Grid: