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 */],
},
}}
/>
);
}