Component
⊞

Table

Data table with sortable columns, striped rows, sticky headers, and ARIA table roles.

Import

import { Table } from '@stareezy-ui/components'

Basic usage

Live Preview

Name ⇅Role ⇅Email ⇅
AliceEngineeralice@example.com
BobDesignerbob@example.com
CharliePMcharlie@example.com

Click column headers to sort. Current: none

const columns = [
  { key: 'name',  header: 'Name',   width: 200 },
  { key: 'role',  header: 'Role',   width: 160 },
  { key: 'email', header: 'Email' },
]

const data = [
  { name: 'Alice',   role: 'Engineer', email: 'alice@example.com' },
  { name: 'Bob',     role: 'Designer', email: 'bob@example.com' },
  { name: 'Charlie', role: 'PM',       email: 'charlie@example.com' },
]

<Table columns={columns} data={data} />

Sortable columns

const [sortKey, setSortKey] = useState<string | null>(null)
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')

<Table
  columns={columns.map(c => ({ ...c, sortable: true }))}
  data={data}
  sortKey={sortKey}
  sortDirection={sortDir}
  onSort={(key, dir) => {
    setSortKey(key)
    setSortDir(dir)
  }}
/>

Striped rows and sticky header

<Table
  columns={columns}
  data={data}
  striped       // alternating row background
  stickyHeader  // header stays in place while scrolling
  maxHeight={400}
/>

Custom cell rendering

const columns = [
  { key: 'name', header: 'Name' },
  {
    key: 'status',
    header: 'Status',
    render: (value: string) => (
      <Badge variant={value === 'active' ? 'success' : 'neutral'}>
        {value}
      </Badge>
    ),
  },
]

With BoxLayoutProps

<Table
  columns={columns}
  data={data}
  mb={24}
  borderRadius={12}
/>

Props

PropTypeDescription
columnsreqTableColumn[]Column definitions — key, header, width, sortable, render.
datareqRecord<string, unknown>[]Row data. Each item should have keys matching column.key values.
stripedbooleanApply alternating background to even rows.
stickyHeaderbooleanFix the header row while the body scrolls (web only).
maxHeightnumber | stringMax height for the scrollable table body.
sortKeystring | nullCurrently sorted column key (controlled).
sortDirection"asc" | "desc"Current sort direction (controlled).
onSort(key: string, dir: 'asc' | 'desc') => voidCalled when a sortable column header is pressed.
emptyTextstringText shown when data is empty. Defaults to "No data".

Accessibility

ℹ
Table renders with role="table", role="rowgroup", role="row", role="columnheader", and role="cell" ARIA roles. Sortable column headers have aria-sort="ascending" / aria-sort="descending" / aria-sort="none". Sort buttons are keyboard-activatable with Enter and Space.

Themes

Table is Theme_Reactive — header background, row hover, stripe color, border color, and sort indicator color are all resolved from the Active_Theme at render time. Works across all five built-in themes: quasar, light, dark, aurora, and steins-gate.