A clean data table with sortable headers, row selection, sticky header, density options and expandable rows. Built for dashboards, billing history and admin panels.
"use client";
import * as React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;
type InvoiceRow = {
id: string;
customer: string;
plan: string;
amount: string;
status: string;
detail: string;
};
const rows: InvoiceRow[] = [
{
id: "inv_1042",
customer: "Northwind Labs",
plan: "Pro Annual",
amount: "$169.00",
status: "Paid",
detail: "Renewed automatically on May 12. Receipt sent to billing@northwind.dev.",
},
{
id: "inv_1041",
customer: "Studio Meridian",
plan: "Teams",
amount: "Custom",
status: "Pending",
detail: "Awaiting PO approval from procurement. Sales follow-up scheduled.",
},
{
id: "inv_1040",
customer: "Orbit Systems",
plan: "Pro Lifetime",
amount: "$199.00",
status: "Paid",
detail: "Lifetime license issued. CLI access enabled immediately.",
},
];
function PreviewPanel({
title,
children,
className,
}: {
title: string;
children: React.ReactNode;
className?: string;
}) {
return (
<div className={cn(wensityCardSurfaceClass, "w-full max-w-2xl p-4 sm:p-5", className)}>
<p className="mb-4 text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
{title}
</p>
{children}
</div>
);
}
export function TablePreview() {
return (
<PreviewPanel title="Recent invoices">
<Table>
<TableHeader>
<TableRow>
<TableHead>Customer</TableHead>
<TableHead>Plan</TableHead>
<TableHead>Amount</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell className="font-medium">{row.customer}</TableCell>
<TableCell>{row.plan}</TableCell>
<TableCell>{row.amount}</TableCell>
<TableCell>{row.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</PreviewPanel>
);
}
export default function Demo() {
return <TablePreview />;
}