How to use datagrid filtering?

How to use this https://mui.com/x/react-data-grid/filtering/ on datagrid list page?

Easily filter your rows based on one or several criteria.

6 Replies

kapa.ai•16mo ago

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•16mo ago

---------------------- To use filtering with the MUI DataGrid in a refine application, you can utilize the useDataGrid hook. Here's an example of how to implement filtering in a DataGrid list page using the information from the extracts: 1. Import the necessary components and hooks:

import { useDataGrid, List } from "@refinedev/mui";
import { FormControlLabel, Checkbox } from "@mui/material";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

import { useDataGrid, List } from "@refinedev/mui";
import { FormControlLabel, Checkbox } from "@mui/material";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

2. Define your columns:

const columns: GridColumns = [
  {
    field: "id",
    headerName: "ID",
    type: "number",
  },
  { field: "title", headerName: "Title" },
  { field: "status", headerName: "Status" },
];

const columns: GridColumns = [
  {
    field: "id",
    headerName: "ID",
    type: "number",
  },
  { field: "title", headerName: "Title" },
  { field: "status", headerName: "Status" },
];

3. Create your PostsList component and use the useDataGrid hook:

export const PostsList: React.FC = () => {
  const { dataGridProps, setFilters } = useDataGrid();

  const handleFilter = (
    e: React.ChangeEvent<HTMLInputElement>,
    checked: boolean,
  ) => {
    setFilters([
      {
        field: "status",
        value: checked ? "draft" : undefined,
        operator: "eq",
      },
    ]);
  };

  return (
    <List>
      <FormControlLabel
        label="Filter by Draft Status"
        control={<Checkbox onChange={handleFilter} />}
      />
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

export const PostsList: React.FC = () => {
  const { dataGridProps, setFilters } = useDataGrid();

  const handleFilter = (
    e: React.ChangeEvent<HTMLInputElement>,
    checked: boolean,
  ) => {
    setFilters([
      {
        field: "status",
        value: checked ? "draft" : undefined,
        operator: "eq",
      },
    ]);
  };

  return (
    <List>
      <FormControlLabel
        label="Filter by Draft Status"
        control={<Checkbox onChange={handleFilter} />}
      />
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

In this example, we're using a checkbox to filter the DataGrid by the "draft" status. The handleFilter function updates the filters using the setFilters function provided by the useDataGrid hook. Keep in mind that the MUI X community version only supports filtering by one criterion at a time. To use multi-filtering, you need to upgrade to the Pro plan (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid#).

useDataGrid | refine

By using useDataGrid, you can get properties that are compatible with MUI X component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses useList for the fetch.

kapa.ai•16mo ago

For more information on using the useDataGrid hook, refer to the refine documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below

foreign-sapphire•16mo ago

Hey @regnregn, You can check these examples which uses <DataGrid> component: https://refine.dev/docs/examples/table/mui/useDataGrid/ https://refine.dev/docs/examples/table/mui/advanced/

optimistic-gold•16mo ago

Thank you 😄