I’m using the MUI DataGrid Pro component to create a grid with checkboxes.

By default, the checkboxes appear in the first column .

However, I want to move the checkbox column to be the second column, right after my grouping column.

I attempted to rearrange the columns by splicing the column list and moving the checkbox column. This approach works when I move the checkbox column to any position from the third onwards, but it fails when I try to move it to the second position.

const getTreeDataPath = (row) => row.hierarchy;

const groupingColDef = {
  headerName: "Hierarchy",
  renderCell: (params) => <CustomGridTreeDataGroupingCell {...params} />,
};

let myCols = [...columns];

myCols.splice(1, 0, GRID_CHECKBOX_SELECTION_COL_DEF);

export default function TreeDataCustomGroupingColumn() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGridPro
        treeData
        rows={rows}
        columns={myCols}
        checkboxSelection
        getTreeDataPath={getTreeDataPath}
        groupingColDef={groupingColDef}
      />
    </div>
  );

Could anyone provide guidance on how to successfully move the checkbox column to the second position in the MUI DataGrid Pro component

Here is the link to Sandbox: Sandbox

I tried splicing the column list to move checkboxes, I’m able to move the checkbox to 3rd till last position but I’m not able to move the checkbox to 2nd position