Table

Data table with custom cell renderers, loading skeleton, empty state, and optional row click.

Default

Event	Severity	Region
USD/EUR rate spike	high	Europe
Supply chain disruption	medium	Asia
Regulatory update	low	North America

import { Table, Badge } from '@canarist/ui'

const columns = [
  { key: 'event', header: 'Event' },
  {
    key: 'severity',
    header: 'Severity',
    render: (row) => <Badge variant={row.severity === 'high' ? 'error' : 'warning'}>{row.severity}</Badge>,
  },
  { key: 'region', header: 'Region' },
]

const data = [
  { id: '1', event: 'USD/EUR rate spike', severity: 'high', region: 'Europe' },
  { id: '2', event: 'Supply chain disruption', severity: 'medium', region: 'Asia' },
]

<Table columns={columns} data={data} rowKey={(row) => row.id} />

Loading state

Event	Severity	Region

<Table columns={columns} data={[]} rowKey={(row) => row.id} loading />

Empty state

Event	Severity	Region
No data

<Table columns={columns} data={[]} rowKey={(row) => row.id} />

Reference

Prop	Type	Default	Description
columns	Column<T>[]	—	Column definitions with key, header, and optional render function.
data	T[]	—	Array of row data.
rowKey	(row: T) => string	—	Function returning a unique key for each row.
onRowClick	(row: T) => void	—	If provided, rows become clickable.
loading	boolean	—	Show animated skeleton rows instead of data.
className	string	—	Additional CSS classes on the outer wrapper.