Table

Free

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 table

Usage

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00

Examples

Basic Table

Simple table with header, body and caption

A list of your recent invoices.
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
INV005	Paid	PayPal	$550.00

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.

Zebra striping makes long rows easier to scan.
Name	Email	Status	Role
John Doe	john@example.com	Active	Admin
Jane Smith	jane@example.com	Active	User
Bob Johnson	bob@example.com	Inactive	User
Alice Brown	alice@example.com	Active	Editor
Charlie Wilson	charlie@example.com	Pending	User

With Status Badges

Table with status badges for visual indicators

Name	Email	Status	Role
John Doe	john@example.com	Active	Admin
Jane Smith	jane@example.com	Active	User
Bob Johnson	bob@example.com	Inactive	User
Alice Brown	alice@example.com	Active	Editor
Charlie Wilson	charlie@example.com	Pending	User

With Actions

Table with action dropdown menus

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User

Sortable Table

Use TableHead's built-in sortable, sorted and onSort props to add sorting without wiring up your own icons

Name	Email	Status	Role
John Doe	john@example.com	Active	Admin
Jane Smith	jane@example.com	Active	User
Bob Johnson	bob@example.com	Inactive	User
Alice Brown	alice@example.com	Active	Editor
Charlie Wilson	charlie@example.com	Pending	User

Selectable Rows

Table with checkbox selection

Name	Email	Status	Role
John Doe	john@example.com	Active	Admin
Jane Smith	jane@example.com	Active	User
Bob Johnson	bob@example.com	Inactive	User
Alice Brown	alice@example.com	Active	Editor
Charlie Wilson	charlie@example.com	Pending	User

Responsive Table

Horizontal scroll on smaller screens

Name	Email	Status	Role	Department	Location
John Doe	john@example.com	Active	Admin	Engineering	San Francisco
Jane Smith	jane@example.com	Active	User	Engineering	San Francisco
Bob Johnson	bob@example.com	Inactive	User	Engineering	San Francisco
Alice Brown	alice@example.com	Active	Editor	Engineering	San Francisco
Charlie Wilson	charlie@example.com	Pending	User	Engineering	San Francisco

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).

Invoice	Status	Amount
INV-001	Paid	$250.00
INV-002	Pending	$150.00
INV-003	Unpaid	$350.00
Total		$750.00