Click a header to sort. Drag a header edge to resize. Select rows to raise the action bar.
| Actions | |||||||
|---|---|---|---|---|---|---|---|
Emma Wilsonemma@example.com | pay_1N3xBR | Succeeded | $2,450.00 | $73.50 | Visa 4242 | ||
Olivia Martinolivia@example.com | pay_1N3x7K | Succeeded | $1,999.00 | $59.97 | Visa 0005 | ||
Lucas Reyeslucas@example.com | pay_1N3xGH | Succeeded | $1,280.00 | $38.40 | Mastercard 4444 | ||
Noah Patelnoah@example.com | pay_1N3xDZ | Succeeded | $720.00 | $21.60 | Visa 4012 | ||
Sofia Davissofia@example.com | pay_1N3xBP | Succeeded | $450.00 | $13.50 | Amex 8431 | ||
Isabella Nguyenisabella@example.com | pay_1N3xMR | Succeeded | $299.00 | $8.97 | Visa 1881 | ||
Liam Johnsonliam@example.com | pay_1N3xCQ | Refunded | $150.00 | $4.50 | Mastercard 6789 | ||
William Kimwill@example.com | pay_1N3xAN | Failed | $99.00 | $3.17 | Amex 1005 | ||
Ava Brooksava@example.com | pay_1N3xEF | Processing | $64.00 | $2.22 | Visa 7777 | ||
Jackson Leejackson@example.com | pay_1N3xBL | Processing | $39.00 | $1.43 | Mastercard 5555 |
Name pins to the start and actions to the end while the middle scrolls.
| Actions | |||||||||
|---|---|---|---|---|---|---|---|---|---|
MO Maya Okaformaya@example.com | u1 | maya@example.com | Owner | Operations | Active | 4 | 2024-02-11 | ||
TL Theo Lindqvisttheo@example.com | u2 | theo@example.com | Admin | Engineering | Active | 3 | 2024-03-02 | ||
PR Priya Ramanpriya@example.com | u3 | priya@example.com | Editor | Design | Active | 2 | 2024-05-19 | ||
DA Diego Alvarezdiego@example.com | u4 | diego@example.com | Editor | Support | Invited | 1 | 2025-01-08 | ||
HS Hana Satohana@example.com | u5 | hana@example.com | Viewer | Finance | Active | 1 | 2025-02-14 | ||
CR Callum Reidcallum@example.com | u6 | callum@example.com | Admin | Engineering | Suspended | 2 | 2025-03-30 | ||
ZH Zainab Haddadzainab@example.com | u7 | zainab@example.com | Editor | Marketing | Active | 2 | 2025-06-21 | ||
FB Felix Brandtfelix@example.com | u8 | felix@example.com | Viewer | Design | Invited | 1 | 2025-08-05 |
Drag the handle, or focus it, press Space, then use the arrow keys.
| Reorder | Server | Region | Status | CPU | Memory | Uptime |
|---|---|---|---|---|---|---|
| edge-api-01 | us-east | Healthy | 34% | 61% | 42d 6h | |
| edge-api-02 | us-east | Healthy | 29% | 58% | 42d 6h | |
| worker-queue-01 | eu-west | Degraded | 88% | 79% | 9d 14h | |
| db-primary | us-west | Healthy | 47% | 83% | 118d 2h | |
| cache-02 | ap-south | Offline | 0% | 0% | 0m | |
| search-01 | eu-west | Healthy | 52% | 70% | 27d 19h |
| Expand | ||||||
|---|---|---|---|---|---|---|
| edge-api-01 | us-east | Healthy | 34% | 61% | 42d 6h | |
| edge-api-02 | us-east | Healthy | 29% | 58% | 42d 6h | |
| worker-queue-01 | eu-west | Degraded | 88% | 79% | 9d 14h | |
| db-primary | us-west | Healthy | 47% | 83% | 118d 2h | |
| cache-02 | ap-south | Offline | 0% | 0% | 0m | |
| search-01 | eu-west | Healthy | 52% | 70% | 27d 19h |
Double-click or press Enter on a cell. Try an empty name or a seat count of 0.
| Operations | |||
| Engineering | |||
| Design | |||
| Support | |||
| Finance | |||
| Engineering | |||
| Marketing | |||
| Design |
Reload shows skeleton rows with aria-busy; the second grid has no rows.
Emma Wilsonemma@example.com | pay_1N3xBR | Succeeded | $2,450.00 | $73.50 |
Isabella Nguyenisabella@example.com | pay_1N3xMR | Succeeded | $299.00 | $8.97 |
Jackson Leejackson@example.com | pay_1N3xBL | Processing | $39.00 | $1.43 |
Liam Johnsonliam@example.com | pay_1N3xCQ | Refunded | $150.00 | $4.50 |
Olivia Martinolivia@example.com | pay_1N3x7K | Succeeded | $1,999.00 | $59.97 |
No payments yet Payments appear here as customers check out. | |||||
collapse="stack" turns rows into cards on phones: first column title, second subtitle, the rest as label and value. Resize under 640px to see it.
| Actions | |||||||
|---|---|---|---|---|---|---|---|
Emma Wilsonemma@example.com | pay_1N3xBR | Succeeded | $2,450.00 | $73.50 | Visa 4242 | ||
Isabella Nguyenisabella@example.com | pay_1N3xMR | Succeeded | $299.00 | $8.97 | Visa 1881 | ||
Jackson Leejackson@example.com | pay_1N3xBL | Processing | $39.00 | $1.43 | Mastercard 5555 | ||
Liam Johnsonliam@example.com | pay_1N3xCQ | Refunded | $150.00 | $4.50 | Mastercard 6789 | ||
Olivia Martinolivia@example.com | pay_1N3x7K | Succeeded | $1,999.00 | $59.97 | Visa 0005 | ||
Sofia Davissofia@example.com | pay_1N3xBP | Succeeded | $450.00 | $13.50 | Amex 8431 | ||
William Kimwill@example.com | pay_1N3xAN | Failed | $99.00 | $3.17 | Amex 1005 | ||
Noah Patelnoah@example.com | pay_1N3xDZ | Succeeded | $720.00 | $21.60 | Visa 4012 | ||
Ava Brooksava@example.com | pay_1N3xEF | Processing | $64.00 | $2.22 | Visa 7777 | ||
Lucas Reyeslucas@example.com | pay_1N3xGH | Succeeded | $1,280.00 | $38.40 | Mastercard 4444 |
Tap or press Enter on a row to open it.
Select rows, then type a name that matches nothing: the selection clears with the rows and the bar goes away.
Emma Wilsonemma@example.com | pay_1N3xBR | Succeeded | $2,450.00 | $73.50 | |
Isabella Nguyenisabella@example.com | pay_1N3xMR | Succeeded | $299.00 | $8.97 | |
Jackson Leejackson@example.com | pay_1N3xBL | Processing | $39.00 | $1.43 | |
Liam Johnsonliam@example.com | pay_1N3xCQ | Refunded | $150.00 | $4.50 | |
Olivia Martinolivia@example.com | pay_1N3x7K | Succeeded | $1,999.00 | $59.97 | |
Sofia Davissofia@example.com | pay_1N3xBP | Succeeded | $450.00 | $13.50 | |
William Kimwill@example.com | pay_1N3xAN | Failed | $99.00 | $3.17 | |
Noah Patelnoah@example.com | pay_1N3xDZ | Succeeded | $720.00 | $21.60 | |
Ava Brooksava@example.com | pay_1N3xEF | Processing | $64.00 | $2.22 | |
Lucas Reyeslucas@example.com | pay_1N3xGH | Succeeded | $1,280.00 | $38.40 |
columnVisibility and onColumnVisibilityChange keep one columns array.
| Actions | ||||
|---|---|---|---|---|
Emma Wilsonemma@example.com | pay_1N3xBR | Succeeded | $2,450.00 | |
Isabella Nguyenisabella@example.com | pay_1N3xMR | Succeeded | $299.00 | |
Jackson Leejackson@example.com | pay_1N3xBL | Processing | $39.00 | |
Liam Johnsonliam@example.com | pay_1N3xCQ | Refunded | $150.00 | |
Olivia Martinolivia@example.com | pay_1N3x7K | Succeeded | $1,999.00 |
Only the rows in view are in the DOM. Sorting runs over all 5,000.
AD Ada Dalton | ada.dalton1@example.com | Owner | Operations | Active | 1 | |
BK Ben Kowal | ben.kowal2@example.com | Viewer | Marketing | Active | 2 | |
CB Cleo Bishop | cleo.bishop3@example.com | Editor | Finance | Active | 3 | |
DI Dev Ito | dev.ito4@example.com | Admin | Support | Invited | 4 | |
EP Esme Petrov | esme.petrov5@example.com | Owner | Design | Suspended | 5 | |
FG Finn Gomez | finn.gomez6@example.com | Viewer | Engineering | Active | 1 | |
GN Gia Novak | gia.novak7@example.com | Editor | Operations | Active | 2 | |
HE Hugo Eriksen | hugo.eriksen8@example.com | Admin | Marketing | Active | 3 | |
IL Iris Lopez | iris.lopez9@example.com | Owner | Finance | Invited | 4 | |
JC Jude Castillo | jude.castillo10@example.com | Viewer | Support | Suspended | 5 | |
KJ Kai Jensen | kai.jensen11@example.com | Editor | Design | Active | 1 | |
LA Lena Alder | lena.alder12@example.com | Admin | Engineering | Active | 2 | |
MH Milo Hayes | milo.hayes13@example.com | Owner | Operations | Active | 3 | |
NO Nora Osei | nora.osei14@example.com | Viewer | Marketing | Invited | 4 | |
OF Omar Fischer | omar.fischer15@example.com | Editor | Finance | Suspended | 5 | |
PM Pia Moreau | pia.moreau16@example.com | Admin | Support | Active | 1 | |
QD Quinn Dalton | quinn.dalton17@example.com | Owner | Design | Active | 2 | |
RK Rafa Kowal | rafa.kowal18@example.com | Viewer | Engineering | Active | 3 | |
SB Sana Bishop | sana.bishop19@example.com | Editor | Operations | Invited | 4 | |
TI Tomas Ito | tomas.ito20@example.com | Admin | Marketing | Suspended | 5 | |
AP Ada Petrov | ada.petrov21@example.com | Owner | Finance | Active | 1 | |
BG Ben Gomez | ben.gomez22@example.com | Viewer | Support | Active | 2 |
size sm, lg, and a paged footer.
| Select | |||||
|---|---|---|---|---|---|
Emma Wilsonemma@example.com | pay_1N3xBR | Succeeded | $2,450.00 | $73.50 | |
Isabella Nguyenisabella@example.com | pay_1N3xMR | Succeeded | $299.00 | $8.97 | |
Jackson Leejackson@example.com | pay_1N3xBL | Processing | $39.00 | $1.43 | |
Liam Johnsonliam@example.com | pay_1N3xCQ | Refunded | $150.00 | $4.50 |