elm-table

Column API

TanStack's Column API Reference covers two things at once: the column definitions you write (ColumnDef and its three shapes) and the column objects the table builds from them (Column). elm-table has one type for both, Column, an opaque value built by a constructor and a chain of with* builders. This page maps TanStack's entries onto ours; full signatures and doc comments live on the generated Table module page. For prose, see Column Definitions and Columns.

Definitions and instances

TanStack elm-table Notes
Column Column Opaque. Read it with the column* functions below.
ColumnDef Column Same type. There is no separate "definition" that the table turns into an instance.
ColumnDefBase — No shared base type. Every builder applies to any Column; builders that make no sense for a group or display column are simply unused.
AccessorColumnDef column An id and a row -> Value accessor. TanStack's separate accessor-key form has no counterpart: Elm has field access, so .age >> toFloat >> Value.Number is the key form.
DisplayColumnDef display An id, no accessor, no children.
GroupColumnDef group An id and the columns nested under it. Group columns produce header rows only.
ColumnDefTemplate — Headers and footers are String, set with withHeader and withFooter. Cells hold a Value. Turning either into Html is your code.
ColumnHelper — No helper object. column, group, and display are ordinary functions.
ColumnMeta — No meta bag on a column. Keep extra per-column data in your own model, keyed by column id.
createColumnHelper — Nothing to bind the row type to: Table.Column Person already carries it.
constructColumn column Also group and display. Depth and parent id are stamped by group, so no table instance is involved.
AccessorFn row -> Value The second argument of column. It receives the datum only; the row index is passed separately where it matters, as in withGetGroupingValue.
DeepKeys — A TypeScript type for dotted key paths. Elm reads fields with a function.
DeepValue — Same reason.
AppColumnHelper — React-only. No helper object here.

Constructors

Value What it makes
column An accessor column: an id and a way to read a cell value.
group A group column: an id and the columns nested under it.
display A display column: an id, no accessor, no children.

Column builders

Each builder sets one field and returns the column, so they chain with |>. The twelve builders that take a Config instead are on the Table API page.

Builder What it sets
withHeader The header text.
withFooter The footer text.
withSortFn Sort this column with a built-in sort function.
withCustomSort Sort this column with a comparison on whole rows.
withSortDescFirst Make the first click sort descending.
withInvertSorting Invert the sort direction of this column.
withSortUndefined Decide where Null values land when this column is sorted.
withEnableSorting Allow or forbid sorting on this column.
withEnableMultiSort Allow or forbid this column in a multi-sort.
withFilterFn Filter this column with a built-in filter function.
withCustomFilter Filter this column with a predicate on whole rows.
withEnableColumnFilter Allow or forbid a column filter on this column.
withEnableGlobalFilter Include or exclude this column from the global filter.
withAggregationFn Aggregate this column's values on group rows.
withMaxAggregationDepth How far below an aggregated row its aggregation looks for values.
withGetGroupingValue Read the value this column groups by, when it differs from the accessor.
withGetUniqueValues Read the faceting values of a row, when one cell holds several.
withEnableGrouping Allow or forbid grouping by this column.
withEnableHiding Allow or forbid hiding this column.
withEnablePinning Allow or forbid pinning this column.
withSize This column's size in pixels.
withMinSize This column's minimum size in pixels.
withMaxSize This column's maximum size in pixels.
withEnableCellSpanning Turn one column off for cell spanning even when the table allows it.
withSpanRows Merge adjacent rows with equal values into one vertically spanning cell.
withSpanRowsWhen Decide per candidate row whether it joins the vertical run.
withSpanColumns Make this column's cell span that many columns in a given row.
withEnableCellSelection Allow or forbid selecting the cells of one column.

Reading one column

These take a Column alone.

Reader What it returns
columnId The column id.
columnHeader The header text, when one was set.
columnFooter The footer text, when one was set.
columnDepth How deep the column sits in the column tree; top level is 0.
columnParentId The id of the group column this column sits under.
columnColumns The columns nested directly under a group column.
columnFlatColumns One column and every column below it, the column itself first.
columnLeafColumns The leaf columns below one column. A leaf column returns itself.
columnAccessor The accessor, when the column has one. Group and display columns have none.

Reading a column against a config or state

Reader What it returns
columnSize The column's size in pixels, clamped to its minimum and maximum.
columnMinSize The column's minimum size in pixels.
columnMaxSize The column's maximum size in pixels.
getColumnSize The rendered width: the committed size from State.columnSizing when there is one, otherwise the column's own size and then the configured default.
getColumnStart How far from the start of its region a column begins.
getColumnAfter How far from the end of its region a column ends.
columnIsVisible Is this column visible? A group column is visible when any leaf below it is.
columnCanHide Can this column be hidden?
columnIsPinned Where is this column pinned?
columnCanPin Can this column be pinned?
columnPinnedIndex The column's position inside its pinned region.
columnIndex Where this column sits in one region of the visible leaf columns, or -1.
columnIsFirst Is this the first visible column of the region?
columnIsLast Is this the last visible column of the region?
columnCanSpan Does this column take part in cell spanning?

Column lists

Reader What it returns
allColumns Every column, group columns included, each group before its children.
leafColumns Every leaf column, in definition order.
visibleLeafColumns The leaf columns a table renders: State.columnOrder applied, hidden columns dropped.
visibleFlatColumns Every column, group columns included, minus the hidden ones.
findColumn Find a column by id. Group columns are found too.
orderColumns Put a column list in table order: State.columnOrder first, then the grouped-column rules.
orderGroupedColumns Apply Config.groupedColumnMode to a leaf column list.
leftLeafColumns The leaf columns pinned to the left, hidden ones included.
centerLeafColumns The unpinned leaf columns.
rightLeafColumns The leaf columns pinned to the right, hidden ones included.
leftVisibleLeafColumns The visible leaf columns pinned to the left.
centerVisibleLeafColumns The visible unpinned leaf columns.
rightVisibleLeafColumns The visible leaf columns pinned to the right.
pinnedLeafColumns The leaf columns of one region, chosen by a ColumnRegion.
pinnedVisibleLeafColumns The visible leaf columns of one region.
pinnedColumns All three visible slices at once, in render order.

The transitions that change a column's state (pinColumn, toggleColumnVisibility, setColumnOrder, setColumnSize, and the rest) are grouped by feature on the Features API page.