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.

The default rendered cell of the longText column type uses GridLongTextCell component to show the popup with the full text content when the expand button is clicked. To customize the popup content, use the renderContent prop of the GridLongTextCell component.

The example below demonstrates two customizations:

Character count: Shows character count below the text
Markdown preview: Renders markdown content as formatted HTML

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

Press Enter to start editing

Data Grid - Column customization recipes

Persisting column width and order

With pivoting

Custom long text popup content