Table

Structured data display with rows and columns. Supports striped rows, avatars, checkboxes, sorting, sticky headers, grouped rows, and summary footers.

When To Use

Use Table when the user needs to enter or choose information as part of a larger form or workflow.
Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

Keep a visible label or an equivalent accessible name attached to the control.
Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Key exports

Table, TableHeader, TableBody, TableFooter, TableRow, TableHead

Example Code

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@hilum/ui"
import { Badge } from "@hilum/ui"

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Voice</TableHead>
      <TableHead>Text</TableHead>
      <TableHead>Duration</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((row) => (
      <TableRow key={row.id}>
        <TableCell className="font-medium text-ground-900">{row.voice}</TableCell>
        <TableCell className="max-w-[200px] truncate text-ground-500">{row.text}</TableCell>
        <TableCell>{row.duration}</TableCell>
// ...trimmed for docs

Simple

Default

Header, body rows, and caption

Recent voice generations
Voice	Text	Duration	Status
Roger	The quick brown fox jumps over the lazy dog.	0:08	Done
Aria	Welcome to ElevenLabs, the leading AI voice platform.	0:12	Done
Sarah	Generating expressive narration for chapter three...	—	Processing
Charlie	Error: audio sample rate mismatch detected.	—	Failed
Marcus	Voice synthesis complete for the audiobook project.	0:19	Done

Striped rows

Alternating row backgrounds for easier scanning

Voice	Text	Duration	Status
Roger	The quick brown fox jumps over the lazy dog.	0:08	Done
Aria	Welcome to ElevenLabs, the leading AI voice platform.	0:12	Done
Sarah	Generating expressive narration for chapter three...	—	Processing
Charlie	Error: audio sample rate mismatch detected.	—	Failed
Marcus	Voice synthesis complete for the audiobook project.	0:19	Done

Condensed

Reduced row height for dense data

ID	Company	Type	Amount	Date	Status
TXN-8821	Acme Corp	Invoice	$4,200	Apr 1, 2026	Paid
TXN-8820	Globex Inc.	Invoice	$1,900	Mar 28, 2026	Pending
TXN-8819	Initech LLC	Refund	$320	Mar 22, 2026	Paid
TXN-8818	Umbrella Corp	Invoice	$8,750	Mar 15, 2026	Overdue
TXN-8817	Soylent Corp	Invoice	$2,100	Mar 10, 2026	Paid
TXN-8816	Acme Corp	Credit	$500	Mar 5, 2026	Paid

With avatars

Avatars and multi-line content

User identity with stacked primary and secondary text

Member	Role	Status
SP Sarah Parker s.parker@acme.com	Designer Product	Active
GL George Lin g.lin@acme.com	Engineer Engineering	Active
AP Ana Portillo a.portillo@acme.com	Product Manager Product	On leave
LM Lucas Meyer l.meyer@acme.com	Engineer Engineering	Active
EC Emma Chen e.chen@acme.com	Designer Brand	Active

With checkboxes

Selectable rows

Select-all toggle, individual row selection, bulk action bar

Name	Role	Status
SP Sarah Parker s.parker@acme.com	Designer	Active
GL George Lin g.lin@acme.com	Engineer	Active
AP Ana Portillo a.portillo@acme.com	Product Manager	On leave
LM Lucas Meyer l.meyer@acme.com	Engineer	Active
EC Emma Chen e.chen@acme.com	Designer	Active

Grouped rows

Grouped by status

Section headers span all columns to group related rows

Company	Type	Amount	Date
Paid
Acme Corp	Invoice	$4,200	Apr 1, 2026
Initech LLC	Refund	$320	Mar 22, 2026
Soylent Corp	Invoice	$2,100	Mar 10, 2026
Acme Corp	Credit	$500	Mar 5, 2026
Pending
Globex Inc.	Invoice	$1,900	Mar 28, 2026
Overdue
Umbrella Corp	Invoice	$8,750	Mar 15, 2026

Sortable headings

Column sorting

Click column headers to sort ascending or descending


TXN-8821	Acme Corp	Apr 1, 2026	$4,200	Paid
TXN-8820	Globex Inc.	Mar 28, 2026	$1,900	Pending
TXN-8819	Initech LLC	Mar 22, 2026	$320	Paid
TXN-8818	Umbrella Corp	Mar 15, 2026	$8,750	Overdue
TXN-8817	Soylent Corp	Mar 10, 2026	$2,100	Paid
TXN-8816	Acme Corp	Mar 5, 2026	$500	Paid

Sticky header

Voice	Text	Duration	Status
Roger	The quick brown fox jumps over the lazy dog.	0:08	Done
Aria	Welcome to ElevenLabs, the leading AI voice platform.	0:12	Done
Sarah	Generating expressive narration for chapter three...	—	Processing
Charlie	Error: audio sample rate mismatch detected.	—	Failed
Marcus	Voice synthesis complete for the audiobook project.	0:19	Done
Roger	The quick brown fox jumps over the lazy dog.	0:08	Done
Aria	Welcome to ElevenLabs, the leading AI voice platform.	0:12	Done
Sarah	Generating expressive narration for chapter three...	—	Processing
Charlie	Error: audio sample rate mismatch detected.	—	Failed
Marcus	Voice synthesis complete for the audiobook project.	0:19	Done

With summary rows

Invoice table

Footer rows for subtotals, tax, and totals using TableFooter

Description	Hours	Rate	Amount
Design system audit	12h	$150/hr	$1,800
Component library build	40h	$150/hr	$6,000
Documentation & handoff	8h	$150/hr	$1,200
Subtotal			$9,000
Tax (20%)			$1,800
Total			$10,800