Strongly typed data columns
Build columns whose value types follow row-property keys or accessor callbacks.
TanStack · Function
createColumnHelper
Creates a typed helper for authoring TanStack Table column definitions. It improves inference for accessor values, display and group columns, and arrays of nested definitions.
How it works
Call createColumnHelper with the table feature type and row type to obtain utilities for building strongly inferred column definitions. Its methods create accessor, display, group, and array-wrapping definitions; at runtime, the helper only produces column-definition objects.
Syntax
createColumnHelper<TFeatures, TData>(): ColumnHelper<TFeatures, TData>Parameters
| Name | Type | Description |
|---|---|---|
TFeatures | TFeatures extends TableFeatures | The table feature configuration type, constrained to TableFeatures; commonly supplied as typeof features. |
TData | TData extends RowData | The row-data type used by the table. |
Returns
ColumnHelper<TFeatures, TData>
Key points
- Use the function to make TypeScript infer column values more precisely than many plain object-literal definitions.
- Accessor columns can derive their value type from either a row-property key or a callback.
- Use display columns for UI-only content that does not represent a value from each row.
- Group columns organize nested child columns under a parent definition.
- Wrap column arrays with columns when preserving each member's individual value type matters.
- The helper is available through framework adapters as well as the table-core package.
Common mistakes
- The helper is optional: ordinary ColumnDef objects remain a valid alternative.
Example: Create typed column definitions
import { createColumnHelper, tableFeatures } from '@tanstack/react-table'
type Person = { firstName: string; age: number }
const features = tableFeatures({})
const helper = createColumnHelper<typeof features, Person>()
const columns = helper.columns([
helper.accessor('firstName', { header: 'First name' }),
helper.accessor(row => row.age, { id: 'age', header: 'Age' }),
helper.display({ id: 'actions', header: 'Actions' }),
])
console.log(columns)Creates typed accessor and display column definitions, then wraps the array to preserve individual value types.
When to use it
Display-only columns
Represent actions, selection controls, or other cells without a row data value.
Grouped and nested columns
Organize leaf columns into nested headers while retaining precise array types.
Interview questions
QWhat does createColumnHelper return and why use it?
createColumnHelper<TFeatures, TData>() returns a ColumnHelper<TFeatures, TData>. It provides utilities for authoring column definitions with stronger value inference, especially for accessor values.
Follow-up: What happens at runtime? The helper does not add table behavior; it returns column-definition objects.
QWhat utilities does the returned helper expose?
accessor builds data columns from a key or accessor function, display builds non-data columns, and group builds parent columns containing nested columns. The columns method wraps an array so individual value types are preserved.
Follow-up: When would columns be especially useful? Use it for nested groups or heterogeneous column arrays where plain array inference loses precision.
QHow should its generic parameters be selected?
The function takes TFeatures, extending TableFeatures, and TData, extending RowData. In the current API, the feature type normally comes from typeof features, while TData is the row shape.
Follow-up: How does the factory differ when using createTableHook? Its returned createAppColumnHelper is already bound to the feature type, so only TData is supplied.
Related
ColumnHelperColumnDeftableFeaturescreateTableHookaccessordisplaygroupcolumns