[data grid] CheckboxSelection not working when any columns are pinned left

[Simencas]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/green-fog-3zgm7h
2. Click 'Toggle checkbox selection' button underneath the grid

Current behavior

The checkboxes does not show after enabling checkboxSelection and the column alignments are wrong. If any actions are pinned to the left, the actions are duplicated after enabling checkboxSelection.

Expected behavior

Enabling checkboxSelection should show checkboxes in the rows even though the grid already has columns pinned to the left, and pinned action columns should not duplicate. This worked on Datagrid version 6.

Context

No response

Your environment

npx @mui/envinfo

Used browsers: Chrome and Firefox

  System:
    OS: macOS 15.4
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 136.0.7103.93
    Edge: Not Found
    Safari: 18.4
  npmPackages:
    @emotion/react: ^11.9.0 => 11.13.3 
    @emotion/styled: ^11.8.1 => 11.13.0 
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.17.1 
    @mui/icons-material: ^5.17.1 => 5.17.1 
    @mui/material: ^5.17.1 => 5.17.1 
    @mui/private-theming:  5.17.1 
    @mui/styled-engine:  5.16.14 
    @mui/styles: ^5.17.1 => 5.17.1 
    @mui/system: ^5.17.1 => 5.17.1 
    @mui/types:  7.2.24 
    @mui/utils:  7.1.0 
    @mui/x-data-grid:  8.2.0 
    @mui/x-data-grid-premium: latest => 8.2.0 
    @mui/x-data-grid-pro:  8.2.0 
    @mui/x-date-pickers:  7.22.0 
    @mui/x-date-pickers-pro: ^7.22.0 => 7.22.0 
    @mui/x-internals:  8.2.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @mui/x-telemetry:  8.2.0 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @types/react: ^17.0.83 => 17.0.85 
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    typescript: ~5.4.0 => 5.4.5 

Search keywords: datagrid checkboxSelection pinned columns

Order ID: 98383

[kenanyusuf]

Hi @Simencas — thanks for raising the issue and the reproduction. Looks like it is an issue in v7 and v8.

Will add this to the board to get picked up when someone has availability.

---

As a potential interim workaround, would pinning the checkbox column be an option? Demo here

initialState={{
  pinnedColumns: {
    left: [GRID_CHECKBOX_SELECTION_COL_DEF.field, "name"],
    right: ["actions"],
  },
}}

[Simencas]

@KenanYusuf Thanks! The workaround seems to be viable for now.

[alisasanib]

~@KenanYusuf I started to take a look at this issue, but I noticed that the fix here in this separate PR also addressed this issue. As it is preserving the correct order of columns and respecting the initial structure of pinned/unpinned column, it will add checkboxes in the right place when we toggle the checkboxSelection~

Update: The initial commit fixed the issue, but as we applied the fix to the pinning pre-processor, it no longer fixes the issue

[Simencas]

@alisasanib I tested 8.5 with the linked PR and it does not fix this issue.

[alisasanib]

@alisasanib I tested 8.5 with the linked PR and it does not fix this issue.

Thanks, just updated my comment