Core
Data Table
Interactive table component with sorting, filtering, and pagination features
Datatable 1
This design block displays a user management table with columns for user information, roles, plans, billing methods, and account status. It includes a filter for role, plan, and status, as well as a search option for users. The table shows user details such as name, email, role (e.g., Admin, Subscriber, Author), payment plan, billing method (e.g., Manual Cash, Auto Debit), and status (e.g., Active, Pending, Incomplete, Failed). The actions section includes options to delete, view, or edit each user.
Filter
|
|
USER
|
ROLE
|
PLAN
|
BILLING
|
STATUS
|
Actions |
|---|---|---|---|---|---|---|
|
|
Jordan Stevenson
jordan.stevenson
|
Admin |
Enterprise | Manual Cash | Pending |
|
|
|
Olivia Thompson
olivia.thompson
|
Subscriber |
Company | Auto Debit | Active |
|
|
|
Ethan Parker
ethan.parker
|
Author |
Team | Online Payment | Incomplate |
|
|
|
Ava Green
ava.green
|
Maintainer |
Enterprise | Manual Paypal | Active |
|
|
|
Liam Walker
liam.walker
|
Editor |
Company | Manual Cash | Failed |
|
|
|
Isla Adams
isla.adams
|
Author |
Team | Online Payment | Active |
|
|
|
Mason Clark
mason.clark
|
Subscriber |
Company | Manual Paypal | Pending |
|
|
|
Lucas Scott
lucas.scott
|
Maintainer |
Team | Online Payment | Active |
|
|
|
Mia Taylor
mia.taylor
|
Editor |
Enterprise | Manual Paypal | Pending |
|
|
|
Noah King
noah.king
|
Author |
Team | Auto Debit | Active |
|
|
|
Mia Lewis
mia.lewis
|
Admin |
Enterprise | Manual Cash | Pending |
|
|
|
Harper Taylor
harper.taylor
|
Subscriber |
Company | Auto Debit | Active |
|
|
|
Sophie Harris
sophie.harris
|
Author |
Team | Online Payment | Incomplate |
|
|
|
Ethan Wilson
ethan.wilson
|
Maintainer |
Company | Manual Paypal | Active |
|
|
|
Alexander Scott
alexander.scott
|
Editor |
Team | Manual Cash | Failed |
|
|
|
Zoe Morgan
zoe.morgan
|
Author |
Enterprise | Auto Debit | Active |
|
|
|
Scarlett Davis
scarlett.davis
|
Editor |
Company | Online Payment | Incomplate |
|
Datatable 2
This design block features an order management table showing a list of orders with customer details, payment status, delivery status, and payment method. The orders are labeled with unique order numbers and sorted by date. The status of each order (e.g., 'Delivered,' 'Dispatched,' 'Out for Delivery') is highlighted with colored indicators. Payment status is also displayed, showing 'Paid,' 'Failed,' 'Pending,' and 'Canceled.' Action buttons allow for further interactions with each order, such as viewing or editing.
|
|
ORDER
|
DATE
|
CUSTOMERS
|
PAYMENT
|
STATUS
|
METHOD
|
Actions |
|---|---|---|---|---|---|---|---|
|
|
#6542 | Feb 15, 2025, 10:21 |
Jordan Stevenson
jordanstevenson10@yahoo.com
|
Failed
|
Delivered |
...2654
|
|
|
|
#7834 | Feb 15, 2025, 10:21 |
Liam Johnson
liamjohnson4@example.com
|
Failed
|
Dispatched |
...2654
|
|
|
|
#2973 | Feb 15, 2025, 10:21 |
Emma Davis
emmadavis12@example.com
|
Paid
|
Out for Delivery |
...@gmail.com
|
|
|
|
#4159 | Feb 15, 2025, 10:21 |
Oliver Brown
oliverbrown18@example.com
|
Pending
|
Delivered |
...2654
|
|
|
|
#6542 | Feb 15, 2025, 10:21 |
Ava Harris
avaharris22@example.com
|
Canceled
|
Dispatched |
...@gmail.com
|
|
|
|
#3250 | Feb 15, 2025, 10:21 |
Mia Walker
miawalker34@example.com
|
Pending
|
Delivered |
...2654
|
|
|
|
#2368 | Feb 15, 2025, 10:21 |
Noah Harris
noahharris8@example.com
|
Failed
|
Out for Delivery |
...@gmail.com
|
|
|
|
#8745 | Feb 15, 2025, 10:21 |
Sophia Taylor
sophiataylor3@example.com
|
Canceled
|
Dispatched |
...2654
|
|
|
|
#4725 | Feb 15, 2025, 10:21 |
Ava Richardson
ava.richardson3@gmail.com
|
Failed
|
Dispatched |
...4725
|
|
|
|
#3158 | Feb 15, 2025, 10:21 |
Benjamin Foster
benjamin.foster@hotmail.com
|
Paid
|
Delivered |
...@gmail.com
|
|
|
|
#1903 | Feb 15, 2025, 10:21 |
Sarah Johnson
sarah.johnson23@gmail.com
|
Pending
|
Out for Delivered |
...1903
|
|
|
|
#8214 | Feb 15, 2025, 10:21 |
Emily Taylor
emily.taylor@gmail.com
|
Canceled
|
Dispatched |
...@gmail.com
|
|
|
|
#6073 | Feb 15, 2025, 10:21 |
Lucas Green
lucas.green@gmail.com
|
Paid
|
Delivered |
...6073
|
|
|
|
#3512 | Feb 15, 2025, 10:21 |
Mia Wright
mia.wright@gmail.com
|
Failed
|
Dispatched |
...@gmail.com
|
|
|
|
#9834 | Feb 15, 2025, 10:21 |
Noah Lee
noah.lee@gmail.com
|
Pending
|
Out for Delivered |
...9834
|
|
|
|
#2597 | Feb 15, 2025, 10:21 |
Chloe Brooks
chloe.brooks@gmail.com
|
Canceled
|
Dispatched |
...@gmail.com
|
|
|
|
#6458 | Feb 15, 2025, 10:21 |
Jack Simmons
jack.simmons@hotmail.com
|
Pending
|
Out for Delivered |
...6458
|
|
|
|
#1432 | Feb 15, 2025, 10:21 |
Liam Martinez
liam.martinez@gmail.com
|
Paid
|
Delivered |
...@gmail.com
|
|
Datatable 3
This design block features an invoice management table displaying information about different clients, their total amounts, balance status, and invoice status. Each entry shows the order number, customer name, total amount, issue date, balance remaining, and the status of the payment (e.g., 'Paid,' 'Pending,' 'Failed'). Action buttons are available to manage each invoice, such as deleting or viewing details. A filter option is provided for sorting invoices based on status.
|
|
#
|
STATUS
|
CLIENT
|
TOTAL
|
ISSUED DATE
|
BALANCE
|
Actions |
|---|---|---|---|---|---|---|---|
|
|
#6542 |
Paid Balance: 0 Due Date: 12/15/2020 |
Jordan Stevenson
jordanstevenson10@yahoo.com
|
$4520 | 22 Jan 2025 | PAID |
|
|
|
#9473 |
Draft Balance: $120 Due Date: 25 Jan 2025 |
Olivia Peterson
olivia.peterson@example.com
|
$120 | 25 Jan 2025 | -$205 |
|
|
|
#5631 |
Past Due Balance: $1850 Due Date: 01 Feb 2025 |
Liam Johnson
liam.johnson@mail.com
|
$1850 | 01 Feb 2025 | -$205 |
|
|
|
#2571 |
Paid Balance: $755 Due Date: 26 Jan 2025 |
Sophia Lee
sophia.lee@example.com
|
$755 | 26 Jan 2025 | PAID |
|
|
|
#9921 |
Partial Payment Balance: $430 Due Date: 30 Jan 2025 |
Ethan Harris
ethan.harris@example.com
|
$430 | 30 Jan 2025 | $666 |
|
|
|
#2167 |
Downloaded Balance: 0 Due Date: 20 Jan 2025 |
Mia Davis
mia.davis@example.com
|
$1200 | 20 Jan 2025 | PAID |
|
|
|
#7392 |
Past Due Balance: $990 Due Date: 15 Jan 2025 |
Noah Thomas
noah.thomas@example.com
|
$990 | 15 Jan 2025 | $400 |
|
|
|
#8123 |
Sent Balance: $675 Due Date: 17 Jan 2025 |
Amelia Clark
amelia.clark@example.com
|
$675 | 17 Jan 2025 | PAID |
|
|
|
#1920 |
Downloaded Balance: 0 Due Date: 10 Feb 2025 |
Lucas Brown
lucas.brown@example.com
|
$3100 | 10 Feb 2025 | PAID |
|
|
|
#3726 |
Partial Payment Balance: $450 Due Date: 05 Feb 2025 |
Isabella Wilson
isabella.wilson@example.com
|
$450 | 05 Feb 2025 | -$153 |
|
|
|
#5842 |
Past Due Balance: $1325 Due Date: 20 Feb 2025 |
Ethan Thomas
ethan.thomas@example.com
|
$1325 | 20 Feb 2025 | -$550 |
|
|
|
#6721 |
Sent Balance: $215 Due Date: 18 Feb 2025 |
Oliver Lee
oliver.lee@example.com
|
$215 | 18 Feb 2025 | PAID |
|
|
|
#1832 |
Downloaded Balance: 0 Due Date: 22 Feb 2025 |
Eleanor Scott
eleanor.scott@example.com
|
$2500 | 22 Feb 2025 | PAID |
|
|
|
#8364 |
Draft Balance: $220 Due Date: 24 Feb 2025 |
Mason Green
mason.green@example.com
|
$220 | 24 Feb 2025 | -$459 |
|
|
|
#9910 |
Past Due Balance: $4500 Due Date: 28 Feb 2025 |
Charlotte Harris
charlotte.harris@example.com
|
$4500 | 28 Feb 2025 | $600 |
|
|
|
#7842 |
Sent Balance: $1250 Due Date: 05 Mar 2025 |
James King
james.king@example.com
|
$1250 | 05 Mar 2025 | PAID |
|
|
|
#9423 |
Partial Payment Balance: $375 Due Date: 10 Mar 2025 |
Avery Taylor
avery.taylor@example.com
|
$375 | 10 Mar 2025 | $361 |
|
Datatable 4
This design block displays a product management table showing a list of products with details such as product name, category, SKU, price, quantity, and status. Each product's stock availability is indicated with a toggle, and the product status is color-coded (e.g., 'Published' in green, 'Scheduled' in orange, 'Inactive' in red). The table allows the user to filter products by status and category, and provides options to edit or manage each product.
Filter
|
|
PRODUCT
|
CATEGORY
|
STOCK
|
SKU
|
PRICE
|
QTY
|
STATUS
|
Actions |
|---|---|---|---|---|---|---|---|---|
|
|
Samsung Galaxy S21
Samsung
|
Electronics |
34782 | $899 | 54 | Publish |
|
|
|
|
iPhone 12
Apple
|
Electronics |
47382 | $999 | 78 | Scheduled |
|
|
|
|
Sofa Set
Ikea
|
Home Decor |
29384 | $550 | 12 | Inactive |
|
|
|
|
Nike Air Max
Nike
|
Shoes |
52834 | $120 | 350 | Publish |
|
|
|
|
Sony WH-1000XM4
Sony
|
Electronics |
63728 | $350 | 24 | Scheduled |
|
|
|
|
MacBook Pro 16"
Apple
|
Electronics |
74892 | $2400 | 6 | Inactive |
|
|
|
|
AirPods Pro
Apple
|
Electronics |
84902 | $249 | 110 | Publish |
|
|
|
|
Ray-Ban Sunglasses
Ray-Ban
|
Accessories |
94792 | $180 | 56 | Publish |
|
|
|
|
Xiaomi Mi 11
Xiaomi
|
Electronics |
23845 | $699 | 45 | Publish |
|
|
|
|
Dell Inspiron 15
Dell
|
Electronics |
47391 | $749 | 89 | Scheduled |
|
|
|
|
Kitchen Table
Ikea
|
Home Decor |
47283 | $249 | 24 | Inactive |
|
|
|
|
Adidas UltraBoost
Adidas
|
Shoes |
38472 | $179 | 120 | Publish |
|
|
|
|
Huawei MateBook
Huawei
|
Electronics |
69287 | $950 | 33 | Scheduled |
|
|
|
|
Fossil Watch
Fossil
|
Accessories |
82072 | $150 | 68 | Publish |
|
|
|
|
Google Pixel 6
Google
|
Electronics |
82937 | $599 | 63 | Publish |
|
|
|
|
HP Spectre x360
HP
|
Electronics |
93848 | $1499 | 40 | Scheduled |
|
|
|
|
Coffee Table
Ashley Furniture
|
Home Decor |
28372 | $199 | 18 | Publish |
|
|
|
|
Nike Running Shoes
Nike
|
Shoes |
38473 | $120 | 150 | Scheduled |
|
|
|
|
Sony TV 55 Inch
Sony
|
Electronics |
59283 | $950 | 20 | Inactive |
|
|
|
|
Apple Watch Series 7
Apple
|
Accessories |
63837 | $400 | 50 | Publish |
|
Datatable 5
A table displaying the status of on-route vehicles, with columns for location, starting and ending routes, warnings, and progress. Each vehicle entry includes a progress bar and relevant warnings, such as 'No Warnings,' 'ECU Not Responding,' and 'Temperature Not Optimal.' The table also includes pagination controls to navigate through the entries.
On route vehicles
|
|
LOCATION
|
STARING ROUTE
|
ENDING ROUTE
|
WARNING
|
PROGRESS
|
|---|---|---|---|---|---|
|
|
|
Fort Lauderdale, USA | Germany | No Warnings |
|
|
|
|
Schaumburg, USA | Germany | Ecu Not Responding |
|
|
|
|
Limoges, France | Italy | Temperature Not Optimal |
|
|
|
|
Fort Wayne, USA | Mülheim an der Ruhr, Germany | Fuel Problems |
|
|
|
|
Barcelona, Spain | Rome, Italy | No Warnings |
|
|
|
|
London, UK | Amsterdam, Netherlands | Engine Malfunction |
|
|
|
|
Stockholm, Sweden | Oslo, Norway | No Warnings |
|
|
|
|
Vienna, Austria | Prague, Czech Republic | Low Tire Pressure |
|
|
|
|
Toronto, Canada | Montreal, Canada | No Warnings |
|
|
|
|
Sydney, Australia | Melbourne, Australia | GPS Signal Lost |
|
|
|
|
Brussels, Belgium | Luxembourg City, Luxembourg | Brake System Alert |
|
|
|
|
Zurich, Switzerland | Milan, Italy | No Warnings |
|
|
|
|
Dublin, Ireland | Edinburgh, Scotland | Weather Delay |
|
|
|
|
Helsinki, Finland | Riga, Latvia | Communication Error |
|
|
|
|
Lisbon, Portugal | Madrid, Spain | No Warnings |
|
|
|
|
Warsaw, Poland | Budapest, Hungary | Speed Limit Exceeded |
|
|
|
|
Copenhagen, Denmark | Stockholm, Sweden | No Warnings |
|
|
|
|
Athens, Greece | Sofia, Bulgaria | Cargo Shift Detected |
|
Datatable 6
A course progress table displaying the names of courses, total time spent, progress percentages, and status for each course. The status is shown with icons indicating participants, lessons completed, and videos watched. Each course includes a progress bar for the course's completion, with corresponding numerical values. Pagination controls are also included to navigate through multiple entries.
Course you are taking
|
|
COURSE NAME
|
TIME
|
PROGRESS
|
STATUS |
|---|---|---|---|---|
|
|
James Alexander
|
17h 34m |
|
183
120
83
|
|
|
UI/UX Design
|
19h 17m |
|
115
123
57
|
|
|
React Native
|
16h 16m |
|
102
100
49
|
|
|
Michael Thomas
|
15h 49m |
|
132
112
66
|
|
|
Basic Fundamentals
|
12h 42m |
|
152
142
76
|
|
|
JavaScript Fundamentals
|
22h 15m |
|
298
180
92
|
|
|
Python Programming
|
18h 22m |
|
187
165
89
|
|
|
Vue.js Development
|
14h 28m |
|
144
98
52
|
|
|
Node.js Backend
|
21h 05m |
|
267
189
78
|
|
|
Database Design
|
16h 33m |
|
203
156
94
|
|
|
Docker & DevOps
|
13h 47m |
|
178
134
67
|
|
|
TypeScript Mastery
|
20h 12m |
|
312
201
105
|
|
|
Advanced CSS
|
11h 55m |
|
89
76
43
|