Table
Enhanced table component with multiple variants, sorting, selection, and responsive behavior. Perfect for displaying structured data with modern styling and interactions.
Installation
Install via CLI
npx @moontra/moonui-cli add tableUsage
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
Examples
Basic Table
Simple table with header, body and caption
Striped Rows
variant="striped" zebra-stripes the body rows. The stripe is applied per row (:nth-child(odd)), so it survives fragments, .map() and wrapper components — header and footer rows are never striped. Hover switches to the accent surface so it stays visible on top of a stripe.
With Status Badges
Table with status badges for visual indicators
With Actions
Table with action dropdown menus
Sortable Table
Use TableHead's built-in sortable, sorted and onSort props to add sorting without wiring up your own icons
Selectable Rows
Table with checkbox selection
Responsive Table
Horizontal scroll on smaller screens
Summary Footer, Variants and Sizes
TableFooter renders a <tfoot> for totals and summary rows — it is excluded from striping, so a zebra table keeps a solid summary band. The same table also shows the variant scale beyond striped (card here, plus bordered and minimal) and the size scale that sets the base text size (sm / md / lg).