Sizing & ordering

The resizing and reordering logic underneath resizableColumns and reorderableColumns.

resolveColumnWidths, fitColumnsToWidth, applyColumnOrder, and moveColumnBefore are the functions DataGridComponent calls internally when resizableColumns or reorderableColumns is enabled. Reach for them directly if you're building a custom grid adapter.

Prop	Type	Default	Description
`resolveColumnWidths(columns, options)`	`readonly ResolvedColumn<Row>[]`	`—`	Resolves each column's rendered width from its definition, sizing state, and grid defaults.
`fitColumnsToWidth(columns, width)`	`readonly ResolvedColumn<Row>[]`	`—`	Redistributes width across columns under resizeMode="fit".
`applyColumnOrder(order, event)`	`ColumnOrderState`	`—`	Applies a column-order event to produce the next order state.
`moveColumnBefore(order, columnId, beforeId)`	`ColumnOrderState`	`—`	Moves one column id to sit before another in the order.

The same logic, in the React grid

resizableColumns + reorderableColumns

Live example

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

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