national-gold
national-gold14mo ago

How to use datagrid filtering?

How to use this https://mui.com/x/react-data-grid/filtering/ on datagrid list page?
Data Grid - Filtering - MUI X
Easily filter your rows based on one or several criteria.
6 Replies
kapa.ai
kapa.ai14mo 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
kapa.ai14mo 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
kapa.ai14mo 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
kapa.ai14mo ago
<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below
stormy-gold
stormy-gold14mo 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/
national-gold
national-gold14mo ago
Thank you 😄