Table

A powerful, highly customizable table component with pagination and advanced rendering features

Installation

Install the Table component using the nocta-ui CLI:

Terminal

npx nocta-ui add table

Then import the components you need:

Import

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableCell,
  TableFooter,
  TableCaption,
} from '@/components/ui/table';

Basic Usage

Simple Table

Name	Email	Role	Join Date
Alice Johnson	alice@example.com	Admin	2024-01-15
Bob Smith	bob@example.com	User	2024-02-01
Carol Williams	carol@example.com	Editor	2024-01-20
David Brown	david@example.com	User	2024-03-01

Advanced Features

Custom Rendering & Actions

Use the render function in column definitions for custom cell content.

User	Status	Actions
A Alice Johnson alice@example.com	Active
B Bob Smith bob@example.com	Active
C Carol Williams carol@example.com	Inactive
D David Brown david@example.com	Pending

Pagination

Add pagination support with the pagination prop.

Order ID	Customer	Product	Amount	Status
ORD-001	Alice Johnson	MacBook Pro 16"	$2499	completed
ORD-002	Bob Smith	iPhone 15 Pro	$999	pending

Showing 1 to 2 of 4 entries

Page 1 of 2

Variants

The Table component supports different visual variants.

Default

Product	Category	Price	Stock
MacBook Pro 16"	Laptops	$2499	5
iPhone 15 Pro	Phones	$999	12
Sony WH-1000XM5	Audio	$399	8

Striped

Product	Category	Price	Stock
MacBook Pro 16"	Laptops	$2499	5
iPhone 15 Pro	Phones	$999	12
Sony WH-1000XM5	Audio	$399	8

Sizes

Three size options are available: sm, md, and lg. The default size is md.

Small

Product	Price	Stock
MacBook Pro 16"	$2499	5
iPhone 15 Pro	$999	12

Medium

Product	Price	Stock
MacBook Pro 16"	$2499	5
iPhone 15 Pro	$999	12

Large

Product	Price	Stock
MacBook Pro 16"	$2499	5
iPhone 15 Pro	$999	12

States

Loading State

Name	Email	Role
Loading...

Empty State

Name	Email	Role
No users found. Add some users to get started.

Composable Components

For more control, you can use the individual table components:

Composable Table Components

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableCell header>Invoice</TableCell>
      <TableCell header>Status</TableCell>
      <TableCell header>Method</TableCell>
      <TableCell header align="right">Amount</TableCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell align="right">$250.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Total</TableCell>
      <TableCell align="right">$2,500.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Props

Table Props

Prop	Type	Default	Description
`columns`	`TableColumn[]`	—	Column definitions
`data`	`T[]`	—	Table data
`variant`	`'default' \| 'striped'`	`'default'`	Table style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Table size
`loading`	`boolean`	`false`	Show loading state
`emptyText`	`string`	`'No data available'`	Text shown when data is empty
`pagination`	`PaginationConfig`	—	Pagination configuration
`onRowClick`	`(record: T, index: number) => void`	—	Row click handler
`rowKey`	`string \| ((record: T) => string)`	`'id'`	Row key accessor
`rowClassName`	`string \| ((record: T, index: number) => string)`	—	Row class name
`className`	`string`	`''`	Additional CSS classes

TableColumn Props

Prop	Type	Default	Description
`key`	`string`	—	Data key
`title`	`string`	—	Column header
`render`	`(value: any, record: T, index: number) => ReactNode`	—	Custom render function
`width`	`string \| number`	—	Column width
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment
`className`	`string`	—	Additional CSS classes

Individual Component Props

All individual components (TableHeader, TableBody, TableRow, TableCell, TableFooter, TableCaption) accept their respective HTML attributes plus:

className - Additional CSS classes
children - Component content

TableCell additionally supports:

header - Whether this is a header cell
align - Text alignment
colSpan - Column span
rowSpan - Row span

Default

Striped

Small

Medium

Large

On this page