[data grid] re-rendering / resetting filter on state change

[rahulchougule]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/sharp-alex-vn2srr

Steps:

1. Set data grid with required columns and rows
2. Customize column to add button and open a tooltip on button click
3. Set row id in state to open tooltip for particular row
4. See the result. It will re-render the data grid with initial data and opens tooltip
5. You can see the filter is cleared.
6. Same happens on pagination without filtering the data

Current behavior

After clicking on Action button in first column, filter is cleared and data in data grid is presented in initial state i.e. without filtration. Same thing happens if you go to the next page in data grid via pagination and click in Action button, it redirects to the first page.

Expected behavior

After clicking on Action button (state changing) filtered data should remain until user clears the filter.

Context

No response

Your environment

System: OS: Windows 10 10.0.19045 Binaries: Node: 20.0.0 - C:\Program Files\nodejs\node.EXE npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.68) npmPackages: @emotion/react: ^11.11.0 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.7 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: ^5.11.16 => 5.14.0 @mui/lab: ^5.0.0-alpha.134 => 5.0.0-alpha.136 @mui/material: ^5.13.3 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-charts: ^6.18.0 => 6.18.0 @mui/x-data-grid: ^6.14.0 => 6.14.0 @mui/x-date-pickers: ^6.0.0-beta.5 => 6.10.0 @types/react: ^18.2.8 => 18.2.14 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5

Search keywords: mui data grid

Search keywords:

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[rahulchougule]

I tried to reproduce this issue on code sandbox please check here. issue

It is due to the StyledDataGrid. If you use DataGrid instead of StyledDataGrid it will work.

[segullshairbutt]

I was also facing the same problem when I updated to version 7. I use server-side pagination, and when a page is changed I update the data based on that page change. the onPaginationModelChange callback is triggered again with the initial page.

But I found that I wasn't memoizing the rowCount when new data was loaded as recommended by MUI at: https://mui.com/x/react-data-grid/pagination/#server-side-pagination, I changed it accordingly and everything has started working so far.

@rahulchougule I am not able to access your sandbox at the link you provided: https://codesandbox.io/s/sharp-alex-vn2srr

[rahulchougule]

@segullshairbutt you can try now

[segullshairbutt]

@segullshairbutt you can try now

Still not accessible publicly

[KenanYusuf]

@segullshairbutt you can try now

There is a typo in this link, it should be https://codesandbox.io/p/sandbox/sharp-alex-vn2srr

I have updated the issue description with a link to this.

[KenanYusuf]

Hi @rahulchougule

The issue you are seeing is caused by defining the styled versions of the components within the body of your App component. As a rule, you should never define components inside of another component.

const Component1 = () => {
  // ❌ new component is created on every rerender
  const Component2 = () => <div>Component 2</div>;

  return <Component2 />
}

// ✅ the component is defined once
const Component2 = () => <div>Component 2</div>;

const Component1 = () => {  
  return <Component2 />
}

See the updated example where I have moved the StyledDataGrid outside of the App component: https://codesandbox.io/p/sandbox/13636-re-rendering-resetting-filter-on-state-change-jp7gxs?file=%2Fsrc%2FApp.js%3A136%2C34

[rahulchougule]

@KenanYusuf Got your point. Thank you for your updates.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@rahulchougule: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.