Data Grid - Filter customization

Ways to customize your filters.

Customize the operators

The full typing details can be found on the GridFilterOperator API page.

An operator determines if a cell value should be considered as a valid filtered value. The candidate value used by the operator is the one corresponding to the field attribute or the value returned by the valueGetter of the GridColDef.

Each column type comes with a default array of operators. You can get them by importing the following functions:

You can find more information about the supported column types in the columns section.

Create a custom operator

If the built-in filter operators are not enough, creating a custom operator is an option. A custom operator is defined by creating a GridFilterOperator object. This object has to be added to the filterOperators attribute of the GridColDef.

The main part of an operator is the getApplyFilterFn function. When applying the filters, the data grid will call this function with the filter item and the column on which the item must be applied. This function must return another function that takes the cell value as an input and return true if it satisfies the operator condition.

const operator: GridFilterOperator = {
  label: 'From',
  value: 'from',
  getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => {
    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
      return null;
    }

    return (params: GridCellParams): boolean => {
      return Number(params.value) >= Number(filterItem.value);
    };
  },
  InputComponent: RatingInputValue,
  InputComponentProps: { type: 'number' },
};

In the demo below, you can see how to create a completely new operator for the Rating column.

Wrap built-in operators

You can create custom operators that re-use the logic of the built-in ones.

In the demo below, the selected rows are always visible even when they don't match the filtering rules.

Multiple values operator

You can create a custom operator which accepts multiple values. To do this, provide an array of values to the value property of the filterItem. The valueParser of the GridColDef will be applied to each item of the array.

The filtering function getApplyFilterFn must be adapted to handle filterItem.value as an array. Below is an example for a "between" operator, applied on the "Quantity" column.

{
  label: 'Between',
  value: 'between',
  getApplyFilterFn: (filterItem: GridFilterItem) => {
    if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
      return null;
    }
    if (filterItem.value[0] == null || filterItem.value[1] == null) {
      return null;
    }
    return ({ value }): boolean => {
      return value != null && filterItem.value[0] <= value && value <= filterItem.value[1];
    };
  },
  InputComponent: InputNumberInterval,
}

Remove an operator

To remove built-in operators, import the method to generate them and filter the output to fit your needs.

// Only keep '>' and '<' default operators
const filterOperators = getGridNumericOperators().filter(
  (operator) => operator.value === '>' || operator.value === '<',
);

In the demo below, the rating column only has the < and > operators.

Custom input component

The value used by the operator to look for has to be entered by the user. On most column types, a text field is used. However, a custom component can be rendered instead.

In the demo below, the rating column reuses the numeric operators but the rating component is used to enter the value of the filter.

Custom column types

When defining a custom column type, by default the data grid will reuse the operators from the type that was extended. The filter operators can then be edited just like on a regular column.

const ratingColumnType: GridColTypeDef = {
  extendType: 'number',
  filterOperators: getGridNumericOperators().filter(
    (operator) => operator.value === '>' || operator.value === '<',
  ),
};

Custom filter panel

You can customize the rendering of the filter panel as shown in the component section of the documentation.

Customize the filter panel content

The customization of the filter panel content can be performed by passing props to the default <GridFilterPanel /> component. The available props allow overriding:

• The logicOperators (can contains GridLogicOperator.And and GridLogicOperator.Or)
• The order of the column selector (can be "asc" or "desc")
• Any prop of the input components

Input components can be customized by using two approaches. You can pass a sx prop to any input container or you can use CSS selectors on nested components of the filter panel. More details are available in the demo.

The value input is a special case, because it can contain a wide variety of components (the one provided or your custom InputComponent). To pass props directly to the InputComponent and not its wrapper, you can use valueInputProps.InputComponentProps.

Customize the filter panel position

The demo below shows how to anchor the filter panel to the toolbar button instead of the column header.

API

• GridFilterOperator
• GridFilterItem
• GridFilterPanel
• DataGrid
• DataGridPro
• DataGridPremium