Table
A low-level HTML table primitive; see Data Grid for a full-featured version.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@wunderui/react"Examples
Customers
Search, filter and sort above a customer list; select rows with the checkboxes.
Orders
Tabs with counts filter the orders; status badges on every row.
Leaderboard
Reps ranked for the period, with their team, progress and trend.
Audit log
Who did what, when and from where — with search and filters.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Breakdown table
Sessions per traffic source in a compact card.
File list with selection
A file table with a select-all checkbox, one checkbox per row and a menu per file.
Size guide modal
Desk sizes inside a dialog: switch between cm and inches, pick a row and the button follows.
Drill-down table
Pick a source to see where its sessions come from, and go back from there.
Invoice history
Past invoices with their status, a download per row and an export for all of them.
Comparison table
Four plans side by side, grouped features with a hint on each, the popular plan highlighted.
Table with expanded details
Customer rows that open to account details and recent activity.