Table Blocks based on shadcn/ui
Tables are where most dashboards live and die. Build one badly and the whole app feels slow and cramped; build one well and people forgive a lot. These shadcn/ui table blocks give you the well-built version: sortable columns, row actions, status badges, pagination, and a header that does not wrap into a mess.
They are built on the shadcn/ui table and Tailwind, so the spacing, the hover rows, and the responsive behaviour are handled. Copy the code or install with one npx shadcn add command, then point it at your data, whether that is members, invoices, products, or crypto prices. Swap the columns and you have your screen.
Pick a table below close to your data, a member list, a transaction history, a product comparison, and start from a working table instead of fighting column widths from scratch.
Support tickets table with search, status filters, SLA badges, and priority indicators. Includes empty-state preview and action menu.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROSupport Tickets
Track SLA, priority, and response workflows in one place.
| Ticket | Customer | Status | SLA | Priority | Actions |
|---|---|---|---|---|---|
Billing failed on renewal SUP-1290 | Atlas Logistics | Open | 2h left | High | |
SSO connection error SUP-1284 | Northwind | Pending | 6h left | Medium | |
Webhook delays SUP-1279 | Cloudline | Open | 1h left | High | |
Invoice PDF missing SUP-1271 | VenturePoint | Resolved | Met | Low |
import SupportTicketsTable from "@/components/creative-tim/blocks/support-tickets-table"
export default function Page() {
return <SupportTicketsTable />
}
Advanced data table with saved views, column management, filters, density toggles, and pinned rows. Includes export and bulk selection.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROAdvanced Data Table
Saved views, column pinning, density, and export controls.
| Company | Owner | Plan | MRR | Renewal | Status | Actions | |
|---|---|---|---|---|---|---|---|
Atlas Logistics ACC-1290 | Emma Rodriguez | Enterprise | $12,400 | Mar 2, 2026 | Active | ||
Northwind ACC-1184 | Ken Adams | Growth | $7,200 | Mar 14, 2026 | At risk | ||
Cloudline ACC-1118 | Ava Chen | Scale | $9,680 | Apr 8, 2026 | Active |
import DataTableAdvanced from "@/components/creative-tim/blocks/data-table-advanced"
export default function Page() {
return <DataTableAdvanced />
}
Advanced product comparison table with laptop images, specifications grid, star ratings, reviews, and availability badges. Features contact section and add to cart buttons for each product.
Still undecided?
We are here to help you.
UltraLaptop Pro 15
$2,599
WorkStation Elite 14
$2,799
UltraElite 22
$2,899
Brand
UltraLaptop Pro 15
WorkStation Elite 14
UltraElite 22
Processor
Intel Core i7, 10th Gen
AMD Ryzen 9, 5900HX
Intel Core i9, 11th Gen
Battery Life
Up to 12 hours
Up to 8 hours
Up to 10 hours
Weight
1.8 kg
2.9 kg
1.5 kg
Warranty
2 Year Standard Warranty
2 Years Extended Warranty
3 Years Premium Warranty
Price
4.0 (134 Reviews)
4.0 (44 Reviews)
5.0 (76 Reviews)
Availability
In StockIn StockIn Stock"use client"
import AdvancedComparisonTable from "../advanced-comparison-table"
export default function Page() {
return <AdvancedComparisonTable />
}
Cryptocurrency market table with search, time filter, coin logos, price data, trend charts using recharts, and action buttons. Displays digital assets with real-time price changes and volume data.
Cryptocurrency Market Overview
Compare different cryptocurrencies, and make informed investment.
Digital Asset | Price | Change | Volume | Market Cap | Trend | |
|---|---|---|---|---|---|---|
BTC Bitcoin | $46,727.30 | +2.92% | $45.31B | $915.61B | ||
ETH Ethereum | $2,609.30 | +6.80% | $23.42B | $313.58B | ||
USDT TetherUS | $1.00 | -0.01% | $94.37B | $40,600 | ||
SOL Solana | $1.00 | +6.35% | $3.48B | $43.26B |
"use client"
import CryptoTable from "../crypto-table"
export default function Page() {
return <CryptoTable />
}
Global sales analytics table with interactive vector world map, country flags, sales data by region, conversion rates, and revenue metrics. Includes visual map representation using @react-jvectormap.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROGlobal Sales by Country
Geographical impact and identifying key markets.
Country | Sales | Value | Bounce |
|---|---|---|---|
🇺🇸 United State | 2500 | $230,900 | 29.9% |
🇩🇪 Germany | 3.900 | $440,000 | 40.22% |
🇬🇧 Great Britain | 1.400 | $190,700 | 23.44% |
🇧🇷 Brasil | 562 | $143.960 | 32.14% |
"use client"
import GlobalSalesTable from "../global-sales-table"
export default function Page() {
return <GlobalSalesTable />
}
Invoice management table with search functionality, checkboxes for bulk selection, customer names, amounts, dates, status badges (Paid/Pending/Overdue), and action buttons for copying and downloading invoices.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROInvoices
30 done this month
Customer | Amount | Issued | Payment Date | Status | ||
|---|---|---|---|---|---|---|
Viking Burrito | $14,000 | Jan 31, 2024 | Feb 28, 2024 | Paid | ||
Stone Tech Zone | $3,000 | Feb 15, 2024 | Mar 15, 2024 | Pending | ||
Fiber Notion | $20,000 | Mar 01, 2024 | Apr 01, 2024 | Overdue | ||
Blue Bird | $5,000 | Mar 20, 2024 | Apr 20, 2024 | Paid | ||
Code Space | $2,000 | Mar 27, 2024 | Apr 27, 2024 | Paid |
Page 2 of 10
"use client"
import InvoicesTable from "../invoices-table"
export default function Page() {
return <InvoicesTable />
}
Team members list table with profile avatars, names, emails, job roles, online/offline status badges, employment dates, edit tooltips, and pagination controls with search functionality.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROMembers List
See information about all members
Name | Function | Status | Employed |
|
|---|---|---|---|---|
Emma Roberts | Manager Organization | Online | 23/04/18 | |
Marcel Glock | Executive Projects | Offline | 23/04/18 | |
Misha Stam | Social Media Projects | Online | 23/04/18 | |
Lucian Eurel | Programator Developer | Offline | 23/04/18 | |
Linde Michele | Manager Organization | Offline | 23/04/18 | |
Georg Joshiash | Designer Projects | Online | 23/04/18 |
Page 2 of 10
"use client"
import MemberListTable from "../member-list-table"
export default function Page() {
return <MemberListTable />
}
Comprehensive orders table with search, filters, checkboxes for selection, customer info, order IDs, amounts, dates, fulfillment status badges, and dropdown menus for actions. Includes pagination.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOrders Table
All status 2024
Date | Status | Customer | Product | Revenue | ||
|---|---|---|---|---|---|---|
01 Nov 2023, 10:20 AM | Paid | Nike Sport 2 | $140,20 | |||
01 Nov 2023, 10:53 AM | Paid | Valvet T-Shirt | $42,00 | |||
01 Nov 2023, 11:13 AM | Refunded | Leather Wallet | $25,50 | |||
01 Nov 2023, 12:20 AM | Paid | Bracelet Onu-Lino | $190,40 | |||
01 Nov 2023, 1:40 PM | Cancel | Phone Case Pink x2 | $200,90 |
Page 2 of 10
"use client"
import OrdersTable from "../orders-table"
export default function Page() {
return <OrdersTable />
}
Product inventory management table with product images, names, categories, quantities, prices, stock availability badges, and pagination. Includes search and filter buttons for inventory control.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROProduct Inventory
These are details about all products.
Product Name | Category | In-Store Availability | Online Availability | Price | SKU | Supplier | Last Restock Date |
|---|---|---|---|---|---|---|---|
Nike v22 Runnings ID: 1001 | Fitness | 25 pcs | 40 pcs | $99.99 | WH12345 | SportyFeet | 2024-07-20 |
Business Kit ID: 2077 | Accessory | 15 pcs | 17 pcs | $59.99 | BK12345 | TechInnovate | 2024-07-15 |
Black Chair ID: 7620 | Furniture | 40 pcs | 132 pcs | $49.99 | BC2345 | HomeEssentials | 2024-07-22 |
Wireless Charger ID: 3501 | Accessory | 8 pcs | 80 pcs | $99.99 | WC12345 | TechInnovate | 2024-07-18 |
Mountain Trip Kit ID: 8629 | Travel | 5 pcs | 76 pcs | $149.99 | MTK12345 | HomeEssentials | 2024-07-25 |
Showing 1-5 of 45
"use client"
import ProductInventoryTable from "../product-inventory-table"
export default function Page() {
return <ProductInventoryTable />
}
Project management table with project names, team member avatars, completion progress bars, status badges, deadlines, and action buttons. Features search, filters, and add project functionality.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROProjects Table
30 done this month
Project | Assignee | Budget | Team | Progress | Due Date |
|
|---|---|---|---|---|---|---|
$140,20 | Design | 50% | 31 Jan 2024 | |||
$3,000 | Development | 100% | 15 Feb 2024 | |||
$20,000 | Back-End | 100% | 01 Mar 2024 | |||
$5,000 | Design | 50% | 20 Mar 2024 | |||
$2,000 | Marketing | 50% | 27 Mar 2024 |
Page 2 of 10
"use client"
import ProjectManagementTable from "../project-management-table"
export default function Page() {
return <ProjectManagementTable />
}
Top selling products table with product images, names, prices, star ratings, reviews count, popularity trend indicators, sales numbers, and action buttons. Includes search and export functionality.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROProduct Inventory
These are details about all products.
Product | Category | Orders | Stock | Revenue | Customer Ratings | Refunds |
|---|---|---|---|---|---|---|
Nike v22 Runnings ID: 1001 | Fitness | 1,500 | 302 | $450,000 | 4.0 | 13 |
Business Kit ID: 2077 | Accessory | 12,821 | 100 | $80,250 | 5.0 | 40 |
Black Chair ID: 7620 | Furniture | 2,421 | 391 | $40,600 | 2.0 | 54 |
Wireless Charger ID: 3501 | Accessory | 5,921 | 725 | $91,300 | 4.0 | 25 |
Mountain Trip Kit ID: 8629 | Travel | 921 | 891 | $140,925 | 4.0 | 11 |
"use client"
import TopSellingProductsTable from "../top-selling-products-table"
export default function Page() {
return <TopSellingProductsTable />
}
Transaction history table with checkboxes, company logos, transaction IDs, amounts, dates, payment method badges (Visa/Mastercard), status indicators (completed/pending/failed), and action menus. Includes search, filter, and export features.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROTransactions Table
These are details about the last transactions
Transaction | Amount | Date | Account | Status | ||
|---|---|---|---|---|---|---|
Figma INC | $14,000 | Jan 31, 2024, 3:00 PM | visa 1234 Expiry 06/2026 | completed | ||
Medium | $2,500 | Feb 01, 2024, 1:00 PM | master card 1234 Expiry 06/2026 | completed | ||
Spotify | $5,000 | Feb 02, 2024, 3:00 PM | visa 1234 Expiry 06/2026 | pending | ||
Discord | $3,4,00 | Feb 02, 2024, 4:40 PM | visa 1234 Expiry 06/2026 | completed | ||
Google Cloud | $1,000 | Feb 02, 2024, 5:10 PM | master card 1234 Expiry 06/2026 | failed |
Page 2 of 10
"use client"
import TransactionsTable from "../transactions-table"
export default function Page() {
return <TransactionsTable />
}
Frequently asked questions
Are these table blocks free?
Yes, the free tables are copy-paste with no account and fine for commercial apps. A few advanced data tables are PRO and marked on the block.
Do the columns sort and paginate?
Several include sorting, pagination, and row actions in the component. The logic is in your code once you copy or install it, so you can keep it, extend it, or wire it to a data library like TanStack Table.
Can I use them with my own data?
Yes. Replace the example rows with your data source, rename the columns, and adjust the cell rendering. The block gives you the structure and styling; the data is yours.
Do they handle large datasets?
The UI scales fine, and the blocks pair well with server-side pagination or a virtualization library when you have thousands of rows. You add that data layer; the table renders it.
Do they work with Next.js?
Yes, they are built for React and Next.js with Tailwind, and they work in any React app with shadcn/ui installed.