Table

Data table for displaying structured data with sorting and loading support.

Import

import { Table } from '@kikumi3n/ui';

Usage

<Table
  columns={[
    { key: 'name', header: 'Name' },
    { key: 'email', header: 'Email' },
    { key: 'role', header: 'Role' },
  ]}
  data={[
    { name: 'Jane Doe', email: 'jane@example.com', role: 'Admin' },
    { name: 'John Smith', email: 'john@example.com', role: 'User' },
  ]}
/>

Sortable

<Table
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'date', header: 'Date', sortable: true },
  ]}
  data={data}
  sortable
  onSort={(key, direction) => console.log(key, direction)}
/>

Loading & Empty

<Table columns={columns} data={[]} loading />
<Table columns={columns} data={[]} emptyState={<EmptyState title="No data" />} />

API

Prop	Type	Default	Description
columns	Column<T>[]	required	Column definitions
data	T[]	required	Row data
sortable	boolean	false	Enable sorting
loading	boolean	false	Show loading state
emptyState	ReactNode	—	Custom empty state
onSort	(key: string, direction: 'asc' | 'desc') => void	—	Sort handler

Column

Prop	Type	Description
key	string	Data field key
header	string	Column header text
sortable	boolean	Enable sorting for this column
render	(value, row) => ReactNode	Custom cell renderer
width	string	Column width