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' }),
  ]),
})