Skip to content

useTableColumnResize

@astryxdesign/core v0.7.1 · useTableColumnResize

Parameters ​

useTableColumnResize() takes one config object. Wrap it in a getter or a ref so the table reads the current widths: useTableColumnResize(() => ({ ... })).

NameTypeDefaultDescription
columnWidthsRecord<string, number>{}Controlled pixel-width overrides keyed by column key. When a key is present it overrides the column's declared width.
onColumnResizeEnd(updates: Record<string, number>) => void—Called when a resize completes (pointer release or a key press). Receives a map of every column key whose width changed; merge it into your columnWidths state. The last column is left out because its width follows the space that is left.
minWidthnumber—Global minimum column width in pixels during a resize. Overrides the per-column floors.
maxWidthnumberInfinityGlobal maximum column width in pixels during a resize.
columnsreadonly TableColumn<T>[]—Column definitions, used to derive per-column minimums and to tell proportional columns from pixel ones when picking the neighbour and the last column. Table passes its own columns, so you only need this when you call the helper functions yourself.

Returns ​

useTableColumnResize() returns one TablePlugin&lt;T&gt;. Pass it to Table in plugins. The plugin fills three fields of the plugin contract:

NameTypeDescription
widthFor(column: TableColumn<T>) => number | undefinedReturns the committed override for one column, or undefined when the column has none.
resizeFor(column: TableColumn<T>, columns: readonly TableColumn<T>[]) => TableColumnResizeContribution | nullDescribes how one column takes part in a resize: its current width, its minimum and maximum, the neighbour that gives up width, and whether the column gets a handle.
onColumnResizeEnd(updates: Record<string, number>) => voidCalled by Table with every changed column. It rounds each width to whole pixels and passes the map on to your onColumnResizeEnd.

Helpers ​

The same module exports the pieces the plugin is built from, so you can reuse the arithmetic in your own UI.

NameTypeDescription
columnResizeMinWidth(width: ColumnWidth | undefined, globalMinWidth?: number) => numberThe narrowest a column may get: the global minimum when set, otherwise the column's own floor.
isProportionalColumnWidth(width: ColumnWidth | undefined) => booleanTrue for a proportional column and for a column with no declared width.
resizeColumnWidths(plan: ColumnResizePlan, delta: number) => number[]Applies a pointer movement in pixels to a set of column snapshots and returns every resulting width.
columnResizeStep(isShiftKey: boolean) => numberHow far one arrow key press moves a handle: 10px, or 50px with Shift.
columnResizeDirectionSign(direction: string) => 1 | -1The sign a horizontal movement gets in the current writing direction. RTL returns -1.