Resizing
The sizing logic underneath resizableColumns.
Last updated August 3, 2026
resolveColumnWidths and fitColumnsToWidth are the functions DataGridComponent calls internally when resizableColumns is enabled — the first resolves each column's width from its definition, the sizing state, and the grid's defaults, the second redistributes width across columns under resizeMode="fit". Reach for them directly if you're building a custom grid adapter.
Functions
| Function | Type | Description |
|---|---|---|
resolveColumnWidths(columns, sizing, options) | readonly ResolvedColumn<Row>[] | Resolves each column's rendered width from its definition, the sizing state, and the grid's defaults. |
fitColumnsToWidth(columns, width, sizeDefaults) | readonly ResolvedColumn<Row>[] | Redistributes width across columns under resizeMode="fit". |
clampColumnWidth(width, constraints) | number | Holds a width within a column's min/max bounds. |
resolveColumnConstraints(column, sizeDefaults) | ColumnConstraints | The min/max a column may be resized between. |
beginColumnResize(column, startWidth, startPosition, sizeDefaults) | ColumnResizeSession | Opens a resize: captures the column's constraints and starting point so applying a pointer position is arithmetic on numbers alone. |
applyColumnResize(session, position) | number | The width the dragged column takes with the pointer at position. |
sizeColumnToContent(measuredWidth, constraints) | number | The width a double-click auto-fit resolves to, clamped to the column's bounds. |
totalColumnWidth(resolved) | number | The sum of every resolved column's width. |
The same logic, in the React grid
resizableColumns
Live example- Interact with the grid above to see its callbacks fire.
<DataGridComponent
columns={columns}
dataSource={rows}
resizableColumns
resizeMode="fit"
/>;