📄 tanstack/table/latest/docs/api/core/column-def
File: column-def.md | Updated: 11/15/2025
Source: https://tanstack.com/table/latest/docs/api/core/column-def
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
React
Version
Latest
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
On this page
ColumnDef APIs
Copy Markdown
Column definitions are plain objects with the following options:
tsx
id: string
id: string
The unique identifier for the column.
🧠 A column ID is optional when:
- An accessor column is created with an object key accessor
- The column header is defined as a string
tsx
accessorKey?: string & typeof TData
accessorKey?: string & typeof TData
The key of the row object to use when extracting the value for the column.
tsx
accessorFn?: (originalRow: TData, index: number) => any
accessorFn?: (originalRow: TData, index: number) => any
The accessor function to use when extracting the value for the column from each row.
tsx
columns?: ColumnDef<TData>[]
columns?: ColumnDef<TData>[]
The child column defs to include in a group column.
tsx
header?:
| string
| ((props: {
table: Table<TData>
header: Header<TData>
column: Column<TData>
}) => unknown)
header?:
| string
| ((props: {
table: Table<TData>
header: Header<TData>
column: Column<TData>
}) => unknown)
The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).
tsx
footer?:
| string
| ((props: {
table: Table<TData>
header: Header<TData>
column: Column<TData>
}) => unknown)
footer?:
| string
| ((props: {
table: Table<TData>
header: Header<TData>
column: Column<TData>
}) => unknown)
The footer to display for the column. If a function is passed, it will be passed a props object for the footer and should return the rendered footer value (the exact type depends on the adapter being used).
tsx
cell?:
| string
| ((props: {
table: Table<TData>
row: Row<TData>
column: Column<TData>
cell: Cell<TData>
getValue: () => any
renderValue: () => any
}) => unknown)
cell?:
| string
| ((props: {
table: Table<TData>
row: Row<TData>
column: Column<TData>
cell: Cell<TData>
getValue: () => any
renderValue: () => any
}) => unknown)
The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).
tsx
meta?: ColumnMeta // This interface is extensible via declaration merging. See below!
meta?: ColumnMeta // This interface is extensible via declaration merging. See below!
The meta data to be associated with the column. We can access it anywhere when the column is available via column.columnDef.meta. This type is global to all tables and can be extended like so:
tsx
import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.
declare module '@tanstack/react-table' {
interface ColumnMeta<TData extends RowData, TValue> {
foo: string
}
}
import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.
declare module '@tanstack/react-table' {
interface ColumnMeta<TData extends RowData, TValue> {
foo: string
}
}
