NOCTA UI

Table

A powerful, highly customizable table component with sorting, filtering, pagination, and advanced 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 Johnsonalice@example.comAdmin2024-01-15
Bob Smithbob@example.comUser2024-02-01
Carol Williamscarol@example.comEditor2024-01-20
David Browndavid@example.comUser2024-03-01

Sortable Table

Enable sorting by setting the sortable prop and defining which columns are sortable.

Name
Email
Role
Join Date
Alice Johnsonalice@example.comAdmin2024-01-15
Bob Smithbob@example.comUser2024-02-01
Carol Williamscarol@example.comEditor2024-01-20
David Browndavid@example.comUser2024-03-01

Filterable Table

Enable column filtering by setting the filterable prop.

Name
Email
Role
Alice Johnsonalice@example.comAdmin
Bob Smithbob@example.comUser
Carol Williamscarol@example.comEditor
David Browndavid@example.comUser

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-001Alice JohnsonMacBook Pro 16"$2499completed
ORD-002Bob SmithiPhone 15 Pro$999pending
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$24995
iPhone 15 ProPhones$99912
Sony WH-1000XM5Audio$3998

Striped

Product
Category
Price
Stock
MacBook Pro 16"Laptops$24995
iPhone 15 ProPhones$99912
Sony WH-1000XM5Audio$3998

Sizes

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

Small

Product
Price
Stock
MacBook Pro 16"$24995
iPhone 15 Pro$99912

Medium

Product
Price
Stock
MacBook Pro 16"$24995
iPhone 15 Pro$99912

Large

Product
Price
Stock
MacBook Pro 16"$24995
iPhone 15 Pro$99912

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

PropTypeDefaultDescription
columnsTableColumn[]Column definitions
dataT[]Table data
variant'default' | 'striped''default'Table style variant
size'sm' | 'md' | 'lg''md'Table size
loadingbooleanfalseShow loading state
emptyTextstring'No data available'Text shown when data is empty
sortablebooleanfalseEnable sorting
filterablebooleanfalseEnable filtering
paginationPaginationConfigPagination configuration
onSort(key: string, direction: SortDirection) => voidSort callback
onFilter(filters: Record<string, string>) => voidFilter callback
onRowClick(record: T, index: number) => voidRow click handler
rowKeystring | ((record: T) => string)'id'Row key accessor
rowClassNamestring | ((record: T, index: number) => string)Row class name
classNamestring''Additional CSS classes

TableColumn Props

PropTypeDefaultDescription
keystringData key
titlestringColumn header
sortablebooleantrueEnable sorting for this column
filterablebooleantrueEnable filtering for this column
render(value: any, record: T, index: number) => ReactNodeCustom render function
widthstring | numberColumn width
align'left' | 'center' | 'right''left'Text alignment
classNamestringAdditional 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
  • sortable - Enable sorting (for header cells)
  • sortDirection - Current sort direction
  • onSort - Sort callback