[BUG] MUI useDataGrid setFilters

[JoeGaffney]

Describe the bug

setFilters does not update the dataGridProps filterModel

filters themselves update and setFilters works

Steps To Reproduce

use useDataGrid with filter mode set to client "off"

Follow the tutorial for https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid/#filtering but setting filter to off.

Possibly also an issue on server mode If you want to see the active filters reflected in the mui date grid controls.

Expected behavior

Filters should set the model

Here is a work around but ideally should happen in the useDataGrid hook

const handleFilter = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
  let result: any = {
    field: "status",
    value: checked ? "active" : undefined,
    operator: "contains",
  };
  setFilters([result]);
};

// we make an update to the filter model and passin the updated filter model to the data grid
const { filterModel, ...restDataGridProps } = dataGridProps;
const filterModelUpdated: any = {
  items: [...filters],
  logicOperator: "and",
};

<DataGrid {...restDataGridProps} filterModel={filterModelUpdated} columns={columnsBankAccounts} />

Packages

@refinedev/mui

Additional Context

No response

[aliemir]

Hey @JoeGaffney, sorry for the issue! We'll investigate it and find out what went wrong. Filters had to be connected bi-directionally. Maybe something changed in the <DataGrid /> API or we may have missed something during our refactors. Thank you for providing a workaround 🚀

[JoeGaffney]

Hey @aliemir no problem. It's super coinvent that you are providing both server and client side filtering in with the useDataGrid, its a big time saver.

[aliemir]

Hey @JoeGaffney, worked on this issue for a while and come to a conclusion for now. We're supporting both Pro and community versions of the MUI Data Grid with our @refinedev/mui's useDataGrid hook.

In the community version, data grid is limited to single column filtering. With Refine, you can place your filters outside of data grid to support multiple filters on multiple fields. When we try to reflect the changes in filters of Refine to filter model of data grid, we end up messing with the current state of the filters and filtering in column headers break. For the pro version it works without issues since it supports multiple fields to be filtered in the same time.

Reflecting changes on the data grid may break the existing apps using both column headers to filter and provide filtering with external elements. In the future we may introduce an API to pick and reflect only the wanted fields on the filter model but for now we've decided on not taking any actions here.

Do you have multiple filters on your data grid? Do you manage those in column headers or do you manage them outside of the data grid? We'd like to know your use case better if you can provide anything more and maybe we can try to implement a different solution for it. 🚀

As a workaround, yours work well with single fields and I can suggest another one without changing the filterModel prop. <DataGrid /> component accepts an apiRef prop which you can generate a ref using useGridApiRef and set filters and sorters using the ref.

Let me know if we can help you with any other issue 🙏

[JoeGaffney]

Hey @aliemir I was just using the one filter using the basic version.

I also did notice some issue with this approach that I can not always manually changes the filters after. I will look into the useGridApiRef

[JoeGaffney]

Thanks @aliemir using the ref works perfectly and simplfies the code