Like many SaaS apps, UI Foundations Kit offers a system for registering filters that can be applied to data. This is a pattern used by apps like Stripe, Linear, and more. Threshold Filters allow users to select a field, a comparison operator, and a value to filter data by. This is a powerful way to allow users to manipulate data in a way that is easy to understand and use.

The MUI DataGrid offers a similar feature, but the filter UI is not as user-friendly, and is coupled to the DataGrid component’s state. The Threshold Filters in UI Foundations Kit are decoupled from the DataGrid, allowing them to be used in any context, like provided to your backend for filtering in SQL.

​
Usage

You can add your own filters in the /src/core/filters.tsx file, and register definitions that specific what operators, and values can be input by the user.

The following combinations of filters are built into the preview to demonstrate some of the possibilities:

  • field:price operator:> value:50
  • field:name operator:contains value:john
  • field:status operator:= value:active

​
Extending the filters

By default, the filters are setup to filter data in the client. You can extend the filters to work with your backend by adding a fetch function to the filter definition. This function should return a promise that resolves with the filtered data.

The preview serves as a good example of what is possible, for your own app you may need to customize the labels, icons, and operator UI to match your own data model.

Tours & WalkthroughsHelp Menu