Table

1"use client";
2 
3import { CaretDown, CaretUp, CaretUpDown } from "@phosphor-icons/react/dist/ssr";
4import { createContext, useContext } from "react";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { selectionFocus } from "@/lib/recipes";
8 
9/** Semantic HTML table with surface and outlined presentations. */
10type TableSize = "sm" | "md";
11type TableVariant = "surface" | "outlined";
12type TableContainerProps = Omit<
13  React.HTMLAttributes<HTMLDivElement>,
14  "children" | "dangerouslySetInnerHTML"
15>;
16 
17interface TableContextValue {
18  size: TableSize;
19  hoverable: boolean;
20  stickyHeader: boolean;
21}
22 
23const TableContext = createContext<TableContextValue>({
24  size: "md",
25  hoverable: false,
26  stickyHeader: false,
27});
28 
29export interface TableProps
30  extends React.TableHTMLAttributes<HTMLTableElement> {
31  /** Surface treatment. `outlined` adds radius-12 layer chrome. */
32  variant?: TableVariant;
33  /** Row density. `md` default; `sm` tightens for dense grids. */
34  size?: TableSize;
35  /** Adds visual hover feedback to body rows. */
36  hoverable?: boolean;
37  /** Horizontal overflow for non-sticky tables; sticky tables always own scrolling. */
38  scrollable?: boolean;
39  /** Attributes for the owned scroll container. */
40  containerProps?: TableContainerProps;
41  /** Pin the header row to the top of the owned scroll container. */
42  stickyHeader?: boolean;
43}
44 
45export function Table({
46  className,
47  variant = "surface",
48  size = "md",
49  hoverable = false,
50  scrollable = true,
51  containerProps,
52  stickyHeader = false,
53  ...props
54}: TableProps): React.ReactElement {
55  const ctx: TableContextValue = { size, hoverable, stickyHeader };
56  const {
57    className: containerClassName,
58    ...containerAttributes
59  } = containerProps ?? {};
60  const tableEl = (
61    <TableContext.Provider value={ctx}>
62      <table
63        data-slot="table"
64        data-variant={variant}
65        data-size={size}
66        className={cn(
67          "w-full caption-bottom border-separate border-spacing-0 text-small text-ink",
68          className,
69        )}
70        {...props}
71      />
72    </TableContext.Provider>
73  );
74 
75  if (
76    variant === "surface" &&
77    !scrollable &&
78    !stickyHeader &&
79    !containerProps
80  ) {
81    return tableEl;
82  }
83 
84  return (
85    <div
86      {...containerAttributes}
87      data-slot="table-container"
88      className={cn(
89        "relative w-full",
90        variant === "outlined" &&
91          "rounded-[var(--radius-12)] bg-layer-1 border border-hairline",
92// … truncated