Five real-world Table patterns — basic data, status badges, row actions, sortable headers, and a searchable, paginated list — composed from Belin's wrapped components.
Just rows and columns, a caption underneath. Right-aligned numeric column.
| Invoice | Customer | Date | Status | Amount |
|---|---|---|---|---|
| INV-001 | Acme Corp | 2026-06-08 | Paid | $250.00 |
| INV-002 | Globex Inc | 2026-06-06 | Pending | $150.00 |
| INV-003 | Initech | 2026-06-04 | Overdue | $350.00 |
| INV-004 | Soylent Co | 2026-06-01 | Paid | $480.00 |
A Status column showing Belin's Badge variants — Success, Warning, Secondary, and Destructive.
| Project | Lead | Updated | Status |
|---|---|---|---|
| Design system tokens | M. Carrasco | 2 hours ago | Active |
| Onboarding redesign | P. Nakamura | 1 day ago | Active |
| Mobile app v2 | L. Andrésdóttir | 3 days ago | Paused |
| Annual report 2025 | K. Owusu | 1 week ago | Completed |
| Internal tools rewrite | S. Bergmann | 2 weeks ago | Cancelled |
The final column hosts a DropdownMenu so each row gets contextual actions without crowding the layout.
| Member | Role | Last active | |
|---|---|---|---|
| Maya Carrasco | Design lead | Just now | |
| Priya Nakamura | Senior engineer | 5 min ago | |
| Linnea Andrésdóttir | Product manager | 2 hours ago | |
| Kwame Owusu | Engineering manager | Yesterday | |
| Sofie Bergmann | Researcher | 3 days ago |
Clicking Priority or Due date toggles between ascending and descending. The active column shows the direction next to its label.
| Task | Assignee | ||
|---|---|---|---|
| Audit color contrast pairs | M. Carrasco | High | 2026-06-15 |
| Ship Phase 13 showcase | K. Owusu | High | 2026-06-11 |
| Migrate Calendar to v4 syntax | P. Nakamura | Medium | 2026-07-01 |
| Add ResizablePanel to docs | S. Bergmann | Medium | 2026-06-22 |
| Document text style system | L. Andrésdóttir | Low | 2026-06-30 |
Search filters across name and plan. Pagination shows the current window. Page resets to 1 when the search changes.
38 results
| Customer | Plan | Seats | MRR |
|---|---|---|---|
| Acme | Starter | 3 | $27 |
| Globex | Team | 8 | $152 |
| Initech | Business | 12 | $468 |
| Soylent | Enterprise | 25 | $2,475 |
| Hooli | Starter | 40 | $360 |
| Pied Piper | Team | 75 | $1,425 |
| Stark Industries | Business | 150 | $5,850 |
| Wayne Enterprises | Enterprise | 250 | $24,750 |