MUI Filters

In the previous section, we saw how to import the MUI adapter and use it to render the grid. In this section, we will see how to use the MUI adapter to render the filters.

MUI Filters

Live Editor

function App() { const [useMaterialAdapter, setUseMaterialAdapter] = useState(true); const columns = [ { ...createSelectionColumn({ itemRenderer: SelectionCheckBoxRenderer, headerRenderer: SelectionCheckBoxHeaderRenderer, }), }, { ...createColumn("department", "string", "Department"), filterOptions: { ...createSelectFilterOptions(), }, }, { ...createColumn("stateCode", "string", "Territory"), filterOptions: { ...createSelectFilterOptions(), filterComboBoxDataProvider: Employee.allStates, filterComboBoxLabelField: "label", filterComboBoxDataField: "data", }, }, { ...createColumn("isActive", "boolean", "Active"), filterOptions: { ...createTriStateCheckBoxFilterOptions(), }, }, { ...createColumn("annualSalary", "currency", "Salary"), filterOptions: { ...createNumericRangeFilterOptions(), }, }, { ...createColumn("hireDate", "date", "Hire Date"), filterOptions: { ...createDateFilterOptions(), }, }, createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <div> <div className="ezgrid-dg-toolbar-section"> <button onClick={() => { setUseMaterialAdapter(!useMaterialAdapter); }} > Toggle MUI Adapter </button> </div> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors: [createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, adapter: useMaterialAdapter ? materialAdapter : undefined, columns, enableFilters: true, }} /> </div> ); }

function App() {
  const [useMaterialAdapter, setUseMaterialAdapter] = useState(true);

  const columns = [
    {
      ...createSelectionColumn({
        itemRenderer: SelectionCheckBoxRenderer,
        headerRenderer: SelectionCheckBoxHeaderRenderer,
      }),
    },
    {
      ...createColumn("department", "string", "Department"),
      filterOptions: {
        ...createSelectFilterOptions(),
      },
    },
    {
      ...createColumn("stateCode", "string", "Territory"),
      filterOptions: {
        ...createSelectFilterOptions(),
        filterComboBoxDataProvider: Employee.allStates,
        filterComboBoxLabelField: "label",
        filterComboBoxDataField: "data",
      },
    },
    {
      ...createColumn("isActive", "boolean", "Active"),
      filterOptions: {
        ...createTriStateCheckBoxFilterOptions(),
      },
    },
    {
      ...createColumn("annualSalary", "currency", "Salary"),
      filterOptions: {
        ...createNumericRangeFilterOptions(),
      },
    },
    {
      ...createColumn("hireDate", "date", "Hire Date"),
      filterOptions: {
        ...createDateFilterOptions(),
      },
    },
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];

  return (
    <div>
      <div className="ezgrid-dg-toolbar-section">
        <button
          onClick={() => {
            setUseMaterialAdapter(!useMaterialAdapter);
          }}
        >
          Toggle MUI Adapter
        </button>
      </div>
      <ReactDataGrid
        style={{ height: "400px", width: "100%" }}
        gridOptions={{
          behaviors: [createFilterBehavior({})],
          dataProvider: Employee.getAllEmployees(),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          adapter: useMaterialAdapter ? materialAdapter : undefined,
          columns,
          enableFilters: true,
        }}
      />
    </div>
  );
}

Result

Loading...

As you can see, the filters are rendered using the MUI adapter. Notice, all we need to do is to pass the materialAdapter to the adapter prop of the grid.

tip

Please click the Toggle MUI Adapter button to see the difference between the default and the MUI adapter. This also demonstrates that with a single line of code, you can switch between the default and the MUI adapter.

MUI Custom Filters

Just like creating custom filters using basic HTML elements, you can also create custom filters using MUI components. Let's take a look at an example. We will use the MUI Slider component to create a custom filter for the annualSalary column.

Live Editor

function App() { const sliderFilter = (props) => { const node = props.node; const api = getApi(node); const filterValue = api.getFilterValue("annualSalary"); return ( <div style={{ width: "100%", height: "100%", paddingLeft: 10, paddingRight: 10, display: "flex", alignItems: "end", }} > <Slider value={ filterValue ? [ resolveExpression(filterValue, "start"), resolveExpression(filterValue, "end"), ] : [0, 100000] } onChange={(e, val) => api.setFilterValue("annualSalary", { start: val[0], end: val[1] }) } valueLabelDisplay="auto" min={50000} max={100000} aria-labelledby="range-slider" getAriaValueText={(value) => `${value}K`} marks={[ { value: 50000, label: "50K" }, { value: 75000, label: "75K" }, { value: 100000, label: "100K" }, ]} /> </div> ); }; const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("annualSalary", "currency", "Salary"), filterOptions: { filterRenderer: sliderFilter, filterOperation: FilterOperation.Between, }, }, { ...createColumn("hireDate", "date", "Hire Date"), filterOptions: { ...createDateFilterOptions(), }, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors: [createFilterBehavior({})], filterRowHeight: 100, dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, adapter: materialAdapter, columns, enableFilters: true, }} /> ); }

function App() {
  const sliderFilter = (props) => {
    const node = props.node;
    const api = getApi(node);
    const filterValue = api.getFilterValue("annualSalary");
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
          paddingLeft: 10,
          paddingRight: 10,
          display: "flex",
          alignItems: "end",
        }}
      >
        <Slider
          value={
            filterValue
              ? [
                  resolveExpression(filterValue, "start"),
                  resolveExpression(filterValue, "end"),
                ]
              : [0, 100000]
          }
          onChange={(e, val) =>
            api.setFilterValue("annualSalary", { start: val[0], end: val[1] })
          }
          valueLabelDisplay="auto"
          min={50000}
          max={100000}
          aria-labelledby="range-slider"
          getAriaValueText={(value) => `${value}K`}
          marks={[
            { value: 50000, label: "50K" },
            { value: 75000, label: "75K" },
            { value: 100000, label: "100K" },
          ]}
        />
      </div>
    );
  };
  const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("annualSalary", "currency", "Salary"),
      filterOptions: {
        filterRenderer: sliderFilter,
        filterOperation: FilterOperation.Between,
      },
    },
    {
      ...createColumn("hireDate", "date", "Hire Date"),
      filterOptions: {
        ...createDateFilterOptions(),
      },
    },
  ];

  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        behaviors: [createFilterBehavior({})],
        filterRowHeight: 100,
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        adapter: materialAdapter,
        columns,
        enableFilters: true,
      }}
    />
  );
}

Result

Loading...

MUI Advanced Filters

There is a much more elaborate example of using MUI components to create custom filters in the MUI Advanced Filters section.

MUI Global Filters

In the MUI Advanced Filters example, please pay attention to the global toolbar, we demonstrate how to use the MUI AutoComplete component to create a global filter.