ColumnHelper

Defined in: helpers/columnHelper.ts:13

Type Parameters#

TFeatures#

TFeatures extends TableFeatures

TData#

TData extends RowData

Properties#

accessor#

accessor: <TAccessor, TValue>(accessor, column) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;

Defined in: helpers/columnHelper.ts:25

Creates a data column definition with an accessor key or function to extract the cell value.

Type Parameters#

TAccessor#

TAccessor extends string | AccessorFn<TData>

TValue#

TValue extends unknown

Parameters#

accessor#

TAccessor

column#

TAccessor extends AccessorFn<TData> ? DisplayColumnDef<TFeatures, TData, TValue> : IdentifiedColumnDef<TFeatures, TData, TValue>

Returns#

TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>

Example#

helper.accessor('firstName', { cell: (info) => info.getValue() })
helper.accessor((row) => row.lastName, { id: 'lastName' })

columns#

columns: <TColumns>(columns) => ColumnDef<TFeatures, TData, any>[] & [...TColumns[]];

Defined in: helpers/columnHelper.ts:48

Wraps an array of column definitions to preserve each column's individual TValue type. Uses variadic tuple types to infer element types before checking constraints, preventing type widening.

Type Parameters#

TColumns#

TColumns extends readonly ColumnDef<TFeatures, TData, any>[]

Parameters#

columns#

[...TColumns[]]

Returns#

ColumnDef<TFeatures, TData, any>[] & [...TColumns[]]

Example#

helper.columns([helper.accessor('firstName', {}), helper.accessor('age', {})])

display#

display: (column) => DisplayColumnDef<TFeatures, TData, unknown>;

Defined in: helpers/columnHelper.ts:58

Creates a display column definition for non-data columns like actions or row selection.

Parameters#

column#

DisplayColumnDef<TFeatures, TData>

Returns#

DisplayColumnDef<TFeatures, TData, unknown>

Example#

helper.display({ id: 'actions', header: 'Actions', cell: () => <button>Edit</button> })

group#

group: (column) => GroupColumnDef<TFeatures, TData, unknown>;

Defined in: helpers/columnHelper.ts:75

Creates a group column definition that contains nested child columns.

Parameters#

column#

GroupColumnDef<TFeatures, TData, unknown>

Returns#

GroupColumnDef<TFeatures, TData, unknown>

Example#

helper.group({
  id: 'name',
  header: 'Name',
  columns: helper.columns([
    helper.accessor('firstName', {}),
    helper.accessor('lastName', { id: 'lastName' }),
  ]),
})