Table

<TableHead>Column title</TableHead>

<TableHead>
  <span className="inline-flex items-center gap-2">
    <Tooltip>
      <TooltipTrigger>
        <Info weight="light" className="size-4" />
      </TooltipTrigger>
      <TooltipContent>Explain the column</TooltipContent>
    </Tooltip>
    Column title
  </span>
</TableHead>

<TableHead>
  <button type="button" className="inline-flex items-center gap-2">
    Column title
    <ArrowDown weight="light" className="size-4" />
  </button>
</TableHead>

<TableHead>
  <span className="inline-flex items-center gap-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <button type="button" aria-label="About this column">
          <Info weight="light" className="size-4" />
        </button>
      </TooltipTrigger>
      <TooltipContent>Short helper text.</TooltipContent>
    </Tooltip>
    <button type="button" className="inline-flex items-center gap-2">
      Column title
      <ArrowDown weight="light" className="size-4" />
    </button>
  </span>
</TableHead>

<TableHead>Value</TableHead>
<TableCell className="tabular-nums">{value}</TableCell>

// Content stays LEFT-aligned per Yuno spec.
// tabular-nums locks digit widths so numbers line up vertically.

<div className="w-full overflow-hidden rounded-lg border bg-card">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead>Type</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Value</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {rows.map((r) => (
        <TableRow key={r.name}>
          <TableCell>{r.name}</TableCell>
          <TableCell>{r.type}</TableCell>
          <TableCell>{r.status}</TableCell>
          <TableCell className="tabular-nums">{r.value}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</div>

<TableHead>
  <button
    type="button"
    onClick={() => setSortDir((d) => (d === "asc" ? "desc" : "asc"))}
    className="inline-flex items-center gap-2"
  >
    Value
    <ArrowDown
      weight="light"
      className={cn("size-4 transition-transform", sortDir === "asc" && "rotate-180")}
    />
  </button>
</TableHead>

<TableHead>
  <span className="inline-flex items-center gap-2">
    <Tooltip>
      <TooltipTrigger asChild>
        <button type="button" aria-label="About this column">
          <Info weight="light" className="size-4" />
        </button>
      </TooltipTrigger>
      <TooltipContent>Short helper text.</TooltipContent>
    </Tooltip>
    Value
  </span>
</TableHead>

<TableRow data-state="selected">
  {/* cells */}
</TableRow>

{/* Reuse the two documented cell types — see "Cell types" below.
   Eye when the ONLY action is view-details.
   Dots + DropdownMenu when there are 2+ actions per row. */}
<TableCell className="sticky right-0 z-10 w-10 pl-4 pr-4! border-l border-border bg-card">
  {/* single: Eye + Tooltip */}
  {/* multiple: Dots + Tooltip + DropdownMenu */}
</TableCell>

{/* When the table has more columns than the container can show,
   the outer overflow-auto scrolls horizontally.
   Reuse either documented cell type (see "Cell types" below):
   - Eye action (single: view details)
   - Dots action (multiple: DropdownMenu)
   Both must be sticky right-0 with border-l bg-card. */}

<TableHead className="sticky right-0 z-10 w-10 pl-4 pr-4! border-l border-border bg-sidebar" />

{/* Eye — single action */}
<TableCell className="sticky right-0 z-10 w-10 pl-4 pr-4! border-l border-border bg-card">
  <Tooltip>
    <TooltipTrigger asChild>
      <button
        type="button"
        aria-label="View details"
        className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-transparent bg-transparent text-muted-foreground transition-all hover:border-border hover:bg-background hover:text-foreground hover:shadow-xs"
      >
        <Eye weight="light" className="size-4" />
      </button>
    </TooltipTrigger>
    <TooltipContent side="top" sideOffset={6}>View details</TooltipContent>
  </Tooltip>
</TableCell>

{/* Dots — multiple actions (see cellTypes.dotsAction for the full snippet) */}

{/* Header Checkbox = select-all (with indeterminate state).
   Row Checkbox = per-row toggle. */}

const [checked, setChecked] = React.useState<Set<string>>(new Set());

const allChecked = checked.size === rows.length;
const someChecked = checked.size > 0 && checked.size < rows.length;
const headerState = allChecked ? true : someChecked ? "indeterminate" : false;

const toggleAll = () => {
  setChecked(allChecked ? new Set() : new Set(rows.map((r) => r.id)));
};

const toggleRow = (id: string) => {
  setChecked((prev) => {
    const next = new Set(prev);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    return next;
  });
};

<TableHead className="sticky left-0 z-10 w-10 pl-4! pr-4 border-r border-border bg-sidebar">
  <Checkbox
    checked={headerState}
    onCheckedChange={toggleAll}
    aria-label="Select all rows"
  />
</TableHead>

<TableCell className="sticky left-0 z-10 w-10 pl-4! pr-4 border-r border-border bg-card">
  <Checkbox
    checked={checked.has(row.id)}
    onCheckedChange={() => toggleRow(row.id)}
    aria-label={`Select ${row.name}`}
  />
</TableCell>

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