Multiple filters in datagrid on List page - MUI

Guys, how to apply multiple filters in the datagrid in List page? Does anyone know this?
4 Replies
kapa.ai
kapa.ai7mo ago
Hi @zion_48046. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To apply multiple filters in the DataGrid on a List page, you can use the useDataGrid hook provided by refine. However, it's important to note that the community version of MUI X DataGrid only supports filtering rows according to one criterion at a time. If you want to use multi-filtering, you would need to upgrade to the Pro plan. Here's an example of how you might do this:
return <DataGrid {...dataGridProps} filterModel={undefined} autoHeight />;
return <DataGrid {...dataGridProps} filterModel={undefined} autoHeight />;
When filterModel is not passed, it supports more than one criteria at a time, but cannot show which fields are filtered in <DataGrid> headers. If you want to disable server-side filtering, you can set the filters.mode: "off" in useDataGrid:
useDataGrid({
filters: {
mode: "off",
},
});
useDataGrid({
filters: {
mode: "off",
},
});
For more information, you can refer to the useDataGrid 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.ai7mo ago
<@1156621086176321576> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphire
conscious-sapphire7mo ago
how to upgrade to a Pro plan
harsh-harlequin
harsh-harlequin7mo ago
DataGridPro API - MUI X
API reference docs for the React DataGridPro component. Learn about the props, CSS, and other APIs of this exported module.