Type Alias: ColumnHelper\#

type ColumnHelper<TFeatures, TData> = object;

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 | AccessorFn\<`TData`\> | DeepKeys\<`TData`\>

TValue#

TValue extends TAccessor extends AccessorFn\<`TData`, infer TReturn\> ? TReturn : TAccessor extends DeepKeys\<`TData`\> ? DeepValue\<`TData`, `TAccessor`\> : never

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 ReadonlyArray\<[`ColumnDef`](ColumnDef.md)\<`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' }),
  ]),
})