NOCTA UI

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/cli add table

Then import the component and supporting types:

import { Table, type ColumnDef } from '@/components/ui/table';

Examples

Default Table

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

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

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

API Reference

Prop

Type

Pie Chart

Compare parts-to-whole relationships with classic and donut layouts.

Alert

A flexible alert component for displaying important messages with multiple variants and dark mode support

On this page

Installation
Examples
Default Table
Row Selection
Compact Density
API Reference