Table
A flexible, fully-featured table component with sorting, selection, pagination integration, loading states, empty states, and responsive design. Perfect for data display, dashboards, and admin interfaces with complete accessibility support.
Basic Table
User | Role | Status | Last Login |
|---|---|---|---|
 John Doe john@example.com | Admin | active | 1/15/2024 |
 Sarah Wilson sarah@example.com | Editor | active | 1/14/2024 |
 Mike Johnson mike@example.com | Viewer | pending | 1/10/2024 |
Table with Selection
User | Role | Status | Last Login | Actions | |
|---|---|---|---|---|---|
John Doe john@example.com | Admin | active | 1/15/2024 | ||
Sarah Wilson sarah@example.com | Editor | active | 1/14/2024 | ||
Mike Johnson mike@example.com | Viewer | pending | 1/10/2024 | ||
 Emma Davis emma@example.com | Editor | inactive | 1/5/2024 | ||
 Alex Rodriguez alex@example.com | Admin | active | 1/16/2024 |
Different Variants
Default
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
Modern
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
Minimal
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
Striped
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
U USB-C Hub | Accessories | $89 | 78 |
Product Table - All Features
Product | Category | Price | Stock | Rating | |
|---|---|---|---|---|---|
4 4K MonitorFeatured | Electronics | $599 | 15 | 4.7 | |
G Gaming KeyboardFeatured | Electronics | $199 | 32 | 4.9 | |
P Premium HeadphonesFeatured | Electronics | $299 | 45 | 4.8 | |
U USB-C Hub | Accessories | $89 | 78 | 4.3 | |
W Wireless Mouse | Accessories | $79 | 120 | 4.5 |
Loading States
Product | Category | Price | Stock | Rating |
|---|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 | 4.8 |
W Wireless Mouse | Accessories | $79 | 120 | 4.5 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 | 4.9 |
U USB-C Hub | Accessories | $89 | 78 | 4.3 |
4 4K MonitorFeatured | Electronics | $599 | 15 | 4.7 |
Empty State
User | Role | Status | Last Login | Actions |
|---|---|---|---|---|
No users found Get started by adding your first user | ||||
Different Sizes
Small
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
Medium (Default)
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
Large
Product | Category | Price | Stock |
|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 |
W Wireless Mouse | Accessories | $79 | 120 |
G Gaming KeyboardFeatured | Electronics | $199 | 32 |
Scrollable Table (Max Height)
User | Role | Status | Last Login | Actions |
|---|---|---|---|---|
John Doe john@example.com | Admin | active | 1/15/2024 | |
Sarah Wilson sarah@example.com | Editor | active | 1/14/2024 | |
Mike Johnson mike@example.com | Viewer | pending | 1/10/2024 | |
Emma Davis emma@example.com | Editor | inactive | 1/5/2024 | |
Alex Rodriguez alex@example.com | Admin | active | 1/16/2024 | |
John Doe john@example.com | Admin | active | 1/15/2024 | |
Sarah Wilson sarah@example.com | Editor | active | 1/14/2024 | |
Mike Johnson mike@example.com | Viewer | pending | 1/10/2024 | |
Emma Davis emma@example.com | Editor | inactive | 1/5/2024 | |
Alex Rodriguez alex@example.com | Admin | active | 1/16/2024 | |
John Doe john@example.com | Admin | active | 1/15/2024 | |
Sarah Wilson sarah@example.com | Editor | active | 1/14/2024 | |
Mike Johnson mike@example.com | Viewer | pending | 1/10/2024 | |
Emma Davis emma@example.com | Editor | inactive | 1/5/2024 | |
Alex Rodriguez alex@example.com | Admin | active | 1/16/2024 |
Single Selection Mode
Product | Category | Price | Stock | Rating | |
|---|---|---|---|---|---|
P Premium HeadphonesFeatured | Electronics | $299 | 45 | 4.8 | |
W Wireless Mouse | Accessories | $79 | 120 | 4.5 | |
G Gaming KeyboardFeatured | Electronics | $199 | 32 | 4.9 | |
U USB-C Hub | Accessories | $89 | 78 | 4.3 |
Table Component
tsx
1"use client";2import React, { useState, useMemo } from "react";3import { ChevronUp, ChevronDown } from "lucide-react";4import { cva, type VariantProps } from "class-variance-authority";5import { cn } from "@/lib/cn";67const tableVariants = cva([8 "w-full border-collapse",9 "bg-white dark:bg-neutral-900",10], {11 variants: {12 variant: {13 default: [14 "border border-neutral-200 dark:border-neutral-800",15 "rounded-lg overflow-hidden",16 ],17 modern: [18 "border border-neutral-200/40 dark:border-neutral-800/40",19 "rounded-xl overflow-hidden",20 "shadow-[0_2px_8px_0px_rgba(0,0,0,0.04)]",