Table

Desktop-grade data table for structured data display, with sorting, stripes, and custom cell rendering.

Basic Usage

Define columns with columns and pass data with data.

import { Table } from '@airo-ui/react'

const columns = [
  { label: 'Name', key: 'name', sortable: true },
  { label: 'Age', key: 'age', align: 'right' as const },
  { label: 'City', key: 'city' },
]

const data = [
  { id: 1, name: 'Alice', age: 28, city: 'New York' },
  { id: 2, name: 'Bob', age: 32, city: 'London' },
  { id: 3, name: 'Charlie', age: 24, city: 'Tokyo' },
  { id: 4, name: 'Diana', age: 35, city: 'Berlin' },
]

function Demo() {
  return <Table columns={columns} data={data} />
}

Striped

Set stripe for alternating row backgrounds.

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

Compact

Set size="sm" for compact mode with smaller row height.

<Table columns={columns} data={data} size="sm" />

Bordered

Set bordered to show column borders.

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

Custom Cells

Use the render function on column definitions for custom cell rendering.

const columns = [
  {
    label: 'Name',
    key: 'name',
    render: (value: unknown, row: any) => <strong>{value as string}</strong>,
  },
  {
    label: 'Age',
    key: 'age',
    align: 'right' as const,
    render: (value: unknown) => (
      <span style={{ color: 'var(--color-accent)' }}>{value as number} yo</span>
    ),
  },
  { label: 'City', key: 'city' },
]

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

Loading

Set loading to show a loading overlay.

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

Sorting

Set sortable: true on columns and listen to onSortChange.

<Table
  columns={columns}
  data={data}
  onSortChange={({ key, order }) => console.log(key, order)}
/>

API

Props

Name	Type	Default	Description
columns	TableColumn[]	Required	Column definitions
data	T[]	Required	Data source
stripe	boolean	false	Striped rows
bordered	boolean	false	Column borders
size	'sm' | 'md'	'md'	Size
loading	boolean	false	Loading state
rowKey	string	'id'	Row unique key field
onSortChange	(payload: { key: string; order: 'asc' | 'desc' | '' }) => void	--	Sort change handler

TableColumn

Property	Type	Description
label	string	Column header
key	string	Field name
sortable	boolean	Enable sorting
width	string	Column width
align	'left' | 'center' | 'right'	Text alignment
render	(value: unknown, row: T, index: number) => ReactNode	Custom cell render function

Interaction

• Click header to sort, three-state cycle (asc to desc to none)
• Sort indicator icon changes color with state
• Row hover highlight
• Loading overlay on loading state
• Empty data friendly message
• Compact mode for dense desktop scenarios