Table

A data table with sorting, custom cell rendering, and multiple visual variants.

Basic Usage

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Inactive
Charlie	Manager	Active

Sortable Columns

Name	Age	City
Alice	30	Seoul
Bob	25	Tokyo
Charlie	35	London

Variants

Name	Value
Item A	100
Item B	200
Item C	300
Item D	400

Zebra & sticky header

zebra alternates row backgrounds (similar to variant="striped" but composable with other variants), and stickyHeader keeps the header row visible while scrolling long datasets.

Name	Value
Item A	100
Item B	200
Item C	300

Mobile layout

Tables don't fit small viewports gracefully. mobileVariant lets you pick the strategy:

Value	Behavior
scroll (default)	Horizontal scroll inside a --tui-glass-shadowed container. Header stays aligned.
stacked	Each row collapses into a vertical card with column.header as the label and the cell content as the value. Loses tabular comparison but reads naturally.

<Table mobileVariant="stacked" columns={cols} data={rows} />

Pick stacked when each row represents an independent entity (a user, an order). Stick with scroll when users need to compare values across rows.

Empty State

Name
No records found

Table Props

Prop	Type	Default	Description
columns	Column<T>[]	-	Column definitions ({ key, header, render?, sortable?, width?, align? })
data	T[]	-	Data rows
variant	'default' | 'striped' | 'bordered'	'default'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Size preset
stickyHeader	boolean	false	Sticky header on scroll
zebra	boolean	false	Alternate row backgrounds with --tui-bg-muted
mobileVariant	'scroll' | 'stacked'	'scroll'	On narrow viewports: horizontal scroll or stacked-card per row
hoverable	boolean	true	Highlight rows on hover
emptyText	string	'No data available'	Text shown when data is empty
onRowClick	(row: T, index: number) => void	-	Row click handler
rowKey	string | ((row: T) => string)	-	Key extractor for row identity
className	string	-	Additional CSS class name
style	CSSProperties	-	Additional inline styles