Capítulo 49 de 54

Chapter 49: Column & Cell Types

Core Idea

This chapter maps the type-reference names behind the Column Definitions/Columns/Cells/Headers guides — mostly the ColumnDef variant family, accessor-related helper types, and the construction/context types for Cell/Header objects — for quick lookup when a type error names one of them.

Key Concepts

  • Column<TFeatures, TData, TValue>: the instance type returned by table.getColumn/getAllColumns/etc. (see Columns Guide). References its columnDef, parent/child columns.
  • ColumnDef<TFeatures, TData, TValue>: the union type accepted by columns/columnHelper.columns([...]) — resolves to one of the variants below depending on shape.
    • ColumnDefBase: the shared base (id, meta, feature-contributed options like sortFn/filterFn).
    • AccessorColumnDef: has accessorKey or accessorFn — the data-bearing variant (sortable/filterable/groupable).
    • DisplayColumnDef: no accessor — display-only (row actions, checkboxes).
    • GroupColumnDef: has a nested columns array — a header/footer grouping column with no data model of its own.
    • ColumnDefTemplate<TProps>: the generic shape of header/cell/footer/aggregatedCell — a string, a static node, or (props: TProps) => ReactNode, which is exactly what flexRender/FlexRender know how to resolve.
  • ColumnMeta<TFeatures, TData, TValue>: the typed meta slot on a column def (see Table and Column Meta Guide).
  • createColumnHelper<TFeatures, TData>() returns the .accessor/.display/.group/.columns builder (Helpers Guide / Column Definitions Guide). AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents> is the createTableHook-bound variant returned by createAppColumnHelper — same shape, pre-bound to an app's feature set and registered components.
  • AccessorFn<TData, TValue>: the function-accessor signature, (row: TData, index: number) => TValue.
  • DeepKeys<T, TDepth> / DeepValue<T, TProp>: the type-level machinery behind dot-path accessorKey string autocomplete/inference for nested object data (e.g. 'name.first').
  • constructColumn(...): the internal-facing column constructor (parallels constructTable/constructRow/etc.) — rarely called directly, exists for the same "compose your own low-level integration" escape hatch as constructTable.
  • Cell<TFeatures, TData, TValue>: the instance from row.getAllCells()/getVisibleCells() (Cells Guide). CellContext<TFeatures, TData, TValue>: what a cell renderer function receives as its argument (via cell.getContext()) — includes getValue, row, column, table. CellData: the base type constraint for a cell's resolved value type. AppCellContext<TFeatures, TData, TValue, TCellComponents>: the createTableHook-extended context available inside a registered cell component (adds the registered component references, e.g. cell.TextCell). constructCell(...): internal cell constructor.
  • Header<TFeatures, TData, TValue>: the instance from headerGroup.headers (Headers Guide). HeaderContext<TFeatures, TData, TValue>: what a header/footer renderer function receives. AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>: the createTableHook-extended equivalent for registered header components. buildHeaderGroups(...): the internal function assembling HeaderGroup[] from column structure — what powers table.getHeaderGroups() and friends. constructHeader(...): internal header constructor.

Key Takeaways

  1. ColumnDef is a union — a type error citing one specific variant (AccessorColumnDef, DisplayColumnDef, GroupColumnDef) usually means the column def as written doesn't unambiguously match any variant (commonly: an accessor function with neither an id nor a string header).
  2. CellContext/HeaderContext are literally the argument shape a cell/header renderer function receives — reach for these types when writing standalone renderer components instead of inline arrow functions.
  3. The construct* family (constructColumn/constructCell/constructHeader, alongside constructTable/constructRow elsewhere) are the low-level object constructors every framework adapter calls internally — a hook only for custom low-level integrations, not typical app code.

Connects To

  • Column Definitions Guide / Columns Guide / Cells Guide / Headers Guide: the practical usage this chapter indexes.
  • Composable Tables (createTableHook) Guide: the App* context/helper variants.