How to position checkbox column in the middle of MUI X Data Grid?

Question

I'm using MUI X Data Grid (Material-UI) and trying to position the checkbox selection column in the middle of my grid. Currently, even though I define the checkbox column in my column definitions array at the desired position, it always appears as the first column.

Here's my current implementation:

// Table component
<ExDataGrid
  columns={columnsTable3pl}
  checkboxSelection
  hideFooter
  rows={productsWarehouse || []}
  loading={isPending || isPendingNotes}
/>

// Column definitions
export const columnsTable3pl: GridColDef[] = [
  {
    field: 'notes',
    headerName: 'Note',
    // ... other props
  },
  { ...BrandColumn },
  { ...ProductNameColumn },
  {
    field: 'asin',
    headerName: 'ASIN',
    // ... other props
  },
  {
    field: 'quantity',
    headerName: 'Total Quantity',
    // ... other props
  },
  {
    ...GRID_CHECKBOX_SELECTION_COL_DEF,
    headerClassName: 'bg-expander-light text-white',
    renderHeader: () => '',
    headerAlign: 'center',
    align: 'center',
  },
  // ... other columns
];

Positioning the GRID_CHECKBOX_SELECTION_COL_DEF in the middle of my columns array.

Environment:

"@mui/x-data-grid-premium": "latest version"
React
TypeScript

I did the same with one of the MUI-X examples, and it worked. Do you see a difference in your code? — Piotr G.
– Piotr G., Commented Aug 8 at 14:55

Daisi · Accepted Answer · 2025-06-05 17:18:03Z

0

I think MUI data grid always forces the checkbox selection column to the start, regardless of its position in the columns array. I don't think you can reposition it using columns, instead you can set checkboxSelectionVisibleOnly and manage the checkbox rendring manually using a custom column if you want it elsewhere. Ohterwise checkbox columns will always stay first by design.

answered Jun 5 at 17:18

Daisi

2,5881 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to position checkbox column in the middle of MUI X Data Grid?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related