Data

Table

Sortable data table with hybrid controlled/uncontrolled sort state. Sorting cycles asc → desc → unsorted on repeated column clicks. Client-side sort uses localeCompare with numeric: true. Selected rows show a left accent rule. Provide onRowClick to make rows interactive.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Data table with sortable columns and row selection.

import { Table, type ColumnDef } from 'achery-ui'

const columns: ColumnDef<Row>[] = [
  { key: 'name',  label: 'Name',  sortable: true },
  { key: 'qty',   label: 'Qty',   mono: true, width: '80px' },
  { key: 'badge', label: 'Status', render: row => <Badge>{row.status}</Badge> },
]

<Table
  columns={columns}
  data={rows}
  rowKey={r => r.id}
  selectedKeys={selected}          // string[] — controlled selection
  onRowClick={(key, row) => {}}    // row click handler
  defaultSortKey="name"            // uncontrolled initial sort
  defaultSortDir="asc"             // 'asc' | 'desc' | null — uncontrolled initial direction
  sortKey={sortKey}                // controlled sort column
  sortDir={sortDir}                // 'asc' | 'desc' | null
  onSortChange={(key, dir) => {}}
  toolbar={<SearchInput … />}      // ReactNode — rendered above table with bottom border
  emptyState={<span>No rows.</span>} // ReactNode — shown when data is empty
  pageIndex={page}                 // number (0-based) — enables pagination row
  pageSize={25}                    // number — rows per page
  totalRows={total}                // number — total across all pages
  onPageChange={setPage}           // (page: number) => void
/>