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!
Notice that the drag handle in the priority column is not centered.
If you inspect the priority column, you'll notice the cell div does not have the MuiDataGrid-rowReorderCellContainer class name on it.
Current behavior
The MuiDataGrid-rowReorderCellContainer className is not being applied when using a custom column definition for the reorder column. I believe the problem stems from this code:
Latest version
Steps to reproduce
Link to live example: https://codesandbox.io/s/nifty-scooby-gf4tlc?file=/src/Demo.tsx
Steps:
MuiDataGrid-rowReorderCellContainer
class name on it.Current behavior
The
MuiDataGrid-rowReorderCellContainer
className is not being applied when using a custom column definition for the reorder column. I believe the problem stems from this code:https://github.com/mui/mui-x/blob/630acb5595371eac0648fd7f1bea60a429351f69/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts#L33-L45
If a custom column has been passed, the class names don't get added to that column definition.
Expected behavior
It should be applied so I don' t have to do it manually.
Context
I want to provide a custom column definition as demonstrated in the documentation, but I'd like to keep a lot of the built-in styling.
Your environment
``` System: OS: macOS 14.5 Binaries: Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node npm: 10.8.2 - ~/Developer/component-library/node_modules/.bin/npm pnpm: Not Found Browsers: Chrome: 127.0.6533.89 Edge: 127.0.2651.74 Safari: 17.5 npmPackages: @emotion/react: ^11.7.1 => 11.13.0 @emotion/styled: ^11.6.0 => 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.5 @mui/icons-material: ^5.11.16 => 5.16.5 @mui/lab: 5.0.0-alpha.173 => 5.0.0-alpha.173 @mui/material: ^5.16.5 => 5.16.5 @mui/private-theming: 5.16.5 @mui/styled-engine: 5.16.4 @mui/system: 5.16.5 @mui/types: 7.2.15 @mui/utils: 5.16.5 @mui/x-data-grid: 7.11.1 @mui/x-data-grid-premium: ^7.4.0 => 7.11.1 @mui/x-data-grid-pro: 7.11.1 @mui/x-date-pickers: ^7.0.0 => 7.11.1 @mui/x-date-pickers-pro: ^7.0.0 => 7.11.1 @mui/x-internals: 7.11.1 @mui/x-license: ^7.0.0 => 7.11.1 @types/react: ^18.2.79 => 18.3.3 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.2.2 => 5.5.4 ```npx @mui/envinfo
Search keywords: row reorder custom column Order ID: 0332927583