Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
Neon
WorkOS
Clerk
Convex
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
Neon
WorkOS
Clerk
Convex
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Legacy API Reference
Enterprise
Column API Reference

ColumnHelper

Type Alias: ColumnHelper<TFeatures, TData>

ts
type ColumnHelper<TFeatures, TData> = object;

Defined in: helpers/columnHelper.ts:13

Type Parameters

TFeatures

TFeatures extends TableFeatures

TData

TData extends RowData

Properties

accessor()

ts
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

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

columns()

ts
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<TFeatures, TData, any>>

Parameters

columns

[...TColumns]

Returns

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

Example

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

display()

ts
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

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

group()

ts
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

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