Defining Columns and Rendering Rows

Every column in TanStack Table is described by a ColumnDef object. The two most important fields are accessorKey (the property name on your data object) and header (the column label string or render function).

The accessorKey approach is ideal for flat data; complex or computed values need accessorFn.

When your data has a direct property like name or email, use accessorKey: 'name'. When you need to compute a value (e.g., combining firstName and lastName), use accessorFn: row => row.firstName + ' ' + row.lastName.

Both are fully typed when you provide the row data generic to ColumnDef.

The cell field in a ColumnDef accepts a function that receives the cell context and returns JSX. This is how you render badges, buttons, images, or any custom UI inside a cell.

For plain text values, cell.renderValue() is sufficient. For anything richer, destructure info from cell.getContext().

Define your columns outside the component to avoid recreating them on every render. Pass the array to useReactTable alongside your data and getCoreRowModel.

TypeScript will infer column types when you annotate ColumnDef with your data type, giving you autocomplete on accessorKey values.

getCoreRowModel is a factory function imported from @tanstack/react-table. You pass its return value to useReactTable to tell the instance how to build the basic list of rows from your data array.

Additional row models (sorted, filtered, paginated) are layered on top by passing extra model factories.

Call table.getHeaderGroups() and map over the result to render your thead. Each header group has a headers array; each header has a column definition and an id.

Use flexRender(header.column.columnDef.header, header.getContext()) to render the header content, whether it is a string or a JSX-returning function.

Call table.getRowModel().rows and map each row to a tr element. Inside, call row.getVisibleCells() and map each cell to a td.

Use flexRender(cell.column.columnDef.cell, cell.getContext()) to render cell content, respecting any custom cell renderer defined in the column.

flexRender is a helper that accepts either a React component, a function returning JSX, or a plain value, and renders it consistently. It allows column definitions to use either simple strings or full render functions for headers and cells.

This unified API means you do not need to check the type of the definition before rendering.

cell.renderValue() returns the raw accessor value formatted as a string. For more control, cell.getContext() provides the full rendering context including the row, column, table instance, and the raw value.

Custom cell renderers use the context to access related row data beyond the single accessor value.

Each ColumnDef accepts a meta field where you can attach arbitrary metadata like isSticky: true or alignment: 'right'. Access it in your renderer via column.columnDef.meta.

For pinning columns to the left or right, TanStack Table provides column pinning state and helper methods on the column object.

Define ColumnDef array with accessorKey, header, and optional cell. Call useReactTable with data, columns, and getCoreRowModel. Map getHeaderGroups for thead and getRowModel().rows for tbody, using flexRender to render each header and cell.

This minimal setup gives you a fully functional, fully custom-styled table.

When should you use accessorFn instead of accessorKey in a TanStack Table column definition?

Define columns using ColumnDef with accessorKey for direct fields or accessorFn for computed values. Pass columns and getCoreRowModel to useReactTable, then render with getHeaderGroups for headers and getRowModel().rows for body rows.

The flexRender utility handles both string and function-based header and cell definitions uniformly.