Table
Styled HTML table primitives (Table / TableHeader / TableBody / TableRow / TableHead / TableCell / TableCaption / TableFooter). Low-level building blocks — use DataTable for sorting/filtering/pagination.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| Total | $1,200.00 | ||
Installation
pnpm dlx @hex-core/cli add tableAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes on the <table> |
AI Guidance
When to use
Use for simple tabular data where you render rows manually: invoice lists, pricing rows, settings tables. Responsive container wraps the <table> to allow horizontal scroll on small screens.
When not to use
Don't use for large datasets that need sorting/filtering/pagination (use DataTable). Don't use for layout (use CSS grid/flex). Don't use for <form> field arrays (use native fields).
Common mistakes
- Using <div> grids instead of a real <table> for tabular data (breaks a11y)
- Putting interactive controls in headers without keyboard semantics
- Missing TableCaption when the table has no other label
Accessibility
Semantic <table> / <thead> / <tbody> is used, so screen readers announce rows/columns. Include a TableCaption or aria-label. Mark column sort buttons with aria-sort.
Related components
Token budget: 450