Table

Thin wrappers over native table elements with `data-slot` names and `cn()`
merging, no primitive. `Table` renders a `relative w-full overflow-x-auto`
container around a `w-full caption-bottom border-collapse text-sm` table.
Row dividers are `border-b border-border` on each `tr`; the header adds it
with `[&_tr]:border-b`, the body removes it from its last row with
`[&_tr:last-child]:border-0`, and the footer adds a top border instead. Cells
use `px-3` (header 40 px tall, body cells `py-2.5`) and `whitespace-nowrap` so
columns size to content and the container scrolls. Selection is drawn with
`shadow-[inset_3px_0_0_var(--color-primary)]` because box-shadow on a `tr`
does not shift layout. Differences from the source: muted header text, wider
cell padding, an explicit `border-border` everywhere, a selected-row inset bar,
the hover transition moved behind `motion-safe:`, and the checkbox-column
offsets dropped (no checkbox component ships yet).

**Pebble (2026-11-03).** New optional `variant` on `Table`. `card` puts
`rounded-xl bg-card shadow-raised-md ring-1 ring-hairline
inset-shadow-highlight` on the container, which is also `group/table` with
`data-variant`, so the header (`group-data-[variant=card]/table:bg-muted/60`)
and caption (inside, `border-t px-4 py-2.5 text-left`) restyle from it
without context. The `<table>` is `tabular-nums`. Header cells are compact
(`h-9 text-xs`); the first and last cells of every row get `pl-4`/`pr-4` so
content lines up with the card edge. Hover is `bg-muted/60` with a
motion-safe `duration-(--motion-fast) ease-enter` colour transition, and is
switched off in header and footer. Selection moves from primary to ember:
`bg-accent/8` with `shadow-[inset_2px_0_0_var(--color-accent)]`. The demo is
a sortable invoices table (a demo-level sort button with `aria-sort`, rows
re-ordered with Motion layout under `MotionConfig reducedMotion="user"`),
status pills, a selected row, a footer total, and a plain table showing an
empty state.

<!-- PEBBLE-LICENSE -->

registry/data/table/table.tsx

/* PEBBLE-LICENSE
Built by Pebble. Component: table.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

THIRD-PARTY NOTICES
These notices apply to identified upstream portions; Pebble terms do not replace or narrow their rights.

Upstream: https://raw.githubusercontent.com/shadcn-ui/ui/main/LICENSE.md
MIT License

Copyright (c) 2023 shadcn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";

import { cn } from "@/lib/utils";

// Pebble: `plain` sits on whatever surface holds it; `card` makes the table
// its own raised object with a muted header band.
const variants = {
  plain: "",
  card: "rounded-xl bg-card shadow-raised-md ring-1 ring-hairline inset-shadow-highlight",
} as const;

export type TableProps = React.ComponentProps<"table"> & {
  variant?: keyof typeof variants;
};

export function Table({ variant = "plain", className, ...props }: TableProps) {
  return (
    // Wide tables scroll sideways inside this container instead of
    // stretching the page.
    <div
      data-slot="table-container"
      data-variant={variant}
      className={cn("group/table relative w-full overflow-x-auto", variants[variant])}
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom border-collapse text-sm tabular-nums", className)}
        {...props}
      />
    </div>
  );
}

export function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn(
        "[&_tr]:border-b [&_tr]:border-border [&_tr]:hover:bg-transparent",
        // In the card variant the header is a muted band under the top edge.
        "group-data-[variant=card]/table:bg-muted/60",
        className,
      )}
      {...props}
    />
  );
}

export function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
  );
}

export function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        "border-t border-border bg-muted/50 font-medium [&_tr]:hover:bg-transparent [&>tr]:last:border-b-0",
        className,
      )}
      {...props}
    />
  );
}

export function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "border-b border-border hover:bg-muted/60",
        "motion-safe:transition-colors motion-safe:duration-(--motion-fast) motion-safe:ease-enter",
        // Selection is ember: a light tint plus a 2 px bar on the leading
        // edge, so it does not rely on a subtle tint alone.
        "data-[state=selected]:bg-accent/8 data-[state=selected]:shadow-[inset_2px_0_0_var(--color-accent)] data-[state=selected]:hover:bg-accent/12",
        className,
      )}
      {...props}
    />
  );
}

export function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "h-9 px-3 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground",
        "first:pl-4 last:pr-4",
        className,
      )}
      {...props}
    />
  );
}

export function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn("px-3 py-2.5 align-middle whitespace-nowrap first:pl-4 last:pr-4", className)}
      {...props}
    />
  );
}

export function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn(
        "mt-3 text-[13px] text-muted-foreground",
        // A card table keeps its caption inside the card, under a hairline.
        "group-data-[variant=card]/table:mt-0 group-data-[variant=card]/table:border-t group-data-[variant=card]/table:border-border group-data-[variant=card]/table:px-4 group-data-[variant=card]/table:py-2.5 group-data-[variant=card]/table:text-left",
        className,
      )}
      {...props}
    />
  );
}