---
id: "packages/active-grid/api/column-helper"
title: "Column helper"
description: "createColumnHelper, ColumnHelper: generated from the source of active-grid."
url: "/packages/active-grid/api/column-helper"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:column-helper"
---

# Column helper

Exported by `@workspace/active-grid`. Generated from the package source; part of [the index of every export](/packages/active-grid/api).

## Functions, hooks and constants

**createColumnHelper**: `<TData = any>() => ColumnHelper<TData>`

Builder for type-safe column definitions with per-column value inference.

Replaces the array-literal pattern that needs `(info: any)` cell callbacks
(`{accessorKey: 'x', cell: (info: any) => info.getValue() as string}`) with
a builder that contextually types each cell:

```tsx
const ch = createColumnHelper<User>();

const columns = [
ch.accessor('name', {
header: 'Name',
cell: (info) => info.getValue(), // info typed; getValue() returns User['name']
type: 'text', // column-type preset
}),
ch.accessor('status', {
cell: (info) => <Badge>{info.getValue()}</Badge>,
meta: {filterOptions: [...]},
}),
ch.accessor((row) => row.profile?.name, {
id: 'profileName',
header: 'Profile',
cell: (info) => info.getValue() ?? '',
}),
ch.display({id: 'actions', header: '', cell: () => <ActionsMenu />}),
];
```

**When to use**: every new `GridColumnDef<TData>[]`-returning function should
call `createColumnHelper<TData>()` once and use `accessor()`, `display()` or
`group()` per column. It is the only construction path that infers a
column's value type, so it is also the only one where a renderer and a value
callback need no annotation.

## Types

**ColumnHelper**

```ts
interface ColumnHelper<TData = DefaultRowData> {
  accessor<TKey extends DeepKeys<TData>>(
    accessor: TKey,
    column: GridIdentifiedColumnInput<TData, GridValueAt<TData, TKey>>,
  ): GridAccessorKeyColumnDef<TData, GridValueAt<TData, TKey>>;
  accessor<TValue>(
    accessor: AccessorFn<TData, TValue>,
    column: GridDisplayColumnDef<TData, TValue>,
  ): GridAccessorFnColumnDef<TData, TValue>;
  display(
    column: GridDisplayColumnDef<TData>,
  ): GridDisplayColumnDef<TData, unknown>;
  group(column: GridGroupColumnDef<TData>): GridGroupColumnDef<TData, unknown>;
  columns<TColumns extends ReadonlyArray<GridColumnDef<TData>>>(
    columns: [...TColumns],
  ): Array<GridColumnDef<TData>> & [...TColumns];
}
```

Builder for column definitions, with per-column value-type inference.

The declarations are stated over the public column shapes and over the
consumer's own record type, which is what makes the two construction paths
one contract: an object literal and `accessor()` accept the same keys,
produce the same kinds of definition, and gate the same metadata key space.
The two `accessor` overloads each carry their own inference: the key form
reads the value type off the key, the function form off the function.