{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"table","type":"registry:ui","title":"Table","description":"Data table with sortable headers (flipping chevron arrows), rows that glide into their new order, hover and selection states with animated checkboxes and a sticky blurred header.","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"registry/ui/table.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { MotionConfig, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\n// Checkbox tick/dash are drawn by animating the stroke, same technique as the Checkbox primitive.\nconst css = `\n.ui-tbl-mark path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .2s cubic-bezier(.6,0,.4,1)}\n.ui-tbl-cbx:checked:not(:indeterminate)+.ui-tbl-mark .tick,.ui-tbl-cbx:indeterminate+.ui-tbl-mark .dash{stroke-dashoffset:0}\n@media (prefers-reduced-motion:reduce){.ui-tbl-mark path{transition:none}}\n`;\n\nexport type SortDirection = \"asc\" | \"desc\";\nexport type SortState = { key: string; direction: SortDirection } | null;\n\nexport interface TableColumn {\n /** Field to read (and sort by, unless `sortValue` is given). */\n key: keyof T & string;\n header: ReactNode;\n sortable?: boolean;\n align?: \"left\" | \"center\" | \"right\";\n /** Custom cell renderer. */\n cell?: (row: T) => ReactNode;\n /** Value used for sorting when the displayed cell differs from the raw field. */\n sortValue?: (row: T) => string | number;\n className?: string;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n rows: T[];\n /** Checkbox column with select-all. On by default; pass `selectable={false}` for a plain table. */\n selectable?: boolean;\n selected?: (string | number)[];\n defaultSelected?: (string | number)[];\n onSelectionChange?: (ids: (string | number)[]) => void;\n defaultSort?: SortState;\n onSortChange?: (sort: SortState) => void;\n /** Keep the header visible while the body scrolls (set `maxHeight`). */\n stickyHeader?: boolean;\n /** Scroll container height, e.g. 320 or \"20rem\". */\n maxHeight?: number | string;\n /** Visible caption; also names the table for screen readers. */\n caption?: ReactNode;\n /** Shown when there are no rows. */\n empty?: ReactNode;\n className?: string;\n}\n\nfunction Check({ checked, indeterminate, onChange, label }: { checked: boolean; indeterminate?: boolean; onChange: () => void; label: string }) {\n const ref = useRef(null);\n useEffect(() => {\n if (ref.current) ref.current.indeterminate = !!indeterminate;\n });\n return (\n \n \n \n \n \n \n \n );\n}\n\n/** Two stacked chevrons: the active one lights up; the pair flips for descending. */\nfunction SortIcon({ state }: { state: SortDirection | undefined }) {\n return (\n \n \n \n \n );\n}\n\nexport function Table({\n columns,\n rows,\n selectable = true,\n selected: selectedProp,\n defaultSelected = [],\n onSelectionChange,\n defaultSort = null,\n onSortChange,\n stickyHeader = true,\n maxHeight,\n caption,\n empty = \"No results.\",\n className,\n}: TableProps) {\n const [sort, setSort] = useState(defaultSort);\n const [inner, setInner] = useState(defaultSelected);\n const selected = selectedProp ?? inner;\n const selectedSet = useMemo(() => new Set(selected), [selected]);\n\n const sorted = useMemo(() => {\n if (!sort) return rows;\n const col = columns.find((c) => c.key === sort.key);\n const get = col?.sortValue ?? ((r: T) => r[sort.key as keyof T] as unknown as string | number);\n const dir = sort.direction === \"asc\" ? 1 : -1;\n return [...rows].sort((a, b) => {\n const x = get(a);\n const y = get(b);\n return dir * (typeof x === \"number\" && typeof y === \"number\" ? x - y : String(x).localeCompare(String(y), undefined, { numeric: true }));\n });\n }, [rows, columns, sort]);\n\n // Cycle: ascending -> descending -> unsorted.\n const toggleSort = (key: string) => {\n const next: SortState = sort?.key !== key ? { key, direction: \"asc\" } : sort.direction === \"asc\" ? { key, direction: \"desc\" } : null;\n setSort(next);\n onSortChange?.(next);\n };\n\n const setSelected = (ids: (string | number)[]) => {\n if (selectedProp === undefined) setInner(ids);\n onSelectionChange?.(ids);\n };\n const allOn = rows.length > 0 && rows.every((r) => selectedSet.has(r.id));\n const someOn = !allOn && rows.some((r) => selectedSet.has(r.id));\n\n const alignCls = (a?: \"left\" | \"center\" | \"right\") => (a === \"right\" ? \"text-right\" : a === \"center\" ? \"text-center\" : \"text-left\");\n\n return (\n \n \n \n \n {caption && }\n \n \n {selectable && (\n \n )}\n {columns.map((c) => {\n const state = sort?.key === c.key ? sort.direction : undefined;\n return (\n \n {c.sortable ? (\n toggleSort(c.key)}\n className={cn(\n \"group/th -mx-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1 uppercase outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60\",\n c.align === \"right\" && \"flex-row-reverse\",\n state && \"text-foreground\",\n )}\n >\n {c.header}\n \n \n ) : (\n c.header\n )}\n \n );\n })}\n \n \n \n {sorted.map((r) => {\n const on = selectedSet.has(r.id);\n return (\n td]:border-b [&>td]:border-border last:[&>td]:border-b-0\",\n on ? \"bg-primary/[0.07]\" : \"hover:bg-muted/50\",\n )}\n >\n {selectable && (\n \n )}\n {columns.map((c) => (\n \n ))}\n \n );\n })}\n {sorted.length === 0 && (\n \n \n \n )}\n \n
{caption}
\n setSelected(allOn ? [] : rows.map((r) => r.id))}\n />\n
\n \n setSelected(on ? selected.filter((x) => x !== r.id) : [...selected, r.id])}\n />\n \n {c.cell ? c.cell(r) : String(r[c.key] ?? \"\")}\n
\n {empty}\n
\n \n \n );\n}\n"}]}