genetic-orange•11mo ago

using MUI datagrid with pagination and filter on client side

im using MUI datagrid premium i want pagination and quickfilter via toolbar or normal column filter which mui data grid provides but issue is i am not use filter on client side with pagination on, like the filter doesnt considerr the on next pages just the current page

10 Replies

kapa.ai•11mo ago

Hi @tarang._. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct. When you're implementing client-side pagination with the pagination.mode set to "client," you might run into issues when applying client-side filtering. This is because client-side filtering is applied to the sliced data (the current page), not the whole data. To ensure that the client-side filtering is applied to the whole data, you need to use the pagination.mode: "off" prop. This will disable client-side pagination and allow the filtering to consider all the data, not just the current page. Here's how you can set it:

useDataGrid({  
 pagination: {  
 mode: "off",  
 },  
});

useDataGrid({  
 pagination: {  
 mode: "off",  
 },  
});

(Source: Refine Documentation (https://refine.dev/docs/faq/)) However, please note 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. When filterModel is not passed, it supports more than one criteria at a time, but cannot show which fields are filtered in <DataGrid> headers.

return <DataGrid {...dataGridProps} filterModel={undefined} autoHeight />;

return <DataGrid {...dataGridProps} filterModel={undefined} autoHeight />;

(Source: Refine Documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/)) If you want to handle the pagination on the client-side, you can pass the pagination.mode prop to the useDataGrid hook and set it to "client".

export const PostsList: React.FC = () => {  
 const { dataGridProps } = useDataGrid();  
  
 const {  
 paginationMode,  
 paginationModel,  
 onPaginationModelChange,  
 ...restDataGridProps  
 } = dataGridProps;  
  
 return (  
 <List>  
 <DataGrid  
 columns={columns}  
 {...restDataGridProps}  
 paginationMode={paginationMode}  
 paginationModel={paginationModel}  
 onPaginationModelChange={onPaginationModelChange}  
 autoHeight  
 />  
 </List>  
 );  
};

export const PostsList: React.FC = () => {  
 const { dataGridProps } = useDataGrid();  
  
 const {  
 paginationMode,  
 paginationModel,  
 onPaginationModelChange,  
 ...restDataGridProps  
 } = dataGridProps;  
  
 return (  
 <List>  
 <DataGrid  
 columns={columns}  
 {...restDataGridProps}  
 paginationMode={paginationMode}  
 paginationModel={paginationModel}  
 onPaginationModelChange={onPaginationModelChange}  
 autoHeight  
 />  
 </List>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/)) Remember, the useDataGrid hook handles pagination by setting the paginationMode, paginationModel, and onPaginationModelChange props that are compatible with <DataGrid>. It also syncs the pagination state with the URL if you enable the syncWithLocation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

genetic-orange•11mo ago

@kapa.ai yes i am using mui data grid premium

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Great! With the MUI DataGridPro, you can use the useDataGrid hook provided by Refine to handle pagination and filtering. Here's how you can use it:

export const PostsList: React.FC = () => {  
 const { dataGridProps } = useDataGrid();  
  
 const {  
 paginationMode,  
 paginationModel,  
 onPaginationModelChange,  
 ...restDataGridProps  
 } = dataGridProps;  
  
 return (  
 <List>  
 <DataGridPro  
 columns={columns}  
 {...restDataGridProps}  
 paginationMode={paginationMode}  
 paginationModel={paginationModel}  
 onPaginationModelChange={onPaginationModelChange}  
 autoHeight  
 />  
 </List>  
 );  
};

export const PostsList: React.FC = () => {  
 const { dataGridProps } = useDataGrid();  
  
 const {  
 paginationMode,  
 paginationModel,  
 onPaginationModelChange,  
 ...restDataGridProps  
 } = dataGridProps;  
  
 return (  
 <List>  
 <DataGridPro  
 columns={columns}  
 {...restDataGridProps}  
 paginationMode={paginationMode}  
 paginationModel={paginationModel}  
 onPaginationModelChange={onPaginationModelChange}  
 autoHeight  
 />  
 </List>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/)) The useDataGrid hook handles pagination by setting the paginationMode, paginationModel, and onPaginationModelChange props that are compatible with <DataGridPro>. It also syncs the pagination state with the URL if you enable the syncWithLocation. For filtering, you can use the filterModel prop. The filterModel prop is an object that allows you to control the filtering state. You can use it to set the items (an array of FilterItem), linkOperator (LinkOperator), and onFilterModelChange (a callback fired when the filterModel changes). Here's an example:

<DataGridPro  
 {...dataGridProps}  
 filterModel={{  
 items: [{ columnField: 'name', operatorValue: 'contains', value: 'React' }],  
 }}  
 onFilterModelChange={(model) => console.log(model)}  
/>

<DataGridPro  
 {...dataGridProps}  
 filterModel={{  
 items: [{ columnField: 'name', operatorValue: 'contains', value: 'React' }],  
 }}  
 onFilterModelChange={(model) => console.log(model)}  
/>

(Source: MUI X DataGridPro Documentation (https://mui.com/x/react-data-grid/#commercial-version)) Remember, the useDataGrid hook is compatible with both the <DataGrid> and the <DataGridPro> components. It simplifies working with features such as pagination, sorting, and filtering. Under the hood, it uses useList for the fetch. You can refer to the Refine Documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

Omer•11mo ago

Hey @tarang._ , If you are using client-side filtering, you should turn off pagination in useDataGrid. This way, you'll filter through all your data. https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#paginationmode

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.

genetic-orange•11mo ago

Hey @Omer thanks for the reply, here my issue there is too much data (more like logs) to be shown so pagination is a requirement for me and so is filtering to search through

Omer•11mo ago

So how do you plan to do client-side filtering? If you have a large dataset and can't send all your data to the client, you should use server-side filtering instead of client-side filtering.

genetic-orange•11mo ago

thank you that make sense i had previously done the same without refine getting all the data at once and then filtering and pagination on client side, probably i will look into it again with a new approach

Omer•11mo ago

for more details: https://github.com/mui/mui-x/issues/4244

GitHub

[data-grid] How to use filtering with server side pagination · Issu...

Discussed in #1811 Originally posted by oliviertassinari June 1, 2021 For support, please check out https://material-ui.com/getting-started/support/. Thanks! you can refer the below sandbox url. ht...