Why MUI Datagrid quick filter does not work if the filterModel is initialized?

Question

MUI data-grid version - 5.17.24

I'm trying to implement quickfilter for data-grid where the data-grid is already having filterModel logic. FilterModel works perfectly but the quickfilter is not working when the table has filterModel.

Removing the filterModel, the quickfilter works as expected. But i need both the features in my application.

TIA

Answer 1

Are you using a controlled filterModel?

The quick filter is a part of the filterModel, if you are using a controlled filterModel you can make the quick filter work with one of these options:

1. Also define/control quick filter using filterModel.quickFilterValues.

   <DataGrid
       filterModel={{
           items: [ ...yourCurrentFilterItems ],
           quickFilterValues: ['value 1', 'value 2'],
       }}
   />
   

2. If you don't want to go with option 1, and you have the filterModel stored in state, you can reflect the filter model changes using onFilterModelChange handler.

   const [filterModel, setFilterModel] = React.useState({
       items: [ ...yourCurrentFilterItems ],
       quickFilterValues: ['value 1', 'value 2'],
   });
   <DataGrid
       filterModel={filterModel}
       onFilterModelChange={setFilterModel}
   />
   

Or if you only need to provide filterModel at the start, you can use initialState.filter.filterModel instead.

<DataGrid
    initialState={{
        filter: {
            filterModel: {
                items: [ ...yourCurrentFilterItems ],
                quickFilterValues: ['value 1', 'value 2'],
            },
        },
    }}
/>