Data grid - Column ordering

Drag and drop your columns to reorder them.

By default, columns are ordered according to the order they are included in the columns array.

By default, DataGridPro allows all column reordering by dragging the header cells and moving them left or right.

<DataGridPro {...data} />

<DataGridPro {...data} />

Press Enter to start editing

To disable reordering on all columns, set the prop disableColumnReorder={true}.

To disable reordering in a specific column, set the disableReorder property to true in the GridColDef of the respective column.

<DataGridPro
  columns={[
    { field: 'id' },
    { field: 'username' },
    { field: 'age', disableReorder: true },
  ]}
  rows={rows}
/>

<DataGridPro
  columns={[
    { field: 'id' },
    { field: 'username' },
    { field: 'age', disableReorder: true },
  ]}
  rows={rows}
/>

Press Enter to start editing

In addition, column reordering emits the following events that can be imported:

columnHeaderDragStart: emitted when dragging of a header cell starts.
columnHeaderDragEnter: emitted when the cursor enters another header cell while dragging.
columnHeaderDragOver: emitted when dragging a header cell over another header cell.
columnHeaderDragEnd: emitted when dragging of a header cell stops.

API