Basic Tables
Default Table
Basic table with default styling
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Striped Table
Use .table-striped for zebra striping
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Hoverable Table
Use .table-hover for hover states
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Bordered Table
Use .table-bordered for borders on all sides
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Table Sizes
Small Table
Use .table-sm for compact spacing
| # | Name | Position | Office | Salary |
|---|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh | ₹320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | ₹170,750 |
| 3 | Ashton Cox | Junior Technical Author | San Francisco | ₹86,000 |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh | ₹433,060 |
| 5 | Airi Satou | Accountant | Tokyo | ₹162,700 |
| 6 | Brielle Williamson | Integration Specialist | New York | ₹372,000 |
Borderless Table
Use .table-borderless for no borders
| # | Name | Position | Office | Salary |
|---|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh | ₹320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | ₹170,750 |
| 3 | Ashton Cox | Junior Technical Author | San Francisco | ₹86,000 |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh | ₹433,060 |
| 5 | Airi Satou | Accountant | Tokyo | ₹162,700 |
| 6 | Brielle Williamson | Integration Specialist | New York | ₹372,000 |
Table with User Cells
User Management Table
Table with avatars, status badges, and action buttons
| User | Role | Status | Last Active | Actions |
|---|---|---|---|---|
Sarah Johnson
sales.swarajyainfotech@gmail.com
|
Admin | Active | 2 min ago |
|
Michael Chen
sales.swarajyainfotech@gmail.com
|
Editor | Active | 15 min ago |
|
Emily Davis
sales.swarajyainfotech@gmail.com
|
Viewer | Pending | 1 hour ago |
|
David Wilson
sales.swarajyainfotech@gmail.com
|
Editor | Inactive | 3 days ago |
|
Lisa Anderson
sales.swarajyainfotech@gmail.com
|
Admin | Active | Just now |
|
Contextual Classes
Row Colors
Contextual classes for table rows
| Class | Description | Status |
|---|---|---|
.table-primary |
Primary row style | Info |
.table-success |
Success row style | Approved |
.table-warning |
Warning row style | Pending |
.table-danger |
Danger row style | Rejected |
.table-info |
Info row style | Review |
.table-light |
Light row style | Draft |
.table-dark |
Dark row style | Archived |
Dark Table
Use .table-dark for dark theme
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Order Management Table
Recent Orders
Manage and track customer orders
|
|
Order ID | Customer | Product | Date | Amount | Status | Actions |
|---|---|---|---|---|---|---|---|
|
|
#ORD-7245 |
James Rodriguez
|
MacBook Pro 16" | Jan 15, 2026 | ₹2,499.00 | Delivered |
|
|
|
#ORD-7244 |
Emma Thompson
|
iPhone 15 Pro Max | Jan 14, 2026 | ₹1,199.00 | Processing |
|
|
|
#ORD-7243 |
Robert Kim
|
AirPods Pro 2 | Jan 14, 2026 | ₹249.00 | Shipped |
|
|
|
#ORD-7242 |
Sophia Martinez
|
Apple Watch Ultra 2 | Jan 13, 2026 | ₹799.00 | Cancelled |
|
|
|
#ORD-7241 |
William Brown
|
iPad Pro 12.9" | Jan 12, 2026 | ₹1,099.00 | Delivered |
|
Table with Progress & Nested Data
Project Progress Table
Table showing projects with progress indicators
| Project | Team | Progress | Deadline | Budget | Status |
|---|---|---|---|---|---|
|
Website Redesign
UI/UX, Development
|
|
|
Feb 28, 2026 | ₹45,000 | On Track |
|
Mobile App Development
iOS, Android
|
|
|
Apr 15, 2026 | ₹120,000 | At Risk |
|
Cloud Migration
Infrastructure
|
|
|
Jan 10, 2026 | ₹75,000 | Completed |
|
Data Analytics Platform
Backend, ML
|
|
|
Jun 30, 2026 | ₹200,000 | In Progress |
|
Security Audit
Security
|
|
|
Mar 15, 2026 | ₹35,000 | Delayed |
Table with Caption & Footer
Table with Caption
Use <caption> for table descriptions
| Name | Department | Salary |
|---|---|---|
| John Doe | Engineering | ₹85,000 |
| Jane Smith | Marketing | ₹72,000 |
| Bob Johnson | Sales | ₹68,000 |
| Alice Brown | HR | ₹65,000 |
Table with Footer
Use <tfoot> for summaries
| Product | Qty | Price | Total |
|---|---|---|---|
| Product A | 2 | ₹50.00 | ₹100.00 |
| Product B | 1 | ₹75.00 | ₹75.00 |
| Product C | 3 | ₹25.00 | ₹75.00 |
| Subtotal: | ₹250.00 | ||
| Tax (10%): | ₹25.00 | ||
| Grand Total: | ₹275.00 | ||
Empty State
Empty Table State
Display when no data is available
| Name | Status | Actions | |
|---|---|---|---|
No data availableThere are no records to display yet. |
|||
Nested Table
Table within a table
| Category | Items | ||||||
|---|---|---|---|---|---|---|---|
| Electronics |
|
||||||
| Clothing |
|