[data grid] filterPanel does not persist column name order

[Aberkati]

Steps to reproduce

Link to live example: (required) : https://stackblitz.com/edit/react-5jot7j-clme3z?file=Demo.js

Steps:

1. Try to show filter panel name, you will have a ordered list like this :

2. Choose some filter and apply it like this 👍

3. Now reopen filterPanel and you will get unordered list

Current behavior

When I try to apply a filter I get an ordered list, but when I apply one and try again it doesnt work

Expected behavior

No response

Context

No response

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.1 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (128.0.2739.79)
npmPackages:
@emotion/react: ^11.10.6 => 11.11.1
@emotion/styled: ^11.10.6 => 11.11.0
@mui/base: 5.0.0-beta.7
@mui/core-downloads-tracker: 5.14.0
@mui/icons-material: ^5.11.16 => 5.14.0
@mui/material: ^5.12.1 => 5.14.0
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.0
@mui/types: 7.2.4
@mui/utils: 5.15.14
@mui/x-data-grid: 6.20.0
@mui/x-data-grid-premium: 6.20.0 => 6.20.0
@mui/x-data-grid-pro: 6.20.0
@mui/x-license-pro: ^6.10.0 => 6.10.2
@types/react: 17.0.75
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: 5.6.2

Search keywords: PremiumDataGrid
Order ID: 66242

[michelengelen]

Hey @Aberkati ... your example works for me ...

Screen.Recording.2024-10-01.at.16.34.43.mov

Could you check if there is something very specific you have to do in order to trigger this?

[Aberkati]

Please take a look here, the list's order change when I apply a filter

Media1.mp4

[michelengelen]

I get that, but when I do the exact same steps as you did I do not get unordered columns names.

Screen.Recording.2024-10-01.at.17.09.25.mov

That's why I am trying to investigate on your end.
Could you try this in a different browser? Ideally also in private mode?
Also, if possible, on a different OS?

[Aberkati]

Thank you for your quick reply, also in a private mode and different browser it not work..

[michelengelen]

@mui/xgrid could someone else test this as well? I did test this with:

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.11.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.89
    Safari: 17.6
    FireFox: 130.0.1

[cherniavskii]

I can reproduce the issue.

@Aberkati I can see that you're using a custom filter panel, but the GridFilterPanel component doesn't accept the columns prop.
If you want to sort the columns in the filter panel, I recommend following the Customize the filter panel content guide and using columnsSort.
Here is a working demo: https://stackblitz.com/edit/react-5jot7j-dylxrw?file=Demo.js

Is this what you're looking for?

[Aberkati]

it Work's like a charm ! thank you @cherniavskii

[github-actions]

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.

Note

We value your feedback @Aberkati! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!