Resize & Reorder
Drag the right edge of any column header to resize it. Drag a column header to reorder columns. Both features require opt-in per column.
Two-level opt-in
Both features require enabling at two levels: globally in config and per-column
in the column definition. Setting config.columnResize: true without
column.resizable: true (or vice versa) has no effect on that column.
This lets you mix resizable and fixed columns in the same grid.
Column resize
A drag handle appears at the right edge of resizable header cells. While dragging,
(columnResized) fires continuously with { key, newWidth, prevWidth, final: false }.
The final event (on mouse-up) has final: true — that's when you'd persist the width.
Resizing a flex column converts it to a fixed width automatically, so the column stays at the size you dragged it to.
Double-click to auto-fit
Double-click a column's right border to auto-size that one column to its content — the same
gesture you know from spreadsheets. It fits the header text and the loaded data cells, works
whatever autoSizeStrategy is (or isn't) configured, and honours
suppressAutoSize. Prefer to do it in code? Call
grid.autoSizeColumn(key) for one column, or grid.autoSizeColumns()
for all of them. With virtual scrolling, auto-fit measures the rows currently loaded (the
same as the programmatic API).
Column reorder
Drag a column header left or right to reorder it. The other columns animate into their new positions as you drop.
(columnReordered) emits { fromKey, toKey, insertSide } after
the drop. If you're persisting column order, save on this event.
Persisting layout
Set persistColumns in config to remember column widths and order across
sessions automatically. The example code uses mode: 'local-storage' with a
stable key. For multi-user or cross-device persistence, use
mode: 'server' with save() and load() functions
that hit your API. See Grid State for details.
Mouse interactions
| Interaction | Effect |
|---|---|
| Drag right edge of a header | Resize the column — (columnResized) streams with final: false, then final: true on release |
| Double-click a header's right edge | Auto-size that column to fit its content (header + loaded cells) — same as grid.autoSizeColumn(key) |
| Drag a header cell left/right | Reorder the column — neighbours animate into place, (columnReordered) fires on drop |
| Drag a flex column's edge | Converts it to fixed width at the dragged size |
Persist widths on the final: true resize event only — the drag streams
intermediate events continuously, and saving each one would hammer storage or your API.
Resize & reorder options
| Property | Type | Default | Description |
|---|---|---|---|
| config.columnResize | boolean | false | Global switch — must be combined with column.resizable: true per column. |
| config.columnReorder | boolean | false | Global switch — must be combined with column.draggable: true per column. |
| column.resizable | boolean | false | Shows the drag handle at the right edge of this header cell. Double-clicking that edge auto-fits the column. |
| grid.autoSizeColumn(key) | method | — | Auto-size one column to fit content (what a double-click calls). autoSizeColumns() does all columns. |
| column.draggable | boolean | false | Makes this header cell draggable for reordering. |
| (columnResized) | ColumnResizeEvent | — | Emits { key, newWidth, prevWidth, final } — continuous during drag, final: true on release. |
| (columnReordered) | ColumnReorderEvent | — | Emits { fromKey, toKey, insertSide } after a drop. |
| config.persistColumns | { mode: 'local-storage' | 'session-storage' | 'server', key, save?, load? } | — | Automatic persistence of column widths and order across sessions. |