Table
Data table for displaying structured information in rows and columns. Supports divider styles, mobile layout, and RTL.
<Table title="Active Datasets" description="48 datasets · 3 selected" headerActions={<><Button variant="neutral" size="sm">Filter</Button><Button variant="primary" size="sm">New dataset</Button></>} columns={columns}Installation
npx sdaia-ui@latest add table
Usage
import { Table } from "@/components/ui/table"<Table />Examples
Default
Basic table with no dividers.
<Table title="Team members" description="..." headerActions={<><Button variant="secondary-outline">Filter</Button><Button variant="primary">Add member</Button></>} showMoreIcon columns={columns} rows={rows} sortKey={sortKey} sortDirection={sortDirection} onSort={setSort} showPagination page={page} totalPages={5} onPageChange={setPage} />Horizontal Dividers
Table with horizontal dividers between rows.
<Table title="Active projects" columns={columns} rows={rows} divider="horizontal" />Vertical Dividers
Table with vertical dividers between columns.
<Table title="API health" columns={columns} rows={rows} divider="vertical" />Full Dividers
Table with both horizontal and vertical dividers.
<Table columns={columns} rows={rows} divider="both" />Mobile
Table layout optimised for mobile screens.
<Table mobile title="Team" description="..." columns={columns} rows={rows} divider="horizontal" />API Reference
TableProps
Props for the Table component.
Prop | Type | Default | Required |
|---|---|---|---|
title | ReactNode | - | optional |
description | ReactNode | - | optional |
headerActions | ReactNode | - | optional |
showMoreIcon | boolean | - | optional |
onMoreClick | () => void | - | optional |
hideHeader | boolean | false | optional |
columns | TableColumn[] | - | required |
rows | TableRowData[] | - | required |
divider | 'none' | 'horizontal' | 'vertical' | 'both' | 'none' | optional |
sortKey | string | - | optional |
sortDirection | 'asc' | 'desc' | - | optional |
onSort | (key: string, direction: TableSortDirection) => void | - | optional |
showPagination | boolean | false | optional |
page | number | 1 | optional |
totalPages | number | 1 | optional |
onPageChange | (page: number) => void | - | optional |
mobile | boolean | false | optional |