@jsvision/ui / apportionColumns

Function: apportionColumns()

apportionColumns<T>(columns, autoWidths, viewportWidth, dividers?): ColumnGeometry

Defined in: ui/src/table/columns.ts:140

Apportion per-column integer widths and absolute start columns for a viewport — the O(cols) per-draw pass.

Reserves one divider cell per column (apportions over viewportWidth − numCols) so fr columns fill the remaining viewport exactly, then applies the min/max clamps to fr results: a clamped fr column is pinned to a fixed width and the track re-solved, converging in at most numCols passes. Fixed and auto widths pass through unchanged, so an all-fixed track that overflows keeps its widths (enabling horizontal scroll) rather than shrinking.

Pass dividers: false to reserve no inter-column divider cell (a compact / dense layout): the track apportions over the full viewportWidth, starts pack tightly, and totalWidth excludes the dividers — so a caller that also skips painting the │ stays aligned and its horizontal-scroll clamp is correct. The default (true) is byte-identical to reserving one divider per column.

Type Parameters

T

T

Parameters

columns

Column<T>[]

The column descriptors.

autoWidths

(number | null)[]

The measureAutoWidths result (memoize it upstream).

viewportWidth

number

The data-area width in cells.

dividers?

boolean = true

Reserve one divider cell per column (default true); false packs columns tight.

Returns

ColumnGeometry

The resolved ColumnGeometry; empty arrays + totalWidth 0 for zero columns.

Example

import { apportionColumns } from '@jsvision/ui';
import type { Column } from '@jsvision/ui';

interface Row {
  a: string;
  b: string;
}

const cols: Column<Row>[] = [
  { title: 'A', accessor: (r) => r.a, width: '1fr' as const },
  { title: 'B', accessor: (r) => r.b, width: 6 },
];
apportionColumns(cols, [null, null], 20); // { widths: [12, 6], starts: [0, 13], totalWidth: 20 }
apportionColumns(cols, [null, null], 20, false); // compact: { widths: [14, 6], starts: [0, 14], totalWidth: 20 }