[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 ...

https://github.com/user-attachments/assets/bcfd6c10-d2b0-46d7-aacc-1c6f5cc9cf31

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

https://github.com/user-attachments/assets/a5340a78-d09b-458f-9deb-ec16408bd3cb

[michelengelen]

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

https://github.com/user-attachments/assets/e8ad2b21-06c5-488b-9c67-50b20b11bdc2

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[bot]]

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!