Shadcn Data Table
Explore the collection of awesome Shadcn Data Table Components, featuring 13 data table variants designed for customizable, and interactive UI elements built with React and Tailwind CSS.
Have any suggestions for Data Table variants?
Join our Discord community and share your ideas to help us improve and expand our component variants!
Built using TanStack Table. For detailed instructions, please refer to this documentation.
| Name | Status | Amount | ||
|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | |
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | |
Milton Rose | processing | rose96@gmail.com | $655.00 | |
Silas Ryan | success | silas22@gmail.com | $874.00 | |
Ben Tenison | failed | bent@hotmail.com | $541.00 |
Default data table
| Name | Status | Amount | ||
|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | |
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | |
Milton Rose | processing | rose96@gmail.com | $655.00 | |
Silas Ryan | success | silas22@gmail.com | $874.00 | |
Ben Tenison | failed | bent@hotmail.com | $541.00 |
Density data table Shadcn UI Blocks
| Name | Status | Amount | ||
|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | |
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | |
Milton Rose | processing | rose96@gmail.com | $655.00 | |
Silas Ryan | success | silas22@gmail.com | $874.00 | |
Ben Tenison | failed | bent@hotmail.com | $541.00 |
Data table column visibility
| Product | Price | Availability | Rating | |
|---|---|---|---|---|
BC Black Chair | $159 | In Stock | 3.9 | |
NJ Nike Jordan | $599 | Limited | 4.4 | |
O7P OnePlus 7 Pro | $1299 | Out of Stock | 3.5 | |
NS Nintendo Switch | $499 | In Stock | 4.9 | |
AMM Apple magic mouse | $970 | Limited | 4.1 | |
AW Apple watch | $1500 | Limited | 3.1 | |
CGS Casio G-Shock | $194 | Out of Stock | 1.5 | |
RBS RayBan Sunglasses | $199 | Out of Stock | 2.4 |
Data table with column filter
Name | Status | Email | Amount | |
|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | |
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | |
Milton Rose | processing | rose96@gmail.com | $655.00 | |
Silas Ryan | success | silas22@gmail.com | $874.00 | |
Ben Tenison | failed | bent@hotmail.com | $541.00 |
Data table with sortable column
Name | Status | Email | Amount | Due Date |
|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | 2023-10-01 |
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | 2023-10-01 |
Milton Rose | processing | rose96@gmail.com | $655.00 | 2023-10-01 |
Silas Ryan | success | silas22@gmail.com | $874.00 | 2023-10-01 |
Ben Tenison | failed | bent@hotmail.com | $541.00 | 2023-10-01 |
Data table with resizable columns
Product Name | Category | Stock Quantity | Price | Supplier | Discontinued |
|---|---|---|---|---|---|
Apple iPhone 14 | Smartphones | 4550 | $1,500.00 | Dixon Electronics | no |
Metal frame table | Furniture | 150 | $540.00 | Milton Furniture | no |
Xiaomi A series | electronics | 1500 | $2,200.00 | Xiaomi Electronics | yes |
RC Monster Truck | Toys | 10500 | $250.00 | Lego Toys | no |
Glass Water Bottle | Kitchenware | 5503 | $69.00 | Kitchen Essentials | no |
BenQ Monitor 24 | Electronics | 600 | $1,000.00 | BenQ Electronics | yes |
Data table with pinnable columns
First Name | Last Name | Job Title | Department | Date of Birth | Hire Date | Salary |
|---|---|---|---|---|---|---|
John | Doe | Software Engineer | Engineering | 1990-01-01 | 2020-01-15 | $80,000.00 |
Jane | Smith | Product Manager | Product | 1985-05-20 | 2019-03-10 | $95,000.00 |
Alice | Johnson | UX Designer | Design | 1992-07-30 | 2021-06-01 | $70,000.00 |
Bob | Brown | Data Analyst | Analytics | 1988-11-15 | 2018-09-20 | $75,000.00 |
Data table with draggable columns
| Team Name | Department | Location | Next Milestone | Budget | ||
|---|---|---|---|---|---|---|
Digital Marketing | Marketing | London | Launch New Campaign | $30,000.00 | ||
Product Development | Engineering | San Francisco | Release Version 2.0 | $50,000.00 | ||
Sales Team | Sales | New York | Close Q3 Deals | $40,000.00 |
Data table with expanding sub-rows made
Product Name | Price | Availability | |
|---|---|---|---|
| No results. | |||
1-0 of 0
Paginated data table
| Name | Status | Amount | ||
|---|---|---|---|---|
Shang Chain | success | shang07@yahoo.com | $699.00 | |
Kevin Lincoln | success | kevinli09@gmail.com | $242.00 | |
Milton Rose | processing | rose96@gmail.com | $655.00 | |
Silas Ryan | success | silas22@gmail.com | $874.00 | |
Ben Tenison | failed | bent@hotmail.com | $541.00 | |
Alice Cooper | processing | alice@email.com | $321.00 | |
Bob Johnson | success | bob.j@company.com | $789.00 | |
Carol Williams | processing | carol.w@domain.org | $456.00 |
Data table with export functionality (CSV, Excel, JSON)
First Name | Last Name | Email | Status | Progress | |
|---|---|---|---|---|---|
% | |||||
% | |||||
% | |||||
% | |||||
% |
5 rows total
Editable data table - Click on cells to edit values