Table Patterns
Composable data tables with TanStack Table integration.
Demo data from @stackmates/ui-fixtures
DataTable
Basic data table with sorting, pagination, and row selection.
| Name | Company | Status | Created | ||
|---|---|---|---|---|---|
| Sarah Chen | sarah.chen@acme.com | Acme Corp | Active | 12/1/2025 | |
| Marcus Johnson | marcus@techstart.io | TechStart | Active | 11/15/2025 | |
| Elena Rodriguez | elena@globalventures.com | Global Ventures | Active | 10/20/2025 |
Rows per page
Page 1 of 2
CRUDTable
DataTable with built-in CRUD actions (view, edit, delete) and bulk operations.
| Name | Company | Status | Created | Actions | ||
|---|---|---|---|---|---|---|
| Sarah Chen | sarah.chen@acme.com | Acme Corp | Active | 12/1/2025 | ||
| Marcus Johnson | marcus@techstart.io | TechStart | Active | 11/15/2025 | ||
| Elena Rodriguez | elena@globalventures.com | Global Ventures | Active | 10/20/2025 |
Rows per page
Page 1 of 2
Compact Table
Compact variant with striped rows.
| Name | Company | Status | Created | |
|---|---|---|---|---|
| Sarah Chen | sarah.chen@acme.com | Acme Corp | Active | 12/1/2025 |
| Marcus Johnson | marcus@techstart.io | TechStart | Active | 11/15/2025 |
| Elena Rodriguez | elena@globalventures.com | Global Ventures | Active | 10/20/2025 |
Loading State
Table with loading skeleton.
| Name | Company | Status | Created | |
|---|---|---|---|---|
Showing 0 to 0 of 0 results
Rows per page
Page 1 of 1
Empty State
Table with no data.
| Name | Company | Status | Created | |
|---|---|---|---|---|
| No contacts found. Create your first contact to get started. | ||||