Table
A powerful, highly customizable table component with sorting, filtering, pagination, and advanced features
Installation
Install the Table component using the nocta-ui CLI:
npx nocta-ui add table
Then import the components you need:
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 |
Sortable Table
Enable sorting by setting the sortable
prop and defining which columns are sortable.
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 |
Filterable Table
Enable column filtering by setting the filterable
prop.
Name | Email | Role |
---|---|---|
Alice Johnson | alice@example.com | Admin |
Bob Smith | bob@example.com | User |
Carol Williams | carol@example.com | Editor |
David Brown | david@example.com | User |
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 |
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:
<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 |
sortable | boolean | false | Enable sorting |
filterable | boolean | false | Enable filtering |
pagination | PaginationConfig | — | Pagination configuration |
onSort | (key: string, direction: SortDirection) => void | — | Sort callback |
onFilter | (filters: Record<string, string>) => void | — | Filter callback |
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 |
sortable | boolean | true | Enable sorting for this column |
filterable | boolean | true | Enable filtering for this column |
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 classeschildren
- Component content
TableCell
additionally supports:
header
- Whether this is a header cellalign
- Text alignmentcolSpan
- Column spanrowSpan
- Row spansortable
- Enable sorting (for header cells)sortDirection
- Current sort directiononSort
- Sort callback