Components / Tables
Tables
Twenty-one table patterns — from basic grids to searchable, sortable, paginated data tables.
Foundations
Core layouts and densities.
| Product | Category | Price | Stock | Status |
|---|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | 42 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | 8 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | 120 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | 0 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | 31 | Active |
Basic table
| Product | Category | Price | Status |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Striped table
Zebra striping for scanning.
| Product | Category | Price | Status |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Bordered table
Full cell borders.
| Product | Category | Price | Status |
|---|---|---|---|
Espresso blend 500g | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g | Coffee | Rp 65.000 | Low |
Pandan syrup 1L | Syrup | Rp 48.000 | Active |
Oat milk 1L | Milk | Rp 54.000 | Draft |
Cocoa powder 250g | Powder | Rp 72.000 | Active |
Compact table
Dense spacing for large datasets.
| Product | Category | Price | Status |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Wrap in a horizontally scrollable container on mobile.
Responsive table
Horizontal scroll on small screens.
Selection & identity
Checkboxes, avatars, and status.
| Product | Category | Price | Status | |
|---|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active | |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low | |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active | |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft | |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Table with checkbox
| Customer | Orders | Status | |
|---|---|---|---|
RAReza Akbar | reza@amerza.dev | 14 | Active |
DSDina Safitri | dina@amerza.dev | 9 | Active |
BNBayu Nugroho | bayu@amerza.dev | 22 | Active |
Table with avatar
Identity column with initials/photo.
| Order | Customer | Total | Status |
|---|---|---|---|
| ORD-2048 | Reza Akbar | Rp 320.000 | Active |
| ORD-2047 | Dina Safitri | Rp 148.000 | Low |
| ORD-2046 | Bayu Nugroho | Rp 95.000 | Draft |
Table with status
Status badges with tinted rows.
Actions & density
Row actions and nested groups.
| Product | Category | Price | Actions |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 |
Table with actions
Row-level actions on hover.
| Expand | Product | Category | Stock |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | 42 | |
Arabica Gayo 250g PRD-002 | Coffee | 8 |
Expandable rows
Click to reveal detail inline.
Search, filter & sort
Live client-side data operations.
| Product | Category | Price | Status |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Table with search
Filter rows as you type.
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Table with sorting
Click headers to sort.
| Product | Category | Price | Status |
|---|---|---|---|
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Page 1 of 2 · 5 items
Table with pagination
Column controls
Choose which columns to display.
| ID | Product | Category | Price | Stock | Status |
|---|---|---|---|---|---|
| PRD-001 | Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | 42 | Active |
| PRD-002 | Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | 8 | Low |
| PRD-003 | Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | 120 | Active |
Column visibility
Groups & hierarchy
Nested and grouped structures.
Coffee · 2 | |||
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Syrup & Milk · 3 | |||
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Grouped table
Category-level rollups.
| Product | Category | Price | Status |
|---|---|---|---|
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Espresso blend 500g PRD-001 | Coffee | Rp 85.000 | Active |
Arabica Gayo 250g PRD-002 | Coffee | Rp 65.000 | Low |
Pandan syrup 1L PRD-003 | Syrup | Rp 48.000 | Active |
Oat milk 1L PRD-004 | Milk | Rp 54.000 | Draft |
Cocoa powder 250g PRD-005 | Powder | Rp 72.000 | Active |
Sticky header table
Header stays while body scrolls.
Loading & empty states
What tables look like while loading, empty, or failed.
Loading products…
Loading table
Skeleton rows with a spinner.
No products found
Try adjusting your filters or create a new product to get started.
Empty table
A friendly no-data state.
Failed to load products
Something went wrong while fetching data. Check your connection and try again.
Error table
A failed-load state with retry.
