Column helper
createColumnHelper, ColumnHelper: generated from the source of active-grid.
Exported by @workspace/. Generated from the package source; part of the index of every export.
Functions, hooks and constants#
- Type
<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 ({accessor) 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 Grid-returning function should call create 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#
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.
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];
}