[BUG] MUI useDataGrid setFilters
JoeGaffney opened this issue ยท 5 comments
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
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 ๐
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.
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 ๐
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
Thanks @aliemir using the ref works perfectly and simplfies the code