Data Grid - Column customization recipes

Advanced column customization recipes.

Persisting column width and order

When the columns prop reference is updated, the column width and order is reset to the colDef.width and the order of the colDef object and any updates will be lost. This is because the Data Grid considers update of the columns prop as a new set of columns, and the previous state is discarded.

To persist the column width and order when the columns prop is updated, consider persisting the state of the columns in the userland.

<Button onClick={() => setIndex((prev) => prev + 1)}>
  Update columns reference
</Button>
<div style={{ height: 250 }}>
  <DataGridPro
    apiRef={apiRef}
    columns={columnsState.columns}
    onColumnWidthChange={columnsState.onColumnWidthChange}
    onColumnOrderChange={columnsState.onColumnOrderChange}
    rows={rows}
  />
</div>

<Button onClick={() => setIndex((prev) => prev + 1)}>
  Update columns reference
</Button>
<div style={{ height: 250 }}>
  <DataGridPro
    apiRef={apiRef}
    columns={columnsState.columns}
    onColumnWidthChange={columnsState.onColumnWidthChange}
    onColumnOrderChange={columnsState.onColumnOrderChange}
    rows={rows}
  />
</div>

Press Enter to start editing

With pivoting

Pivoting creates columns dynamically, based on the pivoting model and the row data.

To keep the column width of the pivoted grid after columns reference is changed, use groupingColDef and pivotingColDef props to apply the width updates to the autogenerated columns.

The demo below uses modified version of the useColumnsState() from the previous example in combination with a callbacks for grouping and pivoting columns.