Column resizing

Dragging a column wider with resizableColumns, resizeMode, and columnSizeDefaults.

Last updated August 3, 2026

resizableColumns turns on dragging a header's trailing edge to resize, unless a column sets its own resizable to override the grid. Double-clicking the edge fits the column to its content instead. resizeMode decides what happens to the rest of the grid: "fit" (the default) redistributes the space a resize gives up or takes among the other columns; "fixed" leaves every other column exactly where it was.

fit vs. fixed

resizableColumns

Live example

fit — columns fill the gridfixed — columns keep their own width

Id	Service	Environment Name	Environment Region	Status	Cost
1	checkout-api	production	us-east-1	healthy	1240.5
2	billing-worker	production	eu-west-1	degraded	860.2
3	search-index	staging	us-east-1	healthy	92.75
4	notifications	production	us-west-2	down	305.4
5	analytics-pipeline	staging	eu-west-1	healthy	145

Interact with the grid above to see its callbacks fire.

<DataGridComponent
  columns={columns}
  dataSource={rows}
  resizableColumns
  resizeMode="fit"
  onColumnResize={({ columnId, width, phase }) => {
    if (phase === "end") persist(columnId, width);
  }}
/>;

Props

Prop	Type	Default	Description
`resizableColumns`	`boolean`	`false`	Whether columns can be dragged wider, unless a column says otherwise.
`resizeMode`	`"fit" \| "fixed"`	`"fit"`	Whether columns fill the grid's width or sit at their own.
`columnSizeDefaults`	`Partial<ColumnSizeDefaults>`		Width, minWidth, maxWidth applied to a column that sets none of its own.
`defaultColumnSizing`	`ColumnSizingState`		Column widths to start from, keyed by column id. Uncontrolled.
`onColumnResize`	`(event: ColumnResizeEvent) => void`		Called as the user resizes a column: continuously with phase "move", once with "end".
`column.resizable`	`boolean`		Per-column override of resizableColumns — a column can opt out of an otherwise resizable grid, or in on one that is not.
`column.width / minWidth / maxWidth`	`number`		This column's own starting width and resize bounds.

Keyboard & pointer interactions

Drag a header's trailing edge to resize; double-click it to size the column to its content.
With the trailing edge focused, Alt+ArrowLeft / Alt+ArrowRight nudge the width; Escape cancels an in-progress resize.

Edit this page on GitHub