Overview
Resize columns by dragging the edge between column headers - just like in Excel. Supports min/max constraints, per-column opt-out, and localStorage persistence.
CR01 Interactive Demo
Hover between column headers to see the resize cursor. Drag to resize. The ID column has isResizable: false.
Resize Log: Drag the edge between column headers to resize...
Column Resizing
CR02 LocalStorage Persistence
Save column widths to localStorage so they persist across page reloads.
Persistence Setup
Programmatic API
Programmatic Control
API Reference
Grid Properties
| Property | Type | Default | Description |
|---|---|---|---|
gridName | string | - | Unique name for localStorage persistence |
shouldPersistColumnWidths | boolean | false | Save column widths to localStorage |
oncolumnresize | function | - | Callback after resize completes |
Column Properties
| Property | Type | Default | Description |
|---|---|---|---|
isResizable | boolean | true | Whether column can be resized |
minWidth | string | - | Minimum width constraint (e.g., '100px') |
maxWidth | string | - | Maximum width constraint (e.g., '300px') |
Methods
| Method | Description |
|---|---|
setColumnWidth(field, width) | Set width of a single column |
setColumnWidths(widths) | Set widths of multiple columns (array of { field, width }) |
getColumnWidthsState() | Get current widths of all columns |
ColumnResizeDetail Interface
TypeScript Types