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.