Data Table

Flexible table components for displaying data. Features include sorting, pagination, selection, and action buttons.

Dependencies: tailwind-merge, clsx, lucide-react

Design 1: Simple Table

Basic table with striped rows option and hover states. Clean and minimal for straightforward data display.

Striped rows

Name	Email	Role	Department
John Doe	john@example.com	Admin	Engineering
Jane Smith	jane@example.com	Editor	Marketing
Bob Johnson	bob@example.com	Viewer	Sales
Alice Brown	alice@example.com	Editor	Design
Charlie Wilson	charlie@example.com	Admin	Engineering

Design 2: Table with Actions

Feature-rich table with checkbox selection, avatar columns, status badges, and action buttons for each row.

User	Status	Role
JD John Doe john@example.com	Active	Admin
JS Jane Smith jane@example.com	Active	Editor
BJ Bob Johnson bob@example.com	Inactive	Viewer
AB Alice Brown alice@example.com	Pending	Editor
CW Charlie Wilson charlie@example.com	Active	Admin

Design 3: Sortable Table with Pagination

Advanced table with clickable column headers for sorting and pagination controls at the bottom.

Name	Category	Price	Stock	Sales
Bluetooth Speaker	Electronics	$69.99	75	456
Cable Management Kit	Accessories	$19.99	150	654
Desk Organizer	Accessories	$34.99	90	321
Laptop Stand	Accessories	$49.99	120	567
Mechanical Keyboard	Electronics	$149.99	30	189

Showper page

Showing 1 to 5 of 12

Usage

import { SimpleTable } from "@/components/ui/table";
import { TableWithActions } from "@/components/ui/table";
import { SortableTable } from "@/components/ui/table";

export default function Example() {
  return (
    <div className="space-y-8">
      {/* Simple table for basic data */}
      <SimpleTable />

      {/* Table with selection and actions */}
      <TableWithActions />

      {/* Sortable table with pagination */}
      <SortableTable />
    </div>
  );
}