Table
A low-level HTML table primitive; see Data Grid for a full-featured version.
Usage
| Name | Status |
|---|---|
| Jane Doe | Active |
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.
| Customer | Company | Status | Plan | MRR | Last active | |
|---|---|---|---|---|---|---|
AL Alina Lorenzalina@wunderui.com | WunderUI | Team | $1,240 | 2 min ago | ||
MI Mira Lindqvistmira@globex.com | Globex | Pro | $480 | 1 h ago | ||
JO Jonas Weberjonas@initech.io | Initech | Team | $960 | Yesterday | ||
SO Sofia Rossisofia@umbrella.co | Umbrella | Starter | $120 | 3 d ago |
Orders
Tabs with counts filter the orders; status badges on every row.
| Order | Customer | Date | Items | Total | Status | |
|---|---|---|---|---|---|---|
| #1042 | Alina Lorenz | 23 Sep | 3 | $128.40 | ||
| #1041 | Jonas Weber | 23 Sep | 1 | $42.00 | ||
| #1040 | Mira Lindqvist | 22 Sep | 2 | $86.10 | ||
| #1039 | Sofia Rossi | 21 Sep | 4 | $212.00 |
Leaderboard
Reps ranked for the period, with their team, progress and trend.
| # | Rep | Team | Deals won | Trend |
|---|---|---|---|---|
| 1 | AL Alina Lorenz | 100% | +4 | |
| 2 | JO Jonas Weber | 86% | +2 | |
| 3 | MI Mira Lindqvist | 72% | -1 | |
| 4 | SO Sofia Rossi | 64% | +1 |
Audit log
Who did what, when and from where — with search and filters.
| Timestamp | Actor | Event | Resource | IP address | Location |
|---|---|---|---|---|---|
| 23 Sep, 10:42 | AL Alina Lorenz | member.invited | Team · Design | 84.17.52.10 | Berlin, DE |
| 23 Sep, 09:15 | JO Jonas Weber | project.deleted | Checkout v2 | 91.64.8.2 | Hamburg, DE |
| 22 Sep, 17:03 | MI Mira Lindqvist | billing.updated | Plan · Team | 185.12.4.77 | Stockholm, SE |
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.
Top sources
| Direct | 18,204 sessions |
| Referral | 12,140 sessions |
| Social | 7,802 sessions |
| Other | 3,410 sessions |
File list with selection
A file table with a select-all checkbox, one checkbox per row and a menu per file.
| Name | Size | By | Modified | Actions | |
|---|---|---|---|---|---|
| Brand guidelines.pdf | 4.2 MB | 2 hours ago | |||
| Q3 product roadmap.xlsx | 1.1 MB | Yesterday | |||
| Onboarding-flow-v3.fig | 12.8 MB | Yesterday | |||
| hero-illustration.png | 2.4 MB | Sep 15 | |||
| Launch-video.mp4 | 148 MB | Sep 14 | |||
| Pricing-research.docx | 640 KB | Sep 12 | |||
| Design-tokens.json | 32 KB | Sep 11 | |||
| Team-offsite.jpg | 3.9 MB | Sep 9 |
Size guide modal
Desk sizes inside a dialog: switch between cm and inches, pick a row and the button follows.
Size guide
Nord standing desk · all sizes share the same frame and height range
| Size | Width | Depth | Height | Best for |
|---|---|---|---|---|
| 120 | 60 | 62 – 128 | Laptop + one monitor | |
| 140 | 70 | 62 – 128 | Laptop + two monitors | |
| 160 | 80 | 62 – 128 | Two monitors + desk mat | |
| 180 | 80 | 62 – 128 | Dual workstation |
How to measure
Leave 15 cm behind the desk for cables and the motor housing.
Standing height ≈ elbow height when standing relaxed.
Add 10 cm depth per extra monitor arm.
Drill-down table
Pick a source to see where its sessions come from, and go back from there.
Top sources
| 18,204 sessions | |
| 12,140 sessions | |
| 7,802 sessions | |
| 3,410 sessions |
Invoice history
Past invoices with their status, a download per row and an export for all of them.
Invoice history
Download receipts for your records
| Invoice | Date | Amount | Status | Actions |
|---|---|---|---|---|
| INV-2026-0912 | Sep 18, 2026 | $588.00 | ||
| INV-2026-0811 | Aug 18, 2026 | $441.00 | ||
| INV-2026-0710 | Jul 18, 2026 | $441.00 | ||
| INV-2026-0609 | Jun 18, 2026 | $441.00 |
Comparison table
Four plans side by side, grouped features with a hint on each, the popular plan highlighted.
| Feature | Free$0forever | Pro · Solo$29/ month | Pro · Team$39/ seat / month | EnterpriseCustomannual |
|---|---|---|---|---|
| Core | ||||
| Projects | 3 | Unlimited | Unlimited | Unlimited |
| Core components | ||||
| Design tokens & dark mode | ||||
| Members | 1 | 1 | Up to 15 | Unlimited |
| Pro features | ||||
| Pro UI Blocks (150+) | – | |||
| Templates | – | |||
| Export to React code | – | |||
| AI generations / month | 50 | 500 | 2,000 | Unlimited |
| Collaboration & security | ||||
| Roles & permissions | – | – | ||
| Audit log | – | – | 90 days | 365 days |
| SSO / SAML | – | – | – | |
| Priority support | – | < 4h | Dedicated CSM | |
Table with expanded details
Customer rows that open to account details and recent activity.
| Select or expand | Customer | Company | Status | Plan | MRR | Last active | Actions |
|---|---|---|---|---|---|---|---|
| ALAlina Lorenzalina@wunderui.com | WunderUI | Pro · Team | $1,170 | 2 min ago | |||
| JBJonas Beckerjonas@acme.io | ACME | Pro · Solo | $29 | 1 h ago | |||
Account details
Recent activity Upgraded to Pro · Solo2 h ago Invited 2 teammatesYesterday Created project “Checkout”3 d ago | |||||||
| MKMira Kaurmira@globex.com | Globex | Enterprise | $4,900 | Yesterday | |||
| LPLucas Perezlucas@initech.dev | Initech | Free | $0 | — | |||
| SOSofia Oliveirasofia@umbrella.co | Umbrella | Pro · Team | $780 | 3 h ago | |||
| TNTom Nguyentom@hooli.com | Hooli | Pro · Team | $390 | 5 d ago | |||