Search code examples
javascriptreactjsmaterial-uimui-x

Clicking component inside renderHeader prop for MUI Data Grid Pro changes the sortModel

I'm using Material UI DataGridPro component to build a React Js app.

I want to create a custom filtering.

The red box in the image below is an IconButton for the filtering view and the blue box is for the column showing/hiding view.

enter image description here

I want to change the behavior of the custom filtering view.

If the filter icon is clicked, then the DataGridPro header will show some Select and TextField components as the filter fields like this image below.

enter image description here

If we click one of the Select and TextField components, the Data Grid Pro component will trigger the onSortModelChange prop to change the sortModel value like this image below.

enter image description here

So now the Data Grid Pro component is sorted based on the column.

Here is the conditions I want: if we click one of the Select and TextField components inside the Data Grid Pro header, the Data Grid Pro will not trigger the onSortModelChange prop which means that the sortModel value is not changed

Here is the playground: https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.js

I have tried to add sortable: false for every column but it will not show the arrow icon inside the Data Grid Pro header and prevent the column to be sorted. That's not what I want.

I also have added sortModel and onSortModelChange props for the Data Grid Pro component to control the sortModel value but it hasn't worked.

So, what's the solution for this case?

Solution

  • The MUI X team told me from the Github issue here https://github.com/mui/mui-x/issues/3655#issuecomment-1015263995 that the solution is very simple.

    Just add event.stopPropagation() for the onClick prop of each TextField and Select component.

    onClick={(event) => event.stopPropagation()}