How to make the move the checkbox to second column in case of MUI X DataGridPro tree view

Question

Can i know How to make the move the checkbox to second column in case of MUI X DataGridPro tree view?

Answer 1

You need to customize the column configuration to move the checkbox selection control to the second column in a MUI X DataGridPro tree view,

Here's how to do it:

Solution

import { DataGridPro } from '@mui/x-data-grid-pro';

const columns = [

  {

    field: '__check__',

    headerName: '', 

    width: 50,

  },

  {

    field: 'name',

    headerName: 'Name',

    width: 200,

  },

];


function TreeDataGrid() {

  return (

    <DataGridPro

      rows={rows}

      columns={columns}

      treeData

      getTreeDataPath={(row) => row.hierarchy}

      checkboxSelection

      disableSelectionOnClick

      initialState={{

        columns: {

          columnOrder: ['name', '__check__', /* other columns */], 

        },

      }}

    />

  );

}