Table
Fully accessible data table powered by TanStack Table and Ariakit composites.
Installation
Install the Table component using the nocta-ui CLI:
npx nocta-ui add tableThen import the component and supporting types:
import { Table, type ColumnDef } from '@/components/ui/table';Examples
Basic Table
Display structured data with sorting and custom cell rendering.
Status
INV-2041
Lumen Studio
Paid
Feb 14, 2024
$2,450
INV-2042
Orbit Labs
Processing
Feb 19, 2024
$1,860
INV-2043
Nova Retail
Overdue
Feb 9, 2024
$1,320
INV-2044
Neon Systems
Paid
Feb 23, 2024
$3,150
INV-2045
Zenith Ventures
Processing
Feb 26, 2024
$980
Row Selection
Enable checkbox selection with controlled state for bulk actions.
Status
INV-2041
Lumen Studio
Paid
Feb 14, 2024
$2,450
INV-2042
Orbit Labs
Processing
Feb 19, 2024
$1,860
INV-2043
Nova Retail
Overdue
Feb 9, 2024
$1,320
INV-2044
Neon Systems
Paid
Feb 23, 2024
$3,150
INV-2045
Zenith Ventures
Processing
Feb 26, 2024
$980
Compact Density
Switch the visual density for dashboards or sidebars.
Availability
Olivia Stone
Product Designer
Berlin, DE
4
Available
Kai Nakamura
Frontend Engineer
Tokyo, JP
3
In a meeting
Sofia Rivera
UX Researcher
Madrid, ES
2
Available
Milan Novak
Design Ops
Prague, CZ
1
Offline
Column metadata
Set column-level meta options to align content or pin widths:
const columns: ColumnDef<Invoice>[] = [
{
accessorKey: 'amount',
header: 'Amount',
meta: {
align: 'right',
width: '140px',
headerTooltip: 'Total amount due',
},
},
];Table exposes fully typed helpers from TanStack Table so you can compose advanced features like column visibility, custom filter functions, or pagination while keeping the default Nocta UI styling and keyboard support powered by Ariakit Composite.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData, unknown>[] | - | Column definitions that describe the table structure. |
data | TData[] | - | Data records to render with the provided columns. |
density | 'comfortable' | 'compact' | 'comfortable' | Controls overall padding and typography density. |
enableSorting | boolean | true | Toggles TanStack Table's sorting features. |
enableRowSelection | boolean | false | Adds a selection column with Ariakit-powered checkboxes. |
activeRowId | string | - | Marks a row as active for focus and highlighting. |
onActiveRowChange | (rowId: string | undefined) => void | - | Called when the active row changes. |
onRowClick | (row: Row<TData>) => void | - | Fired when a table row is clicked. |
initialSorting | SortingState | [] | Default sorting state when uncontrolled. |
sortingState | SortingState | - | Controlled sorting state. |
onSortingChange | (sorting: SortingState) => void | - | Handler used with controlled sorting. |
rowSelectionState | RowSelectionState | - | Controlled selection state keyed by row id. |
onRowSelectionChange | (state: RowSelectionState) => void | - | Handler used with controlled selection. |
onSelectedRowsChange | (rows: Row<TData>[]) => void | - | Emits the currently selected rows array. |
emptyState | React.ReactNode | - | Custom UI shown when there are no rows. |
getRowId | (originalRow: TData, index: number, parent?: Row<TData>) => string | - | Supplies custom logic for deriving stable row ids. |
className | string | '' | Additional Tailwind classes merged with the component styles. |
The Table component also accepts all standard HTML div attributes.