UI Library
Data Table
Sortable, selectable, paginated, grouped, expandable, and editable data tables.
Kitchen Sink
Search, avatars, buyer metadata, status chips, and row actions in one data table.
| Product | Date | Category | Buyers | Payment | Status | Actions |
|---|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed | |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed | |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending | |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled | |
IP iPhone#0005 | 2026-07-08 | Mobile | Beatrix Longlandbeatrix@example.com | $999.00 | Confirmed | |
PR Projector#0006 | 2026-07-07 | Office | Aliza MacElholmaliza@example.com | $540.00 | Completed | |
HE Headphone#0007 | 2026-07-06 | Audio | Benito Rodolicobenito@example.com | $249.00 | Pending | |
SM Smart TV#0008 | 2026-07-05 | Entertainment | Dorolice Crossmandorolice@example.com | $1,299.00 | Confirmed |
Basic
A straightforward data table with product, category, buyer, payment, and status columns.
| Product | Date | Category | Buyers | Payment | Status |
|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled |
IP iPhone#0005 | 2026-07-08 | Mobile | Beatrix Longlandbeatrix@example.com | $999.00 | Confirmed |
Dense
A compact data table layout for information-heavy screens.
| Product | Date | Category | Buyers | Payment | Status | Actions |
|---|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed | |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed | |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending | |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled | |
IP iPhone#0005 | 2026-07-08 | Mobile | Beatrix Longlandbeatrix@example.com | $999.00 | Confirmed |
Cell Slot
Custom cell rendering with avatars, emails, payment values, and status chips.
| Product | Date | Category | Buyers | Payment | Status | Actions |
|---|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed | |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed | |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending | |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled |
Row Selection
Selectable rows with an explicit selected count.
2 rows selected
| Select | Product | Date | Category | Buyers | Payment | Status |
|---|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed | |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed | |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending | |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled | |
IP iPhone#0005 | 2026-07-08 | Mobile | Beatrix Longlandbeatrix@example.com | $999.00 | Confirmed | |
PR Projector#0006 | 2026-07-07 | Office | Aliza MacElholmaliza@example.com | $540.00 | Completed |
External Pagination
Pagination controls outside the table body.
| Product | Date | Category | Buyers | Payment | Status |
|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled |
Rows per page: 4
Fixed Header
A fixed table header for taller data sets.
| Product | Date | Category | Buyers | Payment | Status |
|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled |
IP iPhone#0005 | 2026-07-08 | Mobile | Beatrix Longlandbeatrix@example.com | $999.00 | Confirmed |
PR Projector#0006 | 2026-07-07 | Office | Aliza MacElholmaliza@example.com | $540.00 | Completed |
HE Headphone#0007 | 2026-07-06 | Audio | Benito Rodolicobenito@example.com | $249.00 | Pending |
SM Smart TV#0008 | 2026-07-05 | Entertainment | Dorolice Crossmandorolice@example.com | $1,299.00 | Confirmed |
Grouping Rows
Rows grouped by their current status.
| Group by status: Confirmed | ||||
| Mouse | Electronics | Aila Quailadis | $98.00 | Confirmed |
| iPhone | Mobile | Beatrix Longland | $999.00 | Confirmed |
| Smart TV | Entertainment | Dorolice Crossman | $1,299.00 | Confirmed |
| Group by status: Completed | ||||
| Smart Watch | Wearables | Edwina Ebsworth | $349.00 | Completed |
| Projector | Office | Aliza MacElholm | $540.00 | Completed |
| Group by status: Pending | ||||
| Keyboard | Gaming | Cyrus Gornal | $129.00 | Pending |
| Headphone | Audio | Benito Rodolico | $249.00 | Pending |
| Group by status: Cancelled | ||||
| Google Home | Home | Georgia McCrum | $89.00 | Cancelled |
Expandable Rows
Click the chevron to reveal expanded row data.
| More | Product | Date | Category | Buyers | Payment | Status | |
|---|---|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed | ||
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed | ||
| Expanded Row DataEdwina Ebsworth bought Smart Watch from the Wearables category with 6 years of customer history. | |||||||
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending | ||
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled | ||
IP iPhone#0005 | 2026-07-08 | Mobile | Beatrix Longlandbeatrix@example.com | $999.00 | Confirmed | ||
Row Editing via Dialog
A dialog-style editor for row data.
| Product | Date | Category | Buyers | Payment | Status | Actions |
|---|---|---|---|---|---|---|
MO Mouse#0001 | 2026-07-12 | Electronics | Aila Quailadisaila@example.com | $98.00 | Confirmed | |
SM Smart Watch#0002 | 2026-07-11 | Wearables | Edwina Ebsworthedwina@example.com | $349.00 | Completed | |
KE Keyboard#0003 | 2026-07-10 | Gaming | Cyrus Gornalcyrus@example.com | $129.00 | Pending | |
GO Google Home#0004 | 2026-07-09 | Home | Georgia McCrumgeorgia@example.com | $89.00 | Cancelled |