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.16k stars 1.3k forks source link

[data grid] Custom Row Reorder Column Definition omits built-in CSS Classes #14057

Open genepaul opened 2 months ago

genepaul commented 2 months ago

Latest version

Steps to reproduce

Link to live example: https://codesandbox.io/s/nifty-scooby-gf4tlc?file=/src/Demo.tsx

Steps:

  1. Notice that the drag handle in the priority column is not centered.
  2. 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:

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

npx @mui/envinfo ``` 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 ```

Search keywords: row reorder custom column Order ID: 0332927583

michelengelen commented 2 months ago

Nice catch @genepaul ... I'll add this to the board. Thanks for raising this! 🙇🏼

k-rajat19 commented 1 month ago

@michelengelen Opened a PR for that https://github.com/mui/mui-x/pull/14473