Table

A structured data table with header, body, and optional footer. Supports zebra striping, row selection, sortable columns, and pagination.

Anatomy

<Table striped>
  <TableHeader>
    <TableRow>
      <TableHead sortable sortDirection="asc" onSort={…}>Column</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow selected onClick={…}>
      <TableCell>Value</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>   {/* optional */}
    <TableRow>…</TableRow>
  </TableFooter>
</Table>

Examples

Name	Email	Role	Status	Joined
Haydn Phillips	haydn@example.com	Admin	Active	Jan 2024
Jamie Davies	jamie@example.com	Member	Active	Mar 2024
Sara Kim	sara@example.com	Member	Inactive	Jun 2024
Alex Morgan	alex@example.com	Viewer	Pending	Sep 2024
Jordan Lee	jordan@example.com	Member	Active	Nov 2024

Zebra striping

Name	Role	Status	Joined
Haydn Phillips	Admin	Active	Jan 2024
Jamie Davies	Member	Active	Mar 2024
Sara Kim	Member	Inactive	Jun 2024
Alex Morgan	Viewer	Pending	Sep 2024
Jordan Lee	Member	Active	Nov 2024

Sortable columns

Name	Role	Status	Joined
Haydn Phillips	Admin	Active	Jan 2024
Jamie Davies	Member	Active	Mar 2024
Sara Kim	Member	Inactive	Jun 2024
Alex Morgan	Viewer	Pending	Sep 2024
Jordan Lee	Member	Active	Nov 2024

Row selection

Name	Role	Status
Haydn Phillips	Admin	Active
Jamie Davies	Member	Active
Sara Kim	Member	Inactive
Alex Morgan	Viewer	Pending
Jordan Lee	Member	Active

With footer

Invoice	Status	Amount
INV-001	Paid	$1,200.00
INV-002	Pending	$450.00
INV-003	Paid	$3,050.00
INV-004	Overdue	$890.00
Total		$5,590.00

Clickable rows

Name	Role	Status
Haydn Phillips	Admin	Active
Jamie Davies	Member	Active
Sara Kim	Member	Inactive
Alex Morgan	Viewer	Pending
Jordan Lee	Member	Active

With pagination

Name	Role	Status
Haydn Phillips	Admin	Active
Jamie Davies	Member	Active
Sara Kim	Member	Inactive

1–3 of 5

Table props

children*

ReactNode

Table sections.

striped= false

boolean

Alternating row background colour.

className

string

Additional classes on the table element.

Prop	Type	Default	Description
children*	ReactNode	—	Table sections.
striped	boolean	false	Alternating row background colour.
className	string	—	Additional classes on the table element.

TableRow props

children*

ReactNode

TableHead or TableCell elements.

selected

boolean

Applies accent-subtle highlight to the row.

onClick

() => void

Makes the row clickable with hover state.

className

string

Additional classes.

Prop	Type	Default	Description
children*	ReactNode	—	TableHead or TableCell elements.
selected	boolean	—	Applies accent-subtle highlight to the row.
onClick	() => void	—	Makes the row clickable with hover state.
className	string	—	Additional classes.

TableHead props

children

ReactNode

Header cell content.

align= 'left'

'left' | 'center' | 'right'

Text alignment.

sortable

boolean

Shows sort icon and enables click interaction.

sortDirection

'asc' | 'desc' | null

Current sort state.

onSort

() => void

Called when the column header is clicked.

className

string

Additional classes.

Prop	Type	Default	Description
children	ReactNode	—	Header cell content.
align	'left' \| 'center' \| 'right'	'left'	Text alignment.
sortable	boolean	—	Shows sort icon and enables click interaction.
sortDirection	'asc' \| 'desc' \| null	—	Current sort state.
onSort	() => void	—	Called when the column header is clicked.
className	string	—	Additional classes.

TableCell props

children

ReactNode

Cell content.

align= 'left'

'left' | 'center' | 'right'

Text alignment.

colSpan

number

Number of columns to span.

className

string

Additional classes.

Prop	Type	Default	Description
children	ReactNode	—	Cell content.
align	'left' \| 'center' \| 'right'	'left'	Text alignment.
colSpan	number	—	Number of columns to span.
className	string	—	Additional classes.

PreviousStat NextTimeline