Table

import { Badge } from "@/components/ui/badge";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const invoices = [
  {
    id: "INV-1042",
    customer: "Acme Corp",
    status: "Paid",
    amount: "$2,500.00",
  },
  {
    id: "INV-1043",
    customer: "Globex",
    status: "Pending",
    amount: "$1,150.00",
  },
  {
    id: "INV-1044",
    customer: "Initech",
    status: "Overdue",
    amount: "$3,420.00",
  },
  { id: "INV-1045", customer: "Umbrella", status: "Paid", amount: "$980.00" },
];

const tone = {
  Paid: "success",
  Pending: "warning",
  Overdue: "danger",
} as const;

export default function TableDemo() {
  return (
    <Table aria-label="Invoices" className="min-w-[480px]">
      <TableHeader>
        <Column isRowHeader>Invoice</Column>
        <Column>Customer</Column>
        <Column>Status</Column>
        <Column className="text-right">Amount</Column>
      </TableHeader>
      <TableBody items={invoices}>
        {(invoice) => (
          <Row>
            <Cell className="font-medium">{invoice.id}</Cell>
            <Cell>{invoice.customer}</Cell>
            <Cell>
              <Badge
                variant="dot"
                color={tone[invoice.status as keyof typeof tone]}
              >
                {invoice.status}
              </Badge>
            </Cell>
            <Cell className="text-right tabular-nums">{invoice.amount}</Cell>
          </Row>
        )}
      </TableBody>
    </Table>
  );
}

import { useState } from "react";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";
import { ToggleButton } from "@/components/ui/toggle-button";
import { ToggleButtonGroup } from "@/components/ui/toggle-button-group";

const rows = [
  { id: 1, host: "api-prod-01", region: "us-east-1", cpu: "42%" },
  { id: 2, host: "api-prod-02", region: "us-east-1", cpu: "38%" },
  { id: 3, host: "worker-01", region: "eu-central-1", cpu: "71%" },
  { id: 4, host: "worker-02", region: "eu-central-1", cpu: "66%" },
];

export default function TableDensity() {
  const [density, setDensity] = useState<"compact" | "default" | "comfortable">(
    "compact",
  );
  return (
    <div className="flex w-full flex-col gap-3">
      <ToggleButtonGroup
        variant="segmented"
        size="sm"
        aria-label="Density"
        selectedKeys={[density]}
        onSelectionChange={(keys) => setDensity([...keys][0] as typeof density)}
        disallowEmptySelection
      >
        <ToggleButton id="compact">Compact</ToggleButton>
        <ToggleButton id="default">Default</ToggleButton>
        <ToggleButton id="comfortable">Comfortable</ToggleButton>
      </ToggleButtonGroup>
      <Table
        aria-label="Hosts"
        density={density}
        striped
        bordered
        className="min-w-[420px]"
      >
        <TableHeader>
          <Column isRowHeader>Host</Column>
          <Column>Region</Column>
          <Column className="text-right">CPU</Column>
        </TableHeader>
        <TableBody items={rows}>
          {(r) => (
            <Row>
              <Cell className="font-mono text-xs">{r.host}</Cell>
              <Cell>{r.region}</Cell>
              <Cell className="text-right tabular-nums">{r.cpu}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const limits = [
  { id: "requests", name: "API requests", free: "10k / mo", pro: "1M / mo" },
  { id: "seats", name: "Seats", free: "3", pro: "Unlimited" },
  { id: "storage", name: "Storage", free: "1 GB", pro: "100 GB" },
  { id: "retention", name: "Log retention", free: "7 days", pro: "90 days" },
];

export default function TableFramed() {
  return (
    <div className="w-full max-w-lg rounded-xl border bg-card p-4 shadow-xs">
      <h3 className="mb-2 font-semibold text-sm">Plan limits</h3>
      <Table aria-label="Plan limits" framed={false} density="compact">
        <TableHeader>
          <Column isRowHeader>Limit</Column>
          <Column className="text-right">Free</Column>
          <Column className="text-right">Pro</Column>
        </TableHeader>
        <TableBody items={limits}>
          {(l) => (
            <Row>
              <Cell>{l.name}</Cell>
              <Cell className="text-right text-muted-foreground">{l.free}</Cell>
              <Cell className="text-right font-medium">{l.pro}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import { useState } from "react";
import type { Selection } from "react-aria-components";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const plans = [
  {
    id: "starter",
    name: "Starter",
    cpu: "1 vCPU",
    memory: "1 GB",
    price: "$5 / mo",
  },
  {
    id: "standard",
    name: "Standard",
    cpu: "2 vCPU",
    memory: "4 GB",
    price: "$24 / mo",
  },
  {
    id: "performance",
    name: "Performance",
    cpu: "4 vCPU",
    memory: "8 GB",
    price: "$48 / mo",
  },
  {
    id: "memory",
    name: "Memory optimized",
    cpu: "4 vCPU",
    memory: "32 GB",
    price: "$96 / mo",
  },
];

export default function TableSingleSelection() {
  const [selected, setSelected] = useState<Selection>(new Set(["standard"]));
  const plan = plans.find((p) => selected !== "all" && selected.has(p.id));
  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <Table
        aria-label="Instance size"
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={selected}
        onSelectionChange={setSelected}
      >
        <TableHeader>
          <Column isRowHeader>Plan</Column>
          <Column>CPU</Column>
          <Column>Memory</Column>
          <Column className="text-right">Price</Column>
        </TableHeader>
        <TableBody items={plans}>
          {(p) => (
            <Row>
              <Cell className="font-medium">{p.name}</Cell>
              <Cell>{p.cpu}</Cell>
              <Cell>{p.memory}</Cell>
              <Cell className="text-right tabular-nums">{p.price}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
      <p className="text-muted-foreground text-xs">
        Selected: {plan?.name ?? "none"}
      </p>
    </div>
  );
}

import { useMemo, useState } from "react";
import type { Selection, SortDescriptor } from "react-aria-components";
import { Avatar } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const users = [
  { id: 1, name: "Olivia Martin", email: "olivia@acme.com", role: "Admin" },
  { id: 2, name: "Jackson Lee", email: "jackson@acme.com", role: "Member" },
  { id: 3, name: "Isabella Nguyen", email: "isabella@acme.com", role: "Owner" },
  { id: 4, name: "William Kim", email: "will@acme.com", role: "Member" },
];
type User = (typeof users)[number];

export default function TableSelectionSorting() {
  const [sort, setSort] = useState<SortDescriptor>({
    column: "name",
    direction: "ascending",
  });
  const [selected, setSelected] = useState<Selection>(new Set([2]));
  const items = useMemo(() => {
    const key = sort.column as keyof User;
    return [...users].sort((a, b) => {
      const cmp = String(a[key]).localeCompare(String(b[key]));
      return sort.direction === "descending" ? -cmp : cmp;
    });
  }, [sort]);
  const count = selected === "all" ? users.length : selected.size;
  return (
    <div className="flex w-full flex-col gap-2">
      <p className="text-muted-foreground text-xs">{count} selected</p>
      <Table
        aria-label="Members"
        selectionMode="multiple"
        selectedKeys={selected}
        onSelectionChange={setSelected}
        sortDescriptor={sort}
        onSortChange={setSort}
        className="min-w-[420px]"
      >
        <TableHeader>
          <Column id="name" isRowHeader allowsSorting>
            Name
          </Column>
          <Column id="role" allowsSorting>
            Role
          </Column>
        </TableHeader>
        <TableBody items={items}>
          {(user) => (
            <Row>
              <Cell>
                <div className="flex items-center gap-2.5">
                  <Avatar
                    size="sm"
                    colorful
                    alt={user.name}
                    fallback={user.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  />
                  <div className="flex flex-col">
                    <span className="font-medium">{user.name}</span>
                    <span className="text-muted-foreground text-xs">
                      {user.email}
                    </span>
                  </div>
                </div>
              </Cell>
              <Cell>
                <Badge color={user.role === "Owner" ? "primary" : "neutral"}>
                  {user.role}
                </Badge>
              </Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import { useMemo, useState } from "react";
import type { SortDescriptor } from "react-aria-components";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const countries = [
  {
    id: "de",
    name: "Germany",
    capital: "Berlin",
    population: 84.5,
    area: 357588,
  },
  {
    id: "jp",
    name: "Japan",
    capital: "Tokyo",
    population: 124.5,
    area: 377975,
  },
  {
    id: "br",
    name: "Brazil",
    capital: "Brasília",
    population: 216.4,
    area: 8515767,
  },
  {
    id: "np",
    name: "Nepal",
    capital: "Kathmandu",
    population: 30.9,
    area: 147516,
  },
  {
    id: "ca",
    name: "Canada",
    capital: "Ottawa",
    population: 40.1,
    area: 9984670,
  },
  {
    id: "ke",
    name: "Kenya",
    capital: "Nairobi",
    population: 55.1,
    area: 580367,
  },
];
type Country = (typeof countries)[number];

export default function TableSorting() {
  const [sort, setSort] = useState<SortDescriptor>({
    column: "population",
    direction: "descending",
  });
  const rows = useMemo(() => {
    const key = sort.column as keyof Country;
    return [...countries].sort((a, b) => {
      const x = a[key];
      const y = b[key];
      const cmp =
        typeof x === "number" && typeof y === "number"
          ? x - y
          : String(x).localeCompare(String(y));
      return sort.direction === "descending" ? -cmp : cmp;
    });
  }, [sort]);

  return (
    <div className="w-full max-w-xl">
      <Table
        aria-label="Countries"
        sortDescriptor={sort}
        onSortChange={setSort}
      >
        <TableHeader>
          <Column id="name" isRowHeader allowsSorting>
            Country
          </Column>
          <Column id="capital" allowsSorting>
            Capital
          </Column>
          <Column id="population" allowsSorting className="text-right">
            Population (M)
          </Column>
          <Column id="area" allowsSorting className="text-right">
            Area (km²)
          </Column>
        </TableHeader>
        <TableBody items={rows}>
          {(c) => (
            <Row>
              <Cell className="font-medium">{c.name}</Cell>
              <Cell>{c.capital}</Cell>
              <Cell className="text-right tabular-nums">
                {c.population.toFixed(1)}
              </Cell>
              <Cell className="text-right tabular-nums">
                {c.area.toLocaleString()}
              </Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const emails = [
  {
    id: 1,
    from: "Stripe",
    subject: "Your October payout is on its way",
    date: "Oct 2",
  },
  {
    id: 2,
    from: "Linear",
    subject: "Weekly digest: 14 issues closed",
    date: "Oct 1",
  },
  {
    id: 3,
    from: "Vercel",
    subject: "Deployment succeeded for web-app",
    date: "Sep 30",
  },
  {
    id: 4,
    from: "GitHub",
    subject: "[acme/api] PR #482 approved",
    date: "Sep 30",
  },
  {
    id: 5,
    from: "Figma",
    subject: "Ana shared “Checkout v3” with you",
    date: "Sep 29",
  },
];

export default function TableSelectionBehavior() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-2">
      <Table
        aria-label="Inbox"
        selectionMode="multiple"
        selectionBehavior="replace"
        density="compact"
        defaultSelectedKeys={[2]}
      >
        <TableHeader>
          <Column isRowHeader>From</Column>
          <Column>Subject</Column>
          <Column className="text-right">Date</Column>
        </TableHeader>
        <TableBody items={emails}>
          {(m) => (
            <Row>
              <Cell className="font-medium">{m.from}</Cell>
              <Cell className="max-w-64 truncate">{m.subject}</Cell>
              <Cell className="text-right text-muted-foreground">{m.date}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
      <p className="text-muted-foreground text-xs">
        Click selects a row. ⌘/Ctrl or Shift to select more.
      </p>
    </div>
  );
}

import { Badge } from "@/components/ui/badge";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const keys = [
  { id: "k1", name: "Production", prefix: "sk_live_4f…", status: "Active" },
  { id: "k2", name: "Staging", prefix: "sk_test_91…", status: "Active" },
  {
    id: "k3",
    name: "Legacy integration",
    prefix: "sk_live_0a…",
    status: "Revoked",
  },
  { id: "k4", name: "CI pipeline", prefix: "sk_test_7c…", status: "Active" },
];

export default function TableDisabled() {
  return (
    <div className="w-full max-w-xl">
      <Table
        aria-label="API keys"
        selectionMode="multiple"
        disabledKeys={keys
          .filter((k) => k.status === "Revoked")
          .map((k) => k.id)}
      >
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Key</Column>
          <Column>Status</Column>
        </TableHeader>
        <TableBody items={keys}>
          {(k) => (
            <Row className="data-disabled:text-muted-foreground">
              <Cell className="font-medium">{k.name}</Cell>
              <Cell className="font-mono text-xs">{k.prefix}</Cell>
              <Cell>
                <Badge
                  variant="dot"
                  color={k.status === "Active" ? "success" : "neutral"}
                >
                  {k.status}
                </Badge>
              </Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import { useState } from "react";
import type { Key } from "react-aria-components";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const deployments = [
  {
    id: "dpl_8f2a",
    branch: "main",
    commit: "Fix checkout tax rounding",
    env: "Production",
    age: "4m",
  },
  {
    id: "dpl_71c9",
    branch: "feat/sso",
    commit: "Add SAML metadata endpoint",
    env: "Preview",
    age: "38m",
  },
  {
    id: "dpl_5e10",
    branch: "main",
    commit: "Bump dependencies",
    env: "Production",
    age: "2h",
  },
  {
    id: "dpl_3b44",
    branch: "fix/date-picker",
    commit: "Keep focus in popover",
    env: "Preview",
    age: "5h",
  },
];

export default function TableRowActions() {
  const [opened, setOpened] = useState<Key | null>(null);
  const current = deployments.find((d) => d.id === opened);
  return (
    <div className="flex w-full max-w-2xl flex-col gap-2">
      <Table aria-label="Deployments" onRowAction={setOpened}>
        <TableHeader>
          <Column isRowHeader>Commit</Column>
          <Column>Branch</Column>
          <Column>Environment</Column>
          <Column className="text-right">Age</Column>
        </TableHeader>
        <TableBody items={deployments}>
          {(d) => (
            <Row className="cursor-pointer">
              <Cell className="font-medium">{d.commit}</Cell>
              <Cell className="font-mono text-xs">{d.branch}</Cell>
              <Cell>{d.env}</Cell>
              <Cell className="text-right text-muted-foreground">{d.age}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
      <p className="text-muted-foreground text-xs">
        {current
          ? `Opened ${current.id} (${current.commit})`
          : "Click a row or press Enter to open a deployment."}
      </p>
    </div>
  );
}

import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const components = [
  { id: "button", name: "Button", category: "Actions", parts: 1 },
  { id: "select", name: "Select", category: "Forms", parts: 4 },
  { id: "dialog", name: "Dialog", category: "Overlays", parts: 9 },
  { id: "table", name: "Table", category: "Collections", parts: 6 },
];

export default function TableLinks() {
  return (
    <div className="w-full max-w-xl">
      <Table aria-label="Components">
        <TableHeader>
          <Column isRowHeader>Component</Column>
          <Column>Category</Column>
          <Column className="text-right">Parts</Column>
        </TableHeader>
        <TableBody items={components}>
          {(c) => (
            <Row href={`/docs/components/${c.id}`} className="cursor-pointer">
              <Cell className="font-medium text-brand">{c.name}</Cell>
              <Cell>{c.category}</Cell>
              <Cell className="text-right tabular-nums">{c.parts}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import { Columns3Icon } from "lucide-react";
import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Button } from "@/components/ui/button";
import { MenuContent, MenuItem, MenuTrigger } from "@/components/ui/menu";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const allColumns = [
  { id: "name", name: "Customer", isRowHeader: true },
  { id: "email", name: "Email" },
  { id: "plan", name: "Plan" },
  { id: "seats", name: "Seats" },
  { id: "mrr", name: "MRR" },
  { id: "country", name: "Country" },
] as const;

type ColumnId = (typeof allColumns)[number]["id"];

const customers: ({ id: number } & Record<ColumnId, string>)[] = [
  {
    id: 1,
    name: "Northwind",
    email: "ops@northwind.io",
    plan: "Enterprise",
    seats: "240",
    mrr: "$18,400",
    country: "US",
  },
  {
    id: 2,
    name: "Fabrikam",
    email: "it@fabrikam.com",
    plan: "Business",
    seats: "56",
    mrr: "$3,920",
    country: "DE",
  },
  {
    id: 3,
    name: "Tailspin",
    email: "hello@tailspin.dev",
    plan: "Pro",
    seats: "12",
    mrr: "$480",
    country: "CA",
  },
  {
    id: 4,
    name: "Contoso",
    email: "billing@contoso.co",
    plan: "Business",
    seats: "88",
    mrr: "$6,160",
    country: "UK",
  },
];

export default function TableDynamicColumns() {
  const [visible, setVisible] = useState<Selection>(
    new Set(["name", "plan", "seats", "mrr"]),
  );
  const columns = allColumns.filter(
    (c) => c.id === "name" || visible === "all" || visible.has(c.id),
  );
  return (
    <div className="flex w-full max-w-2xl flex-col items-end gap-2">
      <MenuTrigger>
        <Button size="sm" variant="outline">
          <Columns3Icon /> Columns
        </Button>
        <MenuContent
          selectionMode="multiple"
          selectedKeys={visible}
          onSelectionChange={setVisible}
          disabledKeys={["name"]}
          items={allColumns}
          placement="bottom end"
        >
          {(c) => <MenuItem>{c.name}</MenuItem>}
        </MenuContent>
      </MenuTrigger>
      <Table aria-label="Customers">
        <TableHeader columns={columns}>
          {(c) => (
            <Column isRowHeader={"isRowHeader" in c && c.isRowHeader}>
              {c.name}
            </Column>
          )}
        </TableHeader>
        <TableBody items={customers} dependencies={[columns]}>
          {(item) => (
            <Row columns={columns}>{(c) => <Cell>{item[c.id]}</Cell>}</Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import { Avatar } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const projects = [
  {
    id: 1,
    name: "Checkout v3",
    owner: "Ana Souza",
    status: "On track",
    progress: 72,
    due: "Oct 18",
  },
  {
    id: 2,
    name: "SSO for enterprise",
    owner: "Kenji Watanabe",
    status: "At risk",
    progress: 41,
    due: "Oct 31",
  },
  {
    id: 3,
    name: "Usage-based billing",
    owner: "Maya Patel",
    status: "Blocked",
    progress: 18,
    due: "Nov 14",
  },
  {
    id: 4,
    name: "Docs search",
    owner: "Leo Fischer",
    status: "Done",
    progress: 100,
    due: "Sep 26",
  },
];
const tone = {
  "On track": "success",
  "At risk": "warning",
  Blocked: "danger",
  Done: "neutral",
} as const;

export default function TableRichCells() {
  return (
    <div className="w-full max-w-2xl">
      <Table aria-label="Projects">
        <TableHeader>
          <Column isRowHeader>Project</Column>
          <Column>Owner</Column>
          <Column>Status</Column>
          <Column className="w-40">Progress</Column>
          <Column className="text-right">Due</Column>
        </TableHeader>
        <TableBody items={projects}>
          {(p) => (
            <Row>
              <Cell className="font-medium">{p.name}</Cell>
              <Cell>
                <span className="flex items-center gap-2">
                  <Avatar
                    size="xs"
                    colorful
                    alt={p.owner}
                    fallback={p.owner
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  />
                  {p.owner}
                </span>
              </Cell>
              <Cell>
                <Badge
                  variant="soft"
                  color={tone[p.status as keyof typeof tone]}
                >
                  {p.status}
                </Badge>
              </Cell>
              <Cell>
                <span className="flex items-center gap-2">
                  <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
                    <span
                      className="block h-full rounded-full bg-brand"
                      style={{ width: `${p.progress}%` }}
                    />
                  </span>
                  <span className="w-8 text-right text-muted-foreground text-xs tabular-nums">
                    {p.progress}%
                  </span>
                </span>
              </Cell>
              <Cell className="text-right text-muted-foreground">{p.due}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import { SearchXIcon } from "lucide-react";
import { Column, Table, TableBody, TableHeader } from "@/components/ui/table";

export default function TableEmpty() {
  return (
    <Table aria-label="Alerts" className="min-w-[420px]">
      <TableHeader>
        <Column isRowHeader>Alert</Column>
        <Column>Severity</Column>
        <Column>Time</Column>
      </TableHeader>
      <TableBody
        renderEmptyState={() => (
          <div className="flex flex-col items-center gap-2 py-4">
            <SearchXIcon className="size-6 text-muted-foreground/60" />
            <span>No alerts match your filters.</span>
          </div>
        )}
      >
        {[]}
      </TableBody>
    </Table>
  );
}

import { GripVerticalIcon } from "lucide-react";
import { Button, useDragAndDrop, useListData } from "react-aria-components";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

export default function TableReorder() {
  const list = useListData({
    initialItems: [
      { id: "email", channel: "Email", delay: "Immediately" },
      { id: "slack", channel: "Slack #on-call", delay: "After 5 min" },
      { id: "sms", channel: "SMS", delay: "After 10 min" },
      { id: "phone", channel: "Phone call", delay: "After 15 min" },
    ],
  });
  const { dragAndDropHooks } = useDragAndDrop({
    getItems: (keys) =>
      [...keys].map((key) => ({
        "text/plain": list.getItem(key)?.channel ?? "",
      })),
    onReorder(e) {
      if (e.target.dropPosition === "before") {
        list.moveBefore(e.target.key, e.keys);
      } else if (e.target.dropPosition === "after") {
        list.moveAfter(e.target.key, e.keys);
      }
    },
  });
  return (
    <div className="w-full max-w-lg">
      <Table aria-label="Escalation policy" dragAndDropHooks={dragAndDropHooks}>
        <TableHeader>
          <Column className="w-8">
            <span className="sr-only">Reorder</span>
          </Column>
          <Column className="w-10">Step</Column>
          <Column isRowHeader>Channel</Column>
          <Column>Notify</Column>
        </TableHeader>
        <TableBody items={list.items} dependencies={[list.items]}>
          {(item) => (
            <Row className="data-dragging:opacity-50 data-drop-target:bg-accent">
              <Cell>
                <Button
                  slot="drag"
                  className="flex cursor-grab items-center text-muted-foreground outline-none data-focus-visible:ring-2 data-focus-visible:ring-ring/30"
                >
                  <GripVerticalIcon aria-hidden className="size-4" />
                </Button>
              </Cell>
              <Cell className="text-muted-foreground tabular-nums">
                {list.items.indexOf(item) + 1}
              </Cell>
              <Cell className="font-medium">{item.channel}</Cell>
              <Cell>{item.delay}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const plans = [
  { id: "starter", name: "Starter", seats: "3", storage: "10 GB", price: "$0" },
  { id: "team", name: "Team", seats: "25", storage: "250 GB", price: "$12" },
  {
    id: "business",
    name: "Business",
    seats: "100",
    storage: "2 TB",
    price: "$24",
  },
  {
    id: "enterprise",
    name: "Enterprise",
    seats: "Unlimited",
    storage: "Custom",
    price: "Talk to us",
  },
];

export default function TableGridless() {
  return (
    <Table aria-label="Plans" divided={false} framed={false} striped>
      <TableHeader>
        <Column isRowHeader>Plan</Column>
        <Column>Seats</Column>
        <Column>Storage</Column>
        <Column className="text-right">Per seat / month</Column>
      </TableHeader>
      <TableBody items={plans}>
        {(p) => (
          <Row>
            <Cell className="font-medium">{p.name}</Cell>
            <Cell className="tabular-nums">{p.seats}</Cell>
            <Cell className="tabular-nums">{p.storage}</Cell>
            <Cell className="text-right tabular-nums">{p.price}</Cell>
          </Row>
        )}
      </TableBody>
    </Table>
  );
}

import { Avatar } from "@/components/ui/avatar";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
} from "@/components/ui/table";

const people = [
  {
    id: "1",
    name: "Maya Chen",
    email: "maya@fernhill.studio",
    role: "Owner",
    last: "2 min ago",
  },
  {
    id: "2",
    name: "Tomás Rivera",
    email: "tomas@fernhill.studio",
    role: "Admin",
    last: "1 h ago",
  },
  {
    id: "3",
    name: "Hana Kobayashi",
    email: "hana@fernhill.studio",
    role: "Editor",
    last: "Yesterday",
  },
  {
    id: "4",
    name: "Arjun Mehta",
    email: "arjun@fernhill.studio",
    role: "Viewer",
    last: "Sep 28",
  },
];

export default function TableBleed() {
  return (
    <section className="w-full rounded-xl border bg-card px-4 py-5 sm:px-6">
      <h3 className="font-semibold">Members</h3>
      <p className="mt-1 text-muted-foreground text-sm">
        The table runs edge to edge; its first and last columns line up with
        this text.
      </p>
      <div className="mt-4">
        <Table aria-label="Workspace members" bleed>
          <TableHeader>
            <Column isRowHeader>Name</Column>
            <Column>Role</Column>
            <Column className="text-right">Last active</Column>
          </TableHeader>
          <TableBody items={people}>
            {(p) => (
              <Row>
                <Cell>
                  <span className="flex items-center gap-2.5">
                    <Avatar
                      size="sm"
                      alt={p.name}
                      fallback={p.name.slice(0, 1)}
                    />
                    <span className="flex flex-col">
                      <span className="font-medium">{p.name}</span>
                      <span className="text-muted-foreground text-xs">
                        {p.email}
                      </span>
                    </span>
                  </span>
                </Cell>
                <Cell className="text-muted-foreground">{p.role}</Cell>
                <Cell className="text-right text-muted-foreground">
                  {p.last}
                </Cell>
              </Row>
            )}
          </TableBody>
        </Table>
      </div>
    </section>
  );
}

import { Fragment, useState } from "react";
import { Badge } from "@/components/ui/badge";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableExpandButton,
  TableHeader,
} from "@/components/ui/table";

const orders = [
  {
    id: "ORD-4821",
    customer: "Fernhill Studio",
    status: "Shipped",
    total: 1284,
    items: [
      { sku: "DSK-OAK-140", name: "Oak desk, 140 cm", qty: 1, price: 940 },
      { sku: "LMP-BRS-02", name: "Brass task lamp", qty: 2, price: 172 },
    ],
  },
  {
    id: "ORD-4820",
    customer: "Halcyon Health",
    status: "Processing",
    total: 2310,
    items: [
      { sku: "CHR-ERG-11", name: "Ergonomic chair", qty: 3, price: 690 },
      { sku: "MAT-FLT-90", name: "Floor mat, 90 cm", qty: 3, price: 80 },
    ],
  },
  {
    id: "ORD-4819",
    customer: "Copperleaf Foods",
    status: "Delivered",
    total: 486,
    items: [
      { sku: "SHF-WAL-80", name: "Wall shelf, 80 cm", qty: 3, price: 162 },
    ],
  },
];

const tone = {
  Shipped: "info",
  Processing: "warning",
  Delivered: "success",
} as const;

const money = (n: number) =>
  n.toLocaleString("en-US", { style: "currency", currency: "USD" });

export default function TableExpandable() {
  const [open, setOpen] = useState<Set<string>>(new Set(["ORD-4821"]));
  const toggle = (id: string) =>
    setOpen((s) => {
      const next = new Set(s);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });

  return (
    <Table aria-label="Orders">
      <TableHeader>
        <Column width={44} aria-label="Expand" />
        <Column isRowHeader>Order</Column>
        <Column>Customer</Column>
        <Column>Status</Column>
        <Column className="text-right">Total</Column>
      </TableHeader>
      <TableBody>
        {orders.map((o) => (
          <Fragment key={o.id}>
            <Row id={o.id}>
              <Cell>
                <TableExpandButton
                  isExpanded={open.has(o.id)}
                  onPress={() => toggle(o.id)}
                  aria-label={`${open.has(o.id) ? "Hide" : "Show"} items in ${o.id}`}
                />
              </Cell>
              <Cell className="font-medium font-mono text-xs">{o.id}</Cell>
              <Cell>{o.customer}</Cell>
              <Cell>
                <Badge
                  variant="soft"
                  color={tone[o.status as keyof typeof tone]}
                >
                  {o.status}
                </Badge>
              </Cell>
              <Cell className="text-right tabular-nums">{money(o.total)}</Cell>
            </Row>
            {open.has(o.id) && (
              <Row
                id={`${o.id}-items`}
                className="bg-muted/30 data-hovered:bg-muted/30"
              >
                <Cell colSpan={5} className="py-0">
                  <ul className="divide-y py-1 pl-11">
                    {o.items.map((it) => (
                      <li
                        key={it.sku}
                        className="flex items-center gap-4 py-2 text-sm"
                      >
                        <span className="w-28 font-mono text-muted-foreground text-xs">
                          {it.sku}
                        </span>
                        <span className="flex-1">{it.name}</span>
                        <span className="text-muted-foreground tabular-nums">
                          {it.qty} × {money(it.price)}
                        </span>
                        <span className="w-24 text-right tabular-nums">
                          {money(it.qty * it.price)}
                        </span>
                      </li>
                    ))}
                  </ul>
                </Cell>
              </Row>
            )}
          </Fragment>
        ))}
      </TableBody>
    </Table>
  );
}

import { useEffect, useRef, useState } from "react";
import {
  Cell,
  Column,
  Row,
  Table,
  TableBody,
  TableHeader,
  TableLoadMore,
} from "@/components/ui/table";

const services = ["api", "web", "worker", "billing", "search", "auth"];
const levels = ["info", "info", "info", "warn", "error"] as const;
const messages = [
  "Request completed",
  "Cache miss, fetched from origin",
  "Retrying webhook delivery",
  "Slow query (412 ms)",
  "Token refreshed",
  "Job enqueued",
];

function makeEvents(start: number, count: number) {
  return Array.from({ length: count }, (_, k) => {
    const i = start + k;
    const t = new Date(Date.UTC(2026, 9, 5, 14, 0, 0) - i * 37_000);
    return {
      id: `evt_${(9000 - i).toString(36)}${i}`,
      time: t.toISOString().slice(11, 19),
      service: services[(i * 7) % services.length],
      level: levels[(i * 3) % levels.length],
      message: messages[(i * 5) % messages.length],
    };
  });
}

const TOTAL = 120;

export default function TableInfinite() {
  const [rows, setRows] = useState(() => makeEvents(0, 20));
  const [loading, setLoading] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);

  const loadMore = () => {
    if (loading || rows.length >= TOTAL) return;
    setLoading(true);
    // Simulates a paginated API call.
    timer.current = setTimeout(() => {
      setRows((r) => [...r, ...makeEvents(r.length, 20)]);
      setLoading(false);
    }, 700);
  };

  return (
    <div className="flex w-full flex-col gap-2">
      <Table
        aria-label="Event log"
        density="compact"
        containerClassName="max-h-80"
      >
        <TableHeader>
          <Column isRowHeader>Time (UTC)</Column>
          <Column>Service</Column>
          <Column>Level</Column>
          <Column>Message</Column>
        </TableHeader>
        <TableBody>
          {rows.map((e) => (
            <Row key={e.id} id={e.id}>
              <Cell className="font-mono text-xs tabular-nums">{e.time}</Cell>
              <Cell className="font-mono text-xs">{e.service}</Cell>
              <Cell>
                <span
                  className={
                    e.level === "error"
                      ? "text-destructive"
                      : e.level === "warn"
                        ? "text-warning"
                        : "text-muted-foreground"
                  }
                >
                  {e.level}
                </span>
              </Cell>
              <Cell>{e.message}</Cell>
            </Row>
          ))}
          {rows.length < TOTAL && (
            <TableLoadMore isLoading={loading} onLoadMore={loadMore} />
          )}
        </TableBody>
      </Table>
      <p className="text-muted-foreground text-xs" aria-live="polite">
        {rows.length} of {TOTAL} events
        {rows.length >= TOTAL && " · end of log"}
      </p>
    </div>
  );
}