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•10mo 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•10mo ago

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

foreign-sapphire•10mo ago

how to upgrade to a Pro plan

like-gold•10mo ago

https://mui.com/x/api/data-grid/data-grid-pro/

DataGridPro API - MUI X

API reference docs for the React DataGridPro component. Learn about the props, CSS, and other APIs of this exported module.