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, Data Grid Pro allows all column reordering by dragging the header cells and moving them left or right.

Desk

Commodity

Trader Name

Trader Email

Quantity

Filled Quantity

Is Filled

No rows

<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.

username

age

@MUI

Total Rows: 1

<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