search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.32k forks source link

[data grid] Row pinning ordering #14807

Closed jimbo-codes closed 1 month ago

jimbo-codes commented 1 month ago

The problem in depth

When using MUI Data grid pro, my rows are pinning according to the original index order of my rows list, not according to the order of the Pinned rows I am passing in.

What is the intended solution for a user who wants to pin rows in a specific user-selected order that is independent of the original indexing of the rows? I worked off of the example in the docs, but all implementations seemed to pin according to the original index order.

Please let me know what, if any, solutions might be worth exploring.

Thanks!

Your environment

`npx @mui/envinfo` ``` This is with Chrome. System: OS: macOS 14.5 Binaries: Node: 22.2.0 - ~/.config/nvm/versions/node/v22.2.0/bin/node npm: 10.7.0 - ~/.config/nvm/versions/node/v22.2.0/bin/npm pnpm: Not Found Browsers: Chrome: 129.0.6668.71 Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.15.18 => 5.16.7 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.173 @mui/material: ^5.16.7 => 5.16.7 @mui/private-theming: 6.1.0 @mui/styled-engine: 6.1.0 @mui/system: ^6.1.0 => 6.1.0 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: ^7.18.0 => 7.18.0 @mui/x-data-grid-generator: ^7.16.0 => 7.16.0 @mui/x-data-grid-premium: 7.16.0 @mui/x-data-grid-pro: ^7.18.0 => 7.18.0 @mui/x-date-pickers: ^7.16.0 => 7.16.0 @mui/x-internals: 7.16.0 @mui/x-license: 7.16.0 @types/react: 18.3.4 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: 4.9.5 ```

Search keywords: Row Pinning Ordering Order ID: 99081

michelengelen commented 1 month ago

@arminmeh could you have a look here? Thanks! 👍🏼

arminmeh commented 1 month ago

@jimbo-codes

Pinned rows are shown in the order they are provided to the pinnedRows prop.

In our controlling pinned rows example, the pinned rows array is always re-generated from the data array, which makes the pinned rows appear in the order random data was generated.

I have updated the example to build the pinned rows out of the state which is updated from the user actions https://codesandbox.io/p/sandbox/keep-pinning-order-3yt2xt?file=%2Fsrc%2FDemo.tsx

As you can see, in this case, pinned rows appear in the order they are pinned.

You might want to adjust this further to fit your requirements. Hope that this helps.

jimbo-codes commented 1 month ago

Understood. Thank you for the clarification. In hindsight, this was an obvious thing to test. I was iterating over my original rows when splitting them into pinned and non-pinned (as in the docs example). I didn't think to test changing that order of iteration.

Issue resolved, thank you very much!

github-actions[bot] commented 1 month ago

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 @jimbo-codes! 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!