Table
Display structured data using rows and columns.
Import
import { Table } from "@shivms/ui";Basic
| ID | Name | Role |
| 1 | Aditya | Developer |
| 2 | Rahul | Designer |
| 3 | Priya | Manager |
Striped
| Product | Price |
| Laptop | $1200 |
| Mouse | $30 |
| Keyboard | $90 |
Hover
| Employee | Department |
| John | Sales |
| Emma | Support |
| David | HR |
Compact
| Code | Status |
| ORD001 | Completed |
| ORD002 | Pending |
Bordered
| City | Country |
| Mumbai | India |
| Tokyo | Japan |
| London | United Kingdom |
Small
| ID | Product | Stock |
| 101 | Keyboard | 42 |
| 102 | Mouse | 85 |
| 103 | Monitor | 12 |
Large
| Name | Role | |
| Aditya | aditya@example.com | Admin |
| Rahul | rahul@example.com | Developer |
| Priya | priya@example.com | Designer |
Rounded
| Invoice | Customer | Total |
| INV001 | John | $420 |
| INV002 | Emma | $180 |
| INV003 | David | $760 |
Pill Radius
| Task | Priority | Status |
| Documentation | High | Completed |
| Testing | Medium | In Progress |
| Deployment | Low | Pending |
Table Footer
| Product | Quantity | Price |
| Laptop | 2 | $2400 |
| Mouse | 5 | $150 |
| Keyboard | 3 | $270 |
| Total | 10 | $2820 |
Sticky Header
| ID | Name | Department |
| 001 | Aditya | Development |
| 002 | Rahul | Design |
| 003 | Priya | Marketing |
| 004 | Neha | Support |
| 005 | Amit | Finance |
| 006 | Karan | HR |
| 007 | Sneha | QA |
| 008 | Vikram | Operations |
| 009 | Anjali | Sales |
| 010 | Rohan | Management |
Cell Alignment
| Product | Stock | Price |
| Laptop | 12 | $1200 |
| Monitor | 8 | $350 |
| Keyboard | 25 | $90 |
Column Span
| ID | Name | Department |
| 1 | Aditya | Development |
| No additional employee records available. | ||
Row Span
| Department | Employee |
| Development | Aditya |
| Rahul | |
| Design | Priya |
Single Selection
| Name | Role |
| Aditya | Developer |
| Rahul | Designer |
| Priya | Manager |
Multiple Selection
| Name | Department |
| John | Sales |
| Emma | Support |
| David | Finance |
| Sophia | Marketing |
Checkbox Selection
| Product | Stock | |
| Laptop | 12 | |
| Monitor | 8 | |
| Keyboard | 20 |
Basic Sorting
| Name | Role | Department |
| Aditya | Developer | Engineering |
| Rahul | Designer | Design |
| Priya | Manager | Operations |
Ascending Sort
| Product | Price |
| Keyboard | $90 |
| Laptop | $1200 |
| Monitor | $350 |
Descending Sort
| Employee | Salary |
| Emma | $8,500 |
| John | $7,800 |
| David | $6,900 |
Basic Filter
| Name | Role | Department |
| Aditya | Developer | Engineering |
| Rahul | Designer | Design |
| Priya | Manager | Operations |
Status Filter
| Order | Status | Customer |
| #1001 | Completed | John |
| #1002 | Pending | Emma |
| #1003 | Cancelled | David |
Multiple Filters
| Product | Category | Stock |
| Laptop | Electronics | 12 |
| Keyboard | Accessories | 45 |
| Monitor | Electronics | 8 |
Basic Search
| Name | Role | Department |
| Aditya | Developer | Engineering |
| Rahul | Designer | Design |
| Priya | Manager | Operations |
Search with Placeholder
| Name | Role | |
| John | john@example.com | Developer |
| Emma | emma@example.com | Designer |
| David | david@example.com | Manager |
Search with Empty State
| Product | Category | Price |
| No records found. | ||
Basic Pagination
| ID | Name | Department |
| 1 | Aditya | Engineering |
| 2 | Rahul | Design |
| 3 | Priya | Operations |
Page Size
| Product | Category | Stock |
| Laptop | Electronics | 15 |
| Monitor | Electronics | 8 |
| Keyboard | Accessories | 42 |
Controlled Pagination
| Order | Customer | Status |
| #1021 | John | Completed |
| #1022 | Emma | Pending |
| #1023 | David | Processing |
Basic Toolbar
| Name | Role | Department |
| Aditya | Developer | Engineering |
| Rahul | Designer | Design |
| Priya | Manager | Operations |
Search Toolbar
| Product | Category | Price |
| Laptop | Electronics | $1200 |
| Monitor | Electronics | $350 |
| Keyboard | Accessories | $90 |
Bulk Actions
| Name | Status |
| John | Active |
| Emma | Active |
| David | Inactive |
Loading
| Name | Role | Department |
| Loading... | ||
Empty
| ID | Name | Status |
| No records found. | ||
Loading with Placeholder
| Product | Category | Price |
| Loading... | ||
Custom Empty State
| Product | Category | Stock |
| No records found. | ||
Basic Summary
| Product | Quantity | Amount |
| Laptop | 2 | $2,400 |
| Monitor | 4 | $1,400 |
| Keyboard | 6 | $540 |
| Total | 12 | $4,340 |
Average Values
| Employee | Tasks | Hours |
| Aditya | 18 | 42 |
| Rahul | 21 | 39 |
| Priya | 15 | 45 |
| Average | 18 | 42 |
Summary with Multiple Totals
| Category | Items | Revenue |
| Electronics | 24 | $12,500 |
| Accessories | 53 | $2,350 |
| Furniture | 8 | $4,900 |
| Total | 85 | $19,750 |
Sticky Header with Pagination
| ID | Name | Department |
| 001 | Aditya | Engineering |
| 002 | Rahul | Design |
| 003 | Priya | Operations |
| 004 | Neha | Support |
| 005 | Karan | Finance |
Interactive Data Table
| Name | Role | Department |
| Aditya | Developer | Engineering |
| Rahul | Designer | Design |
| Priya | Manager | Operations |
Dashboard Table
| Order | Customer | Status | Total |
| #1001 | John | Completed | $420 |
| #1002 | Emma | Pending | $185 |
| #1003 | David | Processing | $760 |
| Total Revenue | $1,365 | ||
Employee Management
| ID | Name | Department | Role | Status |
| EMP001 | Aditya | Engineering | Developer | Active |
| EMP002 | Rahul | Design | Designer | Active |
| EMP003 | Priya | Operations | Manager | On Leave |
Product Inventory
| SKU | Product | Category | Stock | Price |
| PRD001 | Laptop | Electronics | 15 | $1200 |
| PRD002 | Keyboard | Accessories | 42 | $90 |
| PRD003 | Monitor | Electronics | 8 | $350 |
| Total Stock | 65 | |||
Orders Dashboard
| Order | Customer | Status | Date | Total |
| #1021 | John | Completed | 01 Jul 2026 | $420 |
| #1022 | Emma | Pending | 30 Jun 2026 | $185 |
| #1023 | David | Processing | 29 Jun 2026 | $760 |