Components

Table

In Progress

Compound table primitives for displaying structured data. Compose Table, TableHead, TableBody, TableRow, TableHeader, and TableCell exactly like native HTML table elements — the design system handles borders, hover states, and typography.

Basic

Name	Status	Amount	Date
Alice Johnson	success	$1,200.00	Feb 24, 2026
Bob Martinez	warning	$340.50	Feb 23, 2026
Carol Lee	success	$5,780.00	Feb 22, 2026
David Kim	destructive	$90.00	Feb 21, 2026

Sortable headers

	Name		Status
Feb 24, 2026	Alice Johnson	$1,200.00	success
Feb 23, 2026	Bob Martinez	$340.50	warning
Feb 22, 2026	Carol Lee	$5,780.00	success
Feb 21, 2026	David Kim	$90.00	destructive

Loading state

Name	Amount	Status

Empty state

Name	Amount	Status
No transactions yet Transactions will appear here once customers make payments.

With pagination

Name	Amount	Status
Alice Johnson	$1,200.00	success
Bob Martinez	$340.50	warning

Page 1 of 6 (12 items)

Usage

import {  Table, TableHead, TableBody, TableRow,  TableHeader, TableCell, TableEmpty, TableLoading,  Pagination,} from "@mnee-ui/ui"

TableHeader props

Prop	Type	Default	Description
sortable	boolean	false	Renders a button with sort indicator
sortDirection	"asc" \| "desc" \| null	null	Current sort direction — controls the ↑↓ indicator
onSort	() => void	—	Called when the sort button is clicked

Pagination props

Prop	Type	Default	Description
page	number	—	Current page (1-indexed)
totalPages	number	—	Total number of pages
totalItems	number	—	Optional total item count shown in the label
onPageChange	(page: number) => void	—	Called with the new page number

All sub-components accept className for layout utilities only (alignment, padding, width). The design system controls borders, hover states, and typography.