Table

TSX
"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const limits = [
  { plan: "Hobby", requests: "60 / min", burst: "120", concurrency: "2" },
  { plan: "Team", requests: "600 / min", burst: "1,200", concurrency: "10" },
  {
    plan: "Business",
    requests: "3,000 / min",
    burst: "6,000",
    concurrency: "50",
  },
  {
    plan: "Enterprise",
    requests: "Custom",
    burst: "Custom",
    concurrency: "Custom",
  },
];

export default function Table01() {
  return (
    <div className="w-full max-w-lg">
      <div className="overflow-hidden rounded-lg border">
        <Table>
          <TableHeader className="bg-muted/50">
            <TableRow className="hover:bg-transparent">
              <TableHead className="border-r px-2 sm:px-3">Plan</TableHead>
              <TableHead className="border-r px-1.5 text-right sm:px-3">
                Requests
              </TableHead>
              <TableHead className="hidden border-r px-3 text-right sm:table-cell">
                Burst
              </TableHead>
              <TableHead className="px-1.5 text-right sm:px-3">
                Concurrency
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {limits.map((row) => (
              <TableRow key={row.plan}>
                <TableCell className="border-r px-2 font-medium sm:px-3">
                  {row.plan}
                </TableCell>
                <TableCell className="border-r px-1.5 text-right tabular-nums sm:px-3">
                  {row.requests}
                </TableCell>
                <TableCell className="hidden border-r px-3 text-right tabular-nums sm:table-cell">
                  {row.burst}
                </TableCell>
                <TableCell className="px-1.5 text-right tabular-nums sm:px-3">
                  {row.concurrency}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <p className="mt-3 text-center text-sm text-muted-foreground">
        API rate limits per workspace, reset every 60 seconds.
      </p>
    </div>
  );
}

TSX
"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const regions = [
  {
    code: "iad1",
    city: "Washington, D.C.",
    p50: 18,
    p99: 64,
    uptime: "99.99%",
  },
  { code: "sfo1", city: "San Francisco", p50: 22, p99: 71, uptime: "99.98%" },
  { code: "gru1", city: "São Paulo", p50: 41, p99: 128, uptime: "99.95%" },
  { code: "lhr1", city: "London", p50: 16, p99: 58, uptime: "99.99%" },
  { code: "fra1", city: "Frankfurt", p50: 15, p99: 55, uptime: "99.99%" },
  { code: "cdg1", city: "Paris", p50: 17, p99: 60, uptime: "99.97%" },
  { code: "arn1", city: "Stockholm", p50: 19, p99: 66, uptime: "99.98%" },
  { code: "bom1", city: "Mumbai", p50: 38, p99: 117, uptime: "99.93%" },
  { code: "sin1", city: "Singapore", p50: 24, p99: 82, uptime: "99.97%" },
  { code: "hnd1", city: "Tokyo", p50: 21, p99: 73, uptime: "99.98%" },
  { code: "icn1", city: "Seoul", p50: 23, p99: 79, uptime: "99.96%" },
  { code: "syd1", city: "Sydney", p50: 29, p99: 94, uptime: "99.96%" },
  { code: "cpt1", city: "Cape Town", p50: 47, p99: 141, uptime: "99.91%" },
];

export default function Table02() {
  return (
    <div className="w-full max-w-lg">
      <div className="rounded-lg [&>[data-slot=table-container]]:max-h-72 [&>[data-slot=table-container]]:rounded-lg">
        <Table>
          <TableHeader className="sticky top-0 z-10 bg-background shadow-[0_1px_0_var(--border)] [&_tr]:border-0">
            <TableRow className="hover:bg-transparent">
              <TableHead>Region</TableHead>
              <TableHead className="text-right">p50</TableHead>
              <TableHead className="text-right">p99</TableHead>
              <TableHead className="hidden text-right sm:table-cell">
                Uptime
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {regions.map((region) => (
              <TableRow
                key={region.code}
                className="border-0 even:bg-muted/50 hover:bg-accent"
              >
                <TableCell>
                  <span className="font-medium">{region.city}</span>
                  <span className="block font-mono text-xs text-muted-foreground sm:ml-2 sm:inline">
                    {region.code}
                  </span>
                </TableCell>
                <TableCell className="text-right tabular-nums">
                  {region.p50} ms
                </TableCell>
                <TableCell className="text-right tabular-nums">
                  {region.p99} ms
                </TableCell>
                <TableCell className="hidden text-right tabular-nums sm:table-cell">
                  {region.uptime}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <p className="mt-3 text-center text-sm text-muted-foreground">
        Edge latency by region over the last 24 hours.
      </p>
    </div>
  );
}

TSX
"use client";

import { cn } from "cn";
import { Rows2, Rows3, Rows4 } from "lucide-react";
import * as React from "react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

type Density = "compact" | "default" | "comfortable";

const densities: { value: Density; label: string; icon: typeof Rows4 }[] = [
  { value: "compact", label: "Compact", icon: Rows4 },
  { value: "default", label: "Default", icon: Rows3 },
  { value: "comfortable", label: "Comfortable", icon: Rows2 },
];

const cellPadding: Record<Density, string> = {
  compact: "px-2 py-1 text-xs",
  default: "px-2 py-2",
  comfortable: "px-3 py-3.5",
};

const headHeight: Record<Density, string> = {
  compact: "h-8 text-xs",
  default: "h-10",
  comfortable: "h-12 px-3",
};

const stock = [
  { sku: "BK-2041", name: "Linen notebook, A5", bin: "A-03", onHand: 412 },
  { sku: "PN-1180", name: "Gel pen, 0.5 mm black", bin: "A-07", onHand: 1286 },
  { sku: "TP-0932", name: "Washi tape, sage", bin: "B-12", onHand: 94 },
  { sku: "ST-5510", name: "Brass desk stapler", bin: "C-01", onHand: 37 },
  { sku: "EN-7702", name: "Kraft envelopes, 50 pk", bin: "B-04", onHand: 258 },
];

export default function Table03() {
  const [density, setDensity] = React.useState<Density>("default");

  return (
    <div className="w-full max-w-lg space-y-3">
      <div className="flex items-center justify-between gap-3">
        <p id="table-03-density" className="text-sm font-medium">
          Row density
        </p>
        <ToggleGroup
          aria-labelledby="table-03-density"
          variant="outline"
          size="sm"
          spacing={0}
          value={[density]}
          onValueChange={(value) => {
            if (value[0]) setDensity(value[0] as Density);
          }}
        >
          {densities.map((option) => (
            <ToggleGroupItem
              key={option.value}
              value={option.value}
              aria-label={option.label}
              title={option.label}
            >
              <option.icon aria-hidden="true" />
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>
      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead className={headHeight[density]}>SKU</TableHead>
              <TableHead className={headHeight[density]}>Product</TableHead>
              <TableHead
                className={cn("hidden sm:table-cell", headHeight[density])}
              >
                Bin
              </TableHead>
              <TableHead className={cn("text-right", headHeight[density])}>
                On hand
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {stock.map((item) => (
              <TableRow key={item.sku}>
                <TableCell
                  className={cn(
                    "font-mono text-muted-foreground",
                    cellPadding[density],
                  )}
                >
                  {item.sku}
                </TableCell>
                <TableCell
                  className={cn(
                    "font-medium whitespace-normal sm:whitespace-nowrap",
                    cellPadding[density],
                  )}
                >
                  {item.name}
                </TableCell>
                <TableCell
                  className={cn("hidden sm:table-cell", cellPadding[density])}
                >
                  {item.bin}
                </TableCell>
                <TableCell
                  className={cn(
                    "text-right tabular-nums",
                    cellPadding[density],
                  )}
                >
                  {item.onHand.toLocaleString("en-US")}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

TSX
"use client";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const lines = [
  { description: "Brand strategy workshop", qty: 1, rate: 3200 },
  { description: "Logo and identity system", qty: 1, rate: 5400 },
  { description: "Marketing site design, per page", qty: 6, rate: 850 },
  { description: "Design QA, hours", qty: 14, rate: 120 },
];

const TAX_RATE = 0.08;

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

export default function Table04() {
  const subtotal = lines.reduce((sum, line) => sum + line.qty * line.rate, 0);
  const tax = subtotal * TAX_RATE;

  return (
    <div className="w-full max-w-xl">
      <Table>
        <TableCaption>Invoice INV-2291 · due October 15, 2026</TableCaption>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead>Description</TableHead>
            <TableHead className="text-right">Qty</TableHead>
            <TableHead className="hidden text-right sm:table-cell">
              Rate
            </TableHead>
            <TableHead className="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {lines.map((line) => (
            <TableRow key={line.description}>
              <TableCell className="whitespace-normal">
                {line.description}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {line.qty}
              </TableCell>
              <TableCell className="hidden text-right text-muted-foreground tabular-nums sm:table-cell">
                {currency.format(line.rate)}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {currency.format(line.qty * line.rate)}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter className="bg-transparent">
          <TableRow className="border-0 font-normal text-muted-foreground hover:bg-transparent">
            <TableCell colSpan={2}>Subtotal</TableCell>
            <TableCell className="hidden sm:table-cell" />
            <TableCell className="text-right tabular-nums">
              {currency.format(subtotal)}
            </TableCell>
          </TableRow>
          <TableRow className="font-normal text-muted-foreground hover:bg-transparent">
            <TableCell colSpan={2}>Sales tax (8%)</TableCell>
            <TableCell className="hidden sm:table-cell" />
            <TableCell className="text-right tabular-nums">
              {currency.format(tax)}
            </TableCell>
          </TableRow>
          <TableRow className="bg-muted/50 text-base hover:bg-muted/50">
            <TableCell colSpan={2} className="font-semibold">
              Total due
            </TableCell>
            <TableCell className="hidden sm:table-cell" />
            <TableCell className="text-right font-semibold tabular-nums">
              {currency.format(subtotal + tax)}
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </div>
  );
}

TSX
"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const WEEKS = [1, 2, 3, 4, 5];

// Share of each signup cohort still active N weeks later. Newer cohorts
// have fewer weeks of data.
const cohorts = [
  { week: "Aug 17", users: 1284, retention: [62, 48, 41, 37, 35] },
  { week: "Aug 24", users: 1102, retention: [58, 45, 39, 36] },
  { week: "Aug 31", users: 1467, retention: [66, 53, 47] },
  { week: "Sep 7", users: 1391, retention: [71, 57] },
  { week: "Sep 14", users: 1530, retention: [69] },
];

// Tint steps stay light enough for foreground text in both themes.
function heat(value: number) {
  if (value >= 65) return "bg-chart-1/50";
  if (value >= 55) return "bg-chart-1/35";
  if (value >= 45) return "bg-chart-1/25";
  if (value >= 38) return "bg-chart-1/15";
  return "bg-chart-1/10";
}

function average(index: number) {
  const rows = cohorts.filter((cohort) => cohort.retention[index] != null);
  const users = rows.reduce((sum, cohort) => sum + cohort.users, 0);
  const retained = rows.reduce(
    (sum, cohort) => sum + cohort.users * cohort.retention[index],
    0,
  );
  return Math.round(retained / users);
}

export default function Table05() {
  return (
    <Card className="w-full max-w-xl">
      <CardHeader>
        <CardTitle id="table-05-title">Weekly retention</CardTitle>
        <CardDescription>
          Share of each signup cohort still active in the weeks after signup.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <Table aria-labelledby="table-05-title" className="table-fixed">
          <TableHeader className="[&_tr]:border-0">
            <TableRow className="hover:bg-transparent">
              <TableHead className="w-20 pl-0 text-xs text-muted-foreground sm:w-32">
                Cohort
              </TableHead>
              {WEEKS.map((week) => (
                <TableHead
                  key={week}
                  className="px-0.5 text-center text-xs text-muted-foreground"
                >
                  <abbr title={`Week ${week}`} className="no-underline">
                    W{week}
                  </abbr>
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {cohorts.map((cohort) => (
              <TableRow
                key={cohort.week}
                className="border-0 hover:bg-transparent"
              >
                <TableHead scope="row" className="h-auto py-0.5 pl-0">
                  <span className="block text-sm font-medium">
                    {cohort.week}
                  </span>
                  <span className="block text-xs font-normal text-muted-foreground tabular-nums">
                    {cohort.users.toLocaleString("en-US")} users
                  </span>
                </TableHead>
                {WEEKS.map((week, index) => {
                  const value = cohort.retention[index];
                  return (
                    <TableCell key={week} className="px-0.5 py-0.5">
                      {value == null ? (
                        <div className="h-9 rounded-md border border-dashed">
                          <span className="sr-only">No data yet</span>
                        </div>
                      ) : (
                        <div
                          className={`flex h-9 items-center justify-center rounded-md text-[0.6875rem] font-medium tabular-nums sm:text-xs ${heat(value)}`}
                        >
                          {value}%
                        </div>
                      )}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))}
          </TableBody>
          <TableFooter className="bg-transparent">
            <TableRow className="hover:bg-transparent">
              <TableHead scope="row" className="pl-0 text-sm">
                Average
              </TableHead>
              {WEEKS.map((week, index) => (
                <TableCell
                  key={week}
                  className="px-0.5 text-center text-[0.6875rem] font-semibold tabular-nums sm:text-xs"
                >
                  {average(index)}%
                </TableCell>
              ))}
            </TableRow>
          </TableFooter>
        </Table>
        <div className="flex items-center justify-end gap-2 text-xs text-muted-foreground">
          <span>Lower</span>
          <div aria-hidden="true" className="flex gap-0.5">
            {[30, 40, 50, 60, 70].map((sample) => (
              <span
                key={sample}
                className={`size-3 rounded-sm ${heat(sample)}`}
              />
            ))}
          </div>
          <span>Higher</span>
        </div>
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import * as React from "react";

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const events = [
  {
    id: "evt_9f21",
    actor: "Maya Thompson",
    action: "member.role_updated",
    target: "Daniel Reyes → Admin",
    time: "2026-09-25T09:42:00Z",
  },
  {
    id: "evt_9f20",
    actor: "Daniel Reyes",
    action: "api_key.created",
    target: "CI pipeline",
    time: "2026-09-25T09:15:00Z",
  },
  {
    id: "evt_9f1f",
    actor: "System",
    action: "invoice.paid",
    target: "INV-2026-0914",
    time: "2026-09-25T06:00:00Z",
  },
  {
    id: "evt_9f1e",
    actor: "Priya Shah",
    action: "project.archived",
    target: "Spring launch",
    time: "2026-09-24T17:28:00Z",
  },
  {
    id: "evt_9f1d",
    actor: "Maya Thompson",
    action: "sso.enforced",
    target: "northwind.io",
    time: "2026-09-24T15:03:00Z",
  },
  {
    id: "evt_9f1c",
    actor: "Owen Walsh",
    action: "export.downloaded",
    target: "Q3 orders.csv",
    time: "2026-09-24T11:47:00Z",
  },
  {
    id: "evt_9f1b",
    actor: "Daniel Reyes",
    action: "member.invited",
    target: "hana@northwind.io",
    time: "2026-09-23T16:20:00Z",
  },
  {
    id: "evt_9f1a",
    actor: "Priya Shah",
    action: "webhook.disabled",
    target: "https://hooks.northwind.io/orders",
    time: "2026-09-23T10:05:00Z",
  },
  {
    id: "evt_9f19",
    actor: "System",
    action: "login.blocked",
    target: "5 failed attempts",
    time: "2026-09-22T22:31:00Z",
  },
  {
    id: "evt_9f18",
    actor: "Maya Thompson",
    action: "billing.plan_changed",
    target: "Team → Business",
    time: "2026-09-22T14:12:00Z",
  },
  {
    id: "evt_9f17",
    actor: "Owen Walsh",
    action: "project.created",
    target: "Fall campaign",
    time: "2026-09-21T09:58:00Z",
  },
  {
    id: "evt_9f16",
    actor: "Daniel Reyes",
    action: "domain.verified",
    target: "app.northwind.io",
    time: "2026-09-20T13:40:00Z",
  },
  {
    id: "evt_9f15",
    actor: "Priya Shah",
    action: "api_key.revoked",
    target: "Old staging",
    time: "2026-09-19T18:22:00Z",
  },
  {
    id: "evt_9f14",
    actor: "Maya Thompson",
    action: "member.removed",
    target: "leo@northwind.io",
    time: "2026-09-18T12:09:00Z",
  },
  {
    id: "evt_9f13",
    actor: "System",
    action: "backup.completed",
    target: "Nightly snapshot",
    time: "2026-09-18T03:00:00Z",
  },
];

const PAGE_SIZE = 5;
const PAGE_COUNT = Math.ceil(events.length / PAGE_SIZE);

const timeFormat = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  hour: "numeric",
  minute: "2-digit",
  timeZone: "UTC",
});

export default function Table06() {
  const [page, setPage] = React.useState(1);

  const start = (page - 1) * PAGE_SIZE;
  const rows = events.slice(start, start + PAGE_SIZE);

  function goTo(event: React.MouseEvent<HTMLAnchorElement>, next: number) {
    event.preventDefault();
    if (next >= 1 && next <= PAGE_COUNT) setPage(next);
  }

  return (
    <div className="w-full max-w-2xl space-y-3">
      <div className="rounded-lg border">
        <Table aria-label="Audit log">
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead className="pl-3">Event</TableHead>
              <TableHead className="hidden sm:table-cell">Target</TableHead>
              <TableHead className="pr-3 text-right">Time (UTC)</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((event) => (
              <TableRow key={event.id}>
                <TableCell className="py-2.5 pl-3">
                  <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
                    {event.action}
                  </code>
                  <p className="mt-1 text-xs text-muted-foreground">
                    by{" "}
                    <span
                      className={
                        event.actor === "System"
                          ? undefined
                          : "font-medium text-foreground"
                      }
                    >
                      {event.actor}
                    </span>
                  </p>
                </TableCell>
                <TableCell className="hidden max-w-56 truncate text-muted-foreground sm:table-cell">
                  {event.target}
                </TableCell>
                <TableCell className="pr-3 text-right whitespace-normal text-muted-foreground tabular-nums sm:whitespace-nowrap">
                  <time dateTime={event.time}>
                    {timeFormat.format(new Date(event.time))}
                  </time>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-2">
        <p aria-live="polite" className="text-sm text-muted-foreground">
          <span className="tabular-nums">
            {start + 1}–{start + rows.length}
          </span>{" "}
          of <span className="tabular-nums">{events.length}</span> events
        </p>
        <Pagination aria-label="Audit log pages" className="mx-0 w-auto">
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href="#"
                aria-disabled={page === 1}
                tabIndex={page === 1 ? -1 : undefined}
                className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
                onClick={(event) => goTo(event, page - 1)}
              />
            </PaginationItem>
            {Array.from({ length: PAGE_COUNT }, (_, index) => index + 1).map(
              (number) => (
                <PaginationItem key={number}>
                  <PaginationLink
                    href="#"
                    isActive={number === page}
                    aria-label={`Page ${number}`}
                    onClick={(event) => goTo(event, number)}
                  >
                    {number}
                  </PaginationLink>
                </PaginationItem>
              ),
            )}
            <PaginationItem>
              <PaginationNext
                href="#"
                aria-disabled={page === PAGE_COUNT}
                tabIndex={page === PAGE_COUNT ? -1 : undefined}
                className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
                onClick={(event) => goTo(event, page + 1)}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    </div>
  );
}

TSX
"use client";

import { cn } from "cn";
import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
import * as React from "react";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

type Rep = {
  name: string;
  deals: number;
  revenue: number;
  winRate: number;
};

type SortKey = keyof Rep;
type SortDirection = "ascending" | "descending";

const reps: Rep[] = [
  { name: "Grace Kim", deals: 31, revenue: 412_800, winRate: 38 },
  { name: "Marcus Hale", deals: 24, revenue: 486_250, winRate: 44 },
  { name: "Lucia Ortega", deals: 42, revenue: 298_400, winRate: 29 },
  { name: "Tomás Novak", deals: 18, revenue: 351_900, winRate: 51 },
  { name: "Aisha Bello", deals: 27, revenue: 267_300, winRate: 33 },
];

const columns: { key: SortKey; label: string; numeric: boolean }[] = [
  { key: "name", label: "Rep", numeric: false },
  { key: "revenue", label: "Revenue", numeric: true },
  { key: "deals", label: "Deals", numeric: true },
  { key: "winRate", label: "Win rate", numeric: true },
];

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

export default function Table07() {
  const [sort, setSort] = React.useState<{
    key: SortKey;
    direction: SortDirection;
  }>({ key: "revenue", direction: "descending" });

  const rows = React.useMemo(() => {
    const factor = sort.direction === "ascending" ? 1 : -1;
    return [...reps].sort((a, b) => {
      const left = a[sort.key];
      const right = b[sort.key];
      if (typeof left === "string" && typeof right === "string") {
        return left.localeCompare(right) * factor;
      }
      return ((left as number) - (right as number)) * factor;
    });
  }, [sort]);

  function toggleSort(key: SortKey, numeric: boolean) {
    setSort((current) =>
      current.key === key
        ? {
            key,
            direction:
              current.direction === "ascending" ? "descending" : "ascending",
          }
        : { key, direction: numeric ? "descending" : "ascending" },
    );
  }

  return (
    <div className="w-full max-w-xl">
      <Table>
        <TableCaption>Closed-won deals by rep, Q3 2026.</TableCaption>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            {columns.map((column) => {
              const active = sort.key === column.key;
              const Icon = !active
                ? ChevronsUpDown
                : sort.direction === "ascending"
                  ? ArrowUp
                  : ArrowDown;
              return (
                <TableHead
                  key={column.key}
                  aria-sort={active ? sort.direction : "none"}
                  className={cn(
                    column.numeric && "text-right",
                    column.key === "deals" && "hidden sm:table-cell",
                  )}
                >
                  <button
                    type="button"
                    onClick={() => toggleSort(column.key, column.numeric)}
                    className={cn(
                      "-mx-1.5 inline-flex h-7 items-center gap-1 rounded-md px-1.5 text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
                      active && "text-foreground",
                      column.numeric && "flex-row-reverse",
                    )}
                  >
                    {column.label}
                    <Icon
                      aria-hidden="true"
                      className={cn("size-3.5", !active && "opacity-50")}
                    />
                  </button>
                </TableHead>
              );
            })}
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((rep) => (
            <TableRow key={rep.name}>
              <TableCell className="font-medium whitespace-normal sm:whitespace-nowrap">
                {rep.name}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {currency.format(rep.revenue)}
              </TableCell>
              <TableCell className="hidden text-right tabular-nums sm:table-cell">
                {rep.deals}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {rep.winRate}%
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

TSX
"use client";

import { CircleAlert, Inbox, RotateCw } from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

type ViewState = "ready" | "loading" | "empty" | "error";

const states: { value: ViewState; label: string }[] = [
  { value: "ready", label: "Ready" },
  { value: "loading", label: "Loading" },
  { value: "empty", label: "Empty" },
  { value: "error", label: "Error" },
];

const payouts = [
  {
    id: "po_8H2k",
    date: "Sep 23",
    account: "Checking ••4821",
    amount: "$12,480.00",
    status: "Paid",
  },
  {
    id: "po_7Qm1",
    date: "Sep 16",
    account: "Checking ••4821",
    amount: "$9,215.40",
    status: "Paid",
  },
  {
    id: "po_6Zt9",
    date: "Sep 09",
    account: "Checking ••4821",
    amount: "$10,902.15",
    status: "Paid",
  },
];

const COLUMN_COUNT = 4;

export default function Table08() {
  const [view, setView] = React.useState<ViewState>("ready");
  const retryTimer = React.useRef<ReturnType<typeof setTimeout>>(undefined);

  React.useEffect(() => () => clearTimeout(retryTimer.current), []);

  function retry() {
    setView("loading");
    clearTimeout(retryTimer.current);
    retryTimer.current = setTimeout(() => setView("ready"), 1200);
  }

  return (
    <div className="w-full max-w-xl space-y-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <p id="table-08-state" className="text-sm font-medium">
          Preview state
        </p>
        <ToggleGroup
          aria-labelledby="table-08-state"
          variant="outline"
          size="sm"
          spacing={0}
          value={[view]}
          onValueChange={(value) => {
            if (value[0]) {
              clearTimeout(retryTimer.current);
              setView(value[0] as ViewState);
            }
          }}
        >
          {states.map((state) => (
            <ToggleGroupItem key={state.value} value={state.value}>
              {state.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>
      <div className="rounded-lg border">
        <Table aria-busy={view === "loading"}>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead className="pl-3">Date</TableHead>
              <TableHead className="hidden sm:table-cell">
                Destination
              </TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="pr-3 text-right">Amount</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {view === "ready" &&
              payouts.map((payout) => (
                <TableRow key={payout.id}>
                  <TableCell className="pl-3 font-medium">
                    {payout.date}
                  </TableCell>
                  <TableCell className="hidden text-muted-foreground sm:table-cell">
                    {payout.account}
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary">{payout.status}</Badge>
                  </TableCell>
                  <TableCell className="pr-3 text-right tabular-nums">
                    {payout.amount}
                  </TableCell>
                </TableRow>
              ))}

            {view === "loading" &&
              payouts.map((payout) => (
                <TableRow key={payout.id} className="hover:bg-transparent">
                  <TableCell className="pl-3">
                    <Skeleton className="h-4 w-12" />
                  </TableCell>
                  <TableCell className="hidden sm:table-cell">
                    <Skeleton className="h-4 w-24" />
                  </TableCell>
                  <TableCell>
                    <Skeleton className="h-5 w-11 rounded-full" />
                  </TableCell>
                  <TableCell className="pr-3">
                    <Skeleton className="ml-auto h-4 w-20" />
                  </TableCell>
                </TableRow>
              ))}

            {view === "empty" && (
              <TableRow className="hover:bg-transparent">
                <TableCell colSpan={COLUMN_COUNT} className="whitespace-normal">
                  <Empty className="py-8">
                    <EmptyHeader>
                      <EmptyMedia variant="icon">
                        <Inbox aria-hidden="true" />
                      </EmptyMedia>
                      <EmptyTitle>No payouts yet</EmptyTitle>
                      <EmptyDescription>
                        Your first payout is sent 2 business days after your
                        first successful charge.
                      </EmptyDescription>
                    </EmptyHeader>
                  </Empty>
                </TableCell>
              </TableRow>
            )}

            {view === "error" && (
              <TableRow className="hover:bg-transparent">
                <TableCell colSpan={COLUMN_COUNT} className="whitespace-normal">
                  <div
                    role="alert"
                    className="mx-auto flex max-w-sm flex-col items-center gap-3 py-8 text-center"
                  >
                    <div className="flex size-8 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
                      <CircleAlert aria-hidden="true" className="size-4" />
                    </div>
                    <div className="space-y-1">
                      <p className="font-medium">Couldn't load payouts</p>
                      <p className="text-muted-foreground">
                        The payments service timed out. Your balance is not
                        affected.
                      </p>
                    </div>
                    <Button variant="outline" size="sm" onClick={retry}>
                      <RotateCw aria-hidden="true" />
                      Try again
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

TSX
"use client";

import { cn } from "cn";
import { ChevronRight } from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

type Deploy = {
  id: string;
  commit: string;
  message: string;
  author: string;
  status: "Ready" | "Failed";
  duration: string;
  steps: { name: string; duration: string; failed?: boolean }[];
};

const deploys: Deploy[] = [
  {
    id: "dpl_41c9",
    commit: "a3f91c2",
    message: "Add usage-based pricing page",
    author: "maya",
    status: "Ready",
    duration: "1m 42s",
    steps: [
      { name: "Install dependencies", duration: "18s" },
      { name: "Build", duration: "1m 06s" },
      { name: "Upload assets", duration: "11s" },
      { name: "Promote to production", duration: "7s" },
    ],
  },
  {
    id: "dpl_41c8",
    commit: "7be04d1",
    message: "Migrate auth callbacks to edge runtime",
    author: "daniel",
    status: "Failed",
    duration: "48s",
    steps: [
      { name: "Install dependencies", duration: "17s" },
      {
        name: "Build: type error in auth/callback.ts",
        duration: "31s",
        failed: true,
      },
    ],
  },
  {
    id: "dpl_41c7",
    commit: "0d2e6ab",
    message: "Fix trailing slash redirect on docs",
    author: "priya",
    status: "Ready",
    duration: "1m 38s",
    steps: [
      { name: "Install dependencies", duration: "16s" },
      { name: "Build", duration: "1m 04s" },
      { name: "Upload assets", duration: "10s" },
      { name: "Promote to production", duration: "8s" },
    ],
  },
];

export default function Table09() {
  const [expanded, setExpanded] = React.useState<string | null>("dpl_41c8");

  return (
    <div className="w-full max-w-xl rounded-lg border">
      <Table>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className="w-10 pl-3">
              <span className="sr-only">Toggle details</span>
            </TableHead>
            <TableHead>Commit</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="hidden pr-3 text-right sm:table-cell">
              Duration
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {deploys.map((deploy) => {
            const open = expanded === deploy.id;
            const panelId = `table-09-${deploy.id}`;
            return (
              <React.Fragment key={deploy.id}>
                <TableRow className={cn(open && "border-b-0")}>
                  <TableCell className="pl-3">
                    <button
                      type="button"
                      aria-expanded={open}
                      aria-controls={panelId}
                      aria-label={`${open ? "Hide" : "Show"} build steps for ${deploy.commit}`}
                      onClick={() => setExpanded(open ? null : deploy.id)}
                      className="flex size-6 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
                    >
                      <ChevronRight
                        aria-hidden="true"
                        className={cn(
                          "size-4 transition-transform duration-200 ease-out motion-reduce:transition-none",
                          open && "rotate-90",
                        )}
                      />
                    </button>
                  </TableCell>
                  <TableCell className="whitespace-normal sm:max-w-72 sm:whitespace-nowrap">
                    <p className="font-medium sm:truncate">{deploy.message}</p>
                    <p className="text-xs text-muted-foreground">
                      <span className="font-mono">{deploy.commit}</span> by{" "}
                      {deploy.author}
                    </p>
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        deploy.status === "Failed" ? "destructive" : "secondary"
                      }
                    >
                      {deploy.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="hidden pr-3 text-right text-muted-foreground tabular-nums sm:table-cell">
                    {deploy.duration}
                  </TableCell>
                </TableRow>
                <TableRow
                  className={cn(
                    "bg-muted/40 hover:bg-muted/40",
                    !open && "border-0",
                  )}
                >
                  <TableCell colSpan={4} className="p-0 whitespace-normal">
                    <div
                      id={panelId}
                      inert={!open}
                      className={cn(
                        "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
                        open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
                      )}
                    >
                      <div className="overflow-hidden">
                        <ol className="space-y-1.5 py-3 pr-3 pl-12">
                          {deploy.steps.map((step) => (
                            <li
                              key={step.name}
                              className={cn(
                                "flex items-center justify-between gap-4 text-xs",
                                step.failed
                                  ? "text-destructive"
                                  : "text-muted-foreground",
                              )}
                            >
                              <span className="min-w-0">{step.name}</span>
                              <span className="font-mono tabular-nums">
                                {step.duration}
                              </span>
                            </li>
                          ))}
                        </ol>
                      </div>
                    </div>
                  </TableCell>
                </TableRow>
              </React.Fragment>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}

TSX
"use client";

import { Check, Pencil } from "lucide-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

type Rate = { zone: string; region: string; base: string; perKg: string };

const initialRates: Rate[] = [
  { zone: "Zone 1", region: "Domestic", base: "4.90", perKg: "0.60" },
  { zone: "Zone 2", region: "Canada & Mexico", base: "12.50", perKg: "1.80" },
  { zone: "Zone 3", region: "Europe", base: "18.00", perKg: "2.40" },
  { zone: "Zone 4", region: "Asia Pacific", base: "22.00", perKg: "3.10" },
];

const PRICE_PATTERN = /^\d+(\.\d{1,2})?$/;

export default function Table10() {
  const [rates, setRates] = React.useState(initialRates);
  const [draft, setDraft] = React.useState(initialRates);
  const [editing, setEditing] = React.useState(false);
  const [saved, setSaved] = React.useState(false);

  const invalid = draft.some(
    (rate) => !PRICE_PATTERN.test(rate.base) || !PRICE_PATTERN.test(rate.perKg),
  );

  function updateDraft(index: number, field: "base" | "perKg", value: string) {
    setDraft((current) =>
      current.map((rate, i) =>
        i === index ? { ...rate, [field]: value } : rate,
      ),
    );
  }

  function startEditing() {
    setDraft(rates);
    setSaved(false);
    setEditing(true);
  }

  function save() {
    if (invalid) return;
    setRates(draft);
    setEditing(false);
    setSaved(true);
  }

  const rows = editing ? draft : rates;

  return (
    <div className="w-full max-w-xl space-y-3">
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0">
          <p className="text-sm font-medium">Shipping rates</p>
          <p className="text-sm text-muted-foreground" aria-live="polite">
            {editing ? (
              "Editing. Prices in USD."
            ) : saved ? (
              <span className="inline-flex items-center gap-1 text-foreground">
                <Check aria-hidden="true" className="size-3.5 text-success" />
                Rates saved
              </span>
            ) : (
              "Read-only. Prices in USD."
            )}
          </p>
        </div>
        {editing ? (
          <div className="flex shrink-0 gap-1.5">
            <Button variant="ghost" size="sm" onClick={() => setEditing(false)}>
              Cancel
            </Button>
            <Button size="sm" onClick={save} disabled={invalid}>
              Save
            </Button>
          </div>
        ) : (
          <Button variant="outline" size="sm" onClick={startEditing}>
            <Pencil aria-hidden="true" />
            Edit rates
          </Button>
        )}
      </div>
      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead className="pl-3">Zone</TableHead>
              <TableHead className="text-right">Base</TableHead>
              <TableHead className="pr-3 text-right">Per kg</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((rate, index) => (
              <TableRow
                key={rate.zone}
                className={editing ? "hover:bg-transparent" : undefined}
              >
                <TableCell className="pl-3">
                  <p className="font-medium">{rate.zone}</p>
                  <p className="text-xs text-muted-foreground">{rate.region}</p>
                </TableCell>
                {(["base", "perKg"] as const).map((field) => (
                  <TableCell
                    key={field}
                    className={
                      field === "perKg" ? "pr-3 text-right" : "text-right"
                    }
                  >
                    {editing ? (
                      <Input
                        inputMode="decimal"
                        aria-label={`${rate.zone} ${field === "base" ? "base rate" : "rate per kg"}`}
                        aria-invalid={!PRICE_PATTERN.test(rate[field])}
                        value={rate[field]}
                        onChange={(event) =>
                          updateDraft(index, field, event.target.value)
                        }
                        className="ml-auto h-7 w-20 text-right tabular-nums"
                      />
                    ) : (
                      <span className="inline-block py-1 tabular-nums">
                        ${rate[field]}
                      </span>
                    )}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      {editing && invalid ? (
        <p role="alert" className="text-sm text-destructive">
          Enter prices as numbers with up to two decimals, like 12.50.
        </p>
      ) : null}
    </div>
  );
}

TSX
"use client";

import { CheckIcon, DownloadIcon } from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

type InvoiceStatus = "paid" | "open" | "refunded";

const invoices: {
  id: string;
  date: string;
  plan: string;
  amount: string;
  status: InvoiceStatus;
}[] = [
  {
    id: "INV-2026-0914",
    date: "Sep 14, 2026",
    plan: "Team, 12 seats",
    amount: "$228.00",
    status: "open",
  },
  {
    id: "INV-2026-0814",
    date: "Aug 14, 2026",
    plan: "Team, 12 seats",
    amount: "$228.00",
    status: "paid",
  },
  {
    id: "INV-2026-0714",
    date: "Jul 14, 2026",
    plan: "Team, 10 seats",
    amount: "$190.00",
    status: "paid",
  },
  {
    id: "INV-2026-0628",
    date: "Jun 28, 2026",
    plan: "Seat add-on",
    amount: "$19.00",
    status: "refunded",
  },
  {
    id: "INV-2026-0614",
    date: "Jun 14, 2026",
    plan: "Team, 10 seats",
    amount: "$190.00",
    status: "paid",
  },
];

const statusLabel: Record<InvoiceStatus, string> = {
  paid: "Paid",
  open: "Due Sep 28",
  refunded: "Refunded",
};

const statusClass: Record<InvoiceStatus, string> = {
  paid: "bg-success/10 text-success",
  open: "bg-warning/10 text-warning",
  refunded: "bg-muted text-muted-foreground",
};

function exportCsv() {
  const header = ["Invoice", "Date", "Description", "Status", "Amount"];
  const rows = invoices.map((invoice) => [
    invoice.id,
    invoice.date,
    invoice.plan,
    statusLabel[invoice.status],
    invoice.amount,
  ]);
  const csv = [header, ...rows]
    .map((row) => row.map((cell) => `"${cell.replaceAll('"', '""')}"`).join(","))
    .join("\n");
  const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
  const link = document.createElement("a");
  link.href = url;
  link.download = "billing-history.csv";
  link.click();
  URL.revokeObjectURL(url);
}

export default function Table11() {
  // The invoice whose PDF was just requested, shown as a brief confirmation.
  const [downloaded, setDownloaded] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (!downloaded) return;
    const timeout = window.setTimeout(() => setDownloaded(null), 1600);
    return () => window.clearTimeout(timeout);
  }, [downloaded]);

  return (
    <section
      aria-labelledby="table-11-title"
      className="w-full max-w-2xl rounded-xl border bg-card text-card-foreground"
    >
      <div className="flex flex-wrap items-end justify-between gap-3 px-4 pt-4 pb-3">
        <div className="grid gap-1">
          <h3 id="table-11-title" className="font-semibold">
            Billing history
          </h3>
          <p className="text-sm text-muted-foreground">
            Invoices are emailed to billing@northwind.io on each renewal.
          </p>
        </div>
        <Button variant="outline" size="sm" onClick={exportCsv}>
          <DownloadIcon aria-hidden="true" data-icon="inline-start" />
          Export CSV
        </Button>
      </div>
      <Table aria-labelledby="table-11-title">
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead className="pl-4">Invoice</TableHead>
            <TableHead className="hidden sm:table-cell">Description</TableHead>
            <TableHead className="hidden sm:table-cell">Status</TableHead>
            <TableHead className="text-right">Amount</TableHead>
            <TableHead className="w-12 pr-4">
              <span className="sr-only">Download</span>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {invoices.map((invoice) => (
            <TableRow key={invoice.id}>
              <TableCell className="pl-4">
                <div className="font-medium">{invoice.date}</div>
                <div className="font-mono text-xs text-muted-foreground">
                  {invoice.id}
                </div>
                <Badge
                  className={`mt-1.5 sm:hidden ${statusClass[invoice.status]}`}
                >
                  {statusLabel[invoice.status]}
                </Badge>
              </TableCell>
              <TableCell className="hidden text-muted-foreground sm:table-cell">
                {invoice.plan}
              </TableCell>
              <TableCell className="hidden sm:table-cell">
                <Badge className={statusClass[invoice.status]}>
                  {statusLabel[invoice.status]}
                </Badge>
              </TableCell>
              <TableCell
                className={
                  invoice.status === "refunded"
                    ? "text-right tabular-nums text-muted-foreground line-through"
                    : "text-right tabular-nums"
                }
              >
                {invoice.amount}
              </TableCell>
              <TableCell className="pr-4 text-right">
                <Button
                  variant="ghost"
                  size="icon-sm"
                  aria-label={
                    downloaded === invoice.id
                      ? `${invoice.id} downloaded`
                      : `Download ${invoice.id} as PDF`
                  }
                  onClick={() => setDownloaded(invoice.id)}
                >
                  {downloaded === invoice.id ? (
                    <CheckIcon aria-hidden="true" className="text-success" />
                  ) : (
                    <DownloadIcon aria-hidden="true" />
                  )}
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </section>
  );
}