Column options
Per-column configuration lives on the standard TanStack columnDef.meta object, which the table augments with the fields below (fully typed wherever meta is read).
const columns: ColumnDef<Person>[] = [
{
accessorKey: "role",
header: "Role",
meta: { variant: "select", options: ROLE_OPTIONS, editVariant: "select" },
},
]
| meta key | Type | Description |
|---|---|---|
variant? | FilterVariant | Filter UI variant rendered in the filter row. Defaults to "text". |
options? | DataTableFilterOption[] | Options for `select` / `multi-select` filter variants. If omitted for a select-style variant, options are derived from faceted unique values. |
filterMode? | FilterMode | Default filter mode for this column (overrides the per-variant default). |
enableColumnFilterModes? | boolean | Per-column override for the filter-mode menu (defaults to the table). |
renderColumnFilter? | (props: { column: Column<TData, TValue> table: DataTableInstance<TData> }) => React.ReactNode | Custom filter UI for this column (escape hatch). Replaces the variant. |
columnFilterModeOptions? | FilterMode[] | Restrict (and order) the filter-mode menu for this column to this subset of modes. Include the column's default mode. |
enableEditing? | boolean | Allow editing this column (defaults to true when table editing is on). |
editVariant? | EditVariant | Inline editor variant. Defaults to "text". |
editSelectOptions? | DataTableFilterOption[] | Options for the "select" edit variant. |
renderEditCell? | (props: CellRenderProps<TData, TValue>) => React.ReactNode | Custom inline editor for this column (escape hatch). Replaces the built-in editor while the cell/row is editing; drive the value via `table.cnTable` (`rowDraft`/`setRowDraftValue` or `onEditCellSave`). |
renderGroupedCell? | ( props: CellRenderProps<TData, TValue> ) => React.ReactNode | Custom render for this column's group header cell (when grouped). |
renderAggregatedCell? | ( props: CellRenderProps<TData, TValue> ) => React.ReactNode | Custom render for this column's aggregated cell (when grouped). Overrides the TanStack `columnDef.aggregatedCell`. |
renderPlaceholderCell? | ( props: CellRenderProps<TData, TValue> ) => React.ReactNode | Custom render for this column's placeholder cells in grouped rows (cells with no value because another column owns the group). Default: empty. |
validate? | (value: unknown) => string | undefined | Validate an edited value; return an error message or undefined if valid. |
enableClickToCopy? | boolean | Show a click-to-copy affordance on this column's cells. |
align? | "left" | "center" | "right" | Horizontal alignment applied to the header label and body cells. |
disableHighlight? | boolean | Opt this column out of match highlighting. |
disableColumnActions? | boolean | Hide the column-actions menu for this column. |
label? | string | Human-readable label for menus when the header is not a plain string. |
Standard column options still apply
accessorKey, header, cell, footer, size, enableSorting, enableColumnFilter, aggregationFn, aggregatedCell, sortDescFirst, and the rest are standard TanStack column defs.