Columns

Column sizing

Set fixed and flexible widths, let users resize columns, scale every column with the grid, and widen columns whose values outgrow them.

Every column has a fixed width or a flex weight, and users can drag a header’s edge to change it. Two switches change how columns respond to the grid’s own width: fitColumns scales every column with it, and a column’s autoWidth widens it when its values no longer fit.

Drag a header’s right edge to resize: only that column changes. Double-click the edge to reset it. Toggle fitColumns, then resize the browser window to see the difference:

column-sizing.svelte GitHub ↗

Fixed and flexible widths

width is a fixed width in pixels.
flex is a grow weight: flex columns share the space that fixed columns leave, in proportion to their weights. flex wins over width.

By default, only flex columns take up a change in the grid’s width; fixed columns stay as they are.

Resizing

Drag the grip on a header’s right edge to resize a column. Only that column changes: every other column keeps the width it has on screen, flex columns included, and the columns after it move along. When the columns grow wider than the grid, it scrolls sideways; when they shrink, the space is left at the right.

Double-click a grip to give that column back its own width. A flex column then fills the space the others leave again.
Reset widths, in the column menu (columnMenu), gives every column back its own width.
Autosize, from the column menu or api.autosizeColumns, changes columns the same way: the others keep their widths.
minWidth and maxWidth bound the drag.
Resizing is on by default. Turn it off for the grid with resizable={false}, or for one column with resizable: false, for example a narrow action column.
onColumnResize(key, width) reports each resize; persistKey remembers widths across reloads.

<Grid {rows} {columns} persistKey="watchlist" onColumnResize={(key, width) => save(key, width)} height={480} />

Scaling every column: fitColumns

With fitColumns, every column scales with the grid. Each gets a share of the width in proportion to its width, bounded by its minWidth and maxWidth. A column with no minWidth shrinks to 64 px at most (or keeps its own width, if that is smaller). The grid scrolls sideways only when those floors no longer fit.

<Grid {rows} {columns} fitColumns height={480} />

fitColumns fits until the user sets a width. After a drag or an autosize, the columns keep the widths they were given, as they do without it, until Reset widths brings the fit back.

Growing with the values: autoWidth

Values that grow, such as a price gaining a digit or a running volume total, can outgrow their column and end in ”…“. Set autoWidth: true on such a column and it widens to fit the values on screen.

{ type: 'volume', key: 'totalVol', header: 'Total vol', width: 76, autoWidth: true }

It is checked at most every 500 ms, and values are measured on a canvas, so it never forces a layout on a live board.
It only grows, so values flickering wider and narrower don’t make the column jump. maxWidth caps it.
A width the user dragged or autosized takes over from it.

Autosizing from code

api.autosizeColumns(keys?) fits columns to their content, as the column menu’s Autosize item does; with no keys it fits every resizable column. See Grid API.

Reference

Column options from the types

width number Default 96

Width in px. A flex column starts from it where columns have fixed widths (pinned columns, virtualizeColumns), and fitColumns scales columns in proportion to it.

flex number Default undefined

flex-grow weight: the column stretches to fill the space the fixed-width columns leave, shared by weight. When the columns no longer fit, the grid scrolls sideways, counting a flex column as its width, else its minWidth, else 64 px. Unset, the column keeps its width.

minWidth number Default 48

Smallest width (px) a drag-resize or autosize can give this column; never less than 48. Under fitColumns, also the narrowest the column gets before the grid scrolls sideways (64 px without one, or the column's width if smaller).

maxWidth number Default Infinity

Largest width (px) a drag-resize, an autosize, autoWidth or fitColumns can give this column.

resizable boolean Default true

Set false to disable drag-to-resize on this column.

autoWidth boolean Default false

Widen the column when a value on screen no longer fits (a price gaining a digit, a running total), checked at most every 500 ms. It only grows, so values flickering wider and narrower don't make it jump; maxWidth caps it, and a width the user dragged or autosized takes over.

Grid props from the types

resizable boolean Default true

Allow drag-to-resize column widths. A drag (or an autosize) changes that column only: the others keep the width they have on screen, flex columns included, so the ones after it move along. Double-click a grip to give that column back its own width; Reset widths in the column menu gives every column back its own. Opt out per column with resizable: false.

fitColumns boolean Default false

Scale every column with the grid, in proportion to its width, instead of only flex columns taking up the change: the grid stays responsive without hand-tuned flex weights. A column never gets narrower than its minWidth (64 px, or its own width if smaller, without one) nor wider than its maxWidth; when the floors no longer fit, the grid scrolls sideways. It fits until the user sets a width (a drag, an autosize): from then on the columns keep the widths they were given, until Reset widths in the column menu.

onColumnResize (key: string, width: number) => void

Called with a column key + new width after a drag-resize. Only the dragged column is reported; getState() has every width.

Example

<Grid {rows} {columns} height={480} onColumnResize={(key, width) => save(`width:${key}`, width)} />

persistKey string Default undefined

Remember the user's layout (column order, widths, hidden and pinned columns, pinned rows) in localStorage under this key.

Grid API from the types

autosizeColumns (keys?: string[]): void

Fit columns to their content, as the column menu's Autosize does. All resizable columns when keys is omitted. The other columns keep their widths (flex ones are held where they are).

Example

api.autosizeColumns(['sym', 'name']);