50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T46bf,"use client" import * as React from "react" import { type Column, type ColumnDef, type ColumnFiltersState, type RowData, type RowSelectionState, type SortingState, type Table as TanstackTable, type TableOptions, type VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table" import { motion, useAnimate } from "motion/react" import { ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal, } from "lucide-react" import { cn } from "@/lib/utils" import { fades, reduced, shake, springs, useReducedMotion } from "@/lib/motion" import { useHaptics } from "@/lib/haptics" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "./table" import { Button, buttonVariants } from "./button" import { Input } from "./input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select" import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./dropdown-menu" // Let column cell renderers reach a commit hook for inline edits. TanStack // threads `meta` from useReactTable to every cell context, so a `cell:` // renderer can call `table.options.meta?.updateData(...)`. declare module "@tanstack/react-table" { interface TableMeta { updateData?: (rowIndex: number, columnId: string, value: unknown) => void } } // The body fades on every reflow (page / sort / filter) rather than springing // row positions — reflowing content must never bounce (same rule as Response). // A remount keyed to the reflow signature replays the opacity-only entrance; // under reduced motion `fades.fast` is already opacity-only, so it stays alive. const MotionTableBody = motion.create(TableBody) interface DataTableProps { columns: ColumnDef[] data: TData[] /** Stable row identity (survives sort/filter/paginate for selection + edits). */ getRowId?: (row: TData, index: number) => string /** Fires when an editable cell commits; wired into `meta.updateData`. */ onDataChange?: (rowIndex: number, columnId: string, value: unknown) => void /** Toolbar (filter input, faceted filters); receives the live table instance. */ toolbar?: (table: TanstackTable) => React.ReactNode /** Show the pagination footer. */ pagination?: boolean /** Initial rows per page. */ pageSize?: number /** Accessible name for the scrollable table region. */ label?: string className?: string /** * Escape hatch merged into `useReactTable`. Pass controlled `state` + * `on*Change`, `manualPagination`/`manualSorting`/`manualFiltering` with * `pageCount`/`rowCount` for server-side data, or any other TanStack option. * A `state` here shallow-merges over the built-in slices, and an * `on*Change` overrides the matching built-in setter, so you can control one * slice (e.g. sorting) and leave the rest internal. */ options?: Partial> } function DataTable({ columns, data, getRowId, onDataChange, toolbar, pagination = true, pageSize = 10, label, className, options, }: DataTableProps) { const [sorting, setSorting] = React.useState([]) const [columnFilters, setColumnFilters] = React.useState( [] ) const [rowSelection, setRowSelection] = React.useState({}) const [columnVisibility, setColumnVisibility] = React.useState({}) const table = useReactTable({ getRowId, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: pagination ? getPaginationRowModel() : undefined, initialState: { pagination: { pageSize } }, // Consumer options override the framework defaults above… ...options, // …but data/columns/state/setters/meta stay controlled here, merging any // slice the consumer chose to take over. data, columns, state: { sorting, columnFilters, rowSelection, columnVisibility, ...options?.state, }, onSortingChange: options?.onSortingChange ?? setSorting, onColumnFiltersChange: options?.onColumnFiltersChange ?? setColumnFilters, onRowSelectionChange: options?.onRowSelectionChange ?? setRowSelection, onColumnVisibilityChange: options?.onColumnVisibilityChange ?? setColumnVisibility, meta: { updateData: onDataChange, ...options?.meta }, }) const rows = table.getRowModel().rows const columnCount = table.getVisibleFlatColumns().length const tableState = table.getState() // Signature of what's on screen — changing it refades the body. Read from // the live table state so it tracks reflows in controlled mode too. const reflowKey = `${tableState.pagination.pageIndex}:${JSON.stringify( tableState.sorting )}:${JSON.stringify(tableState.columnFilters)}` return (

{toolbar?.(table)} {table.getHeaderGroups().map((group) => ( {group.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ))} ))} {rows.length ? ( rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No results. )}

{pagination ? : null}

) } /** aria-sort for a header cell, absent unless the column is actually sortable. */ function ariaSort( column: Column ): React.AriaAttributes["aria-sort"] { if (!column.getCanSort()) return undefined const sorted = column.getIsSorted() if (sorted === "asc") return "ascending" if (sorted === "desc") return "descending" return "none" } /** * Sortable header. Dogfoods the seam `Button` (ghost) so it presses and gives a * haptic like every other key. The indicator springs when it flips asc⇄desc and * jumps instantly under reduced motion — never a dead sort. */ function DataTableColumnHeader({ column, title, align = "left", className, }: { column: Column title: string align?: "left" | "right" className?: string }) { if (!column.getCanSort()) { return ( {title} ) } const sorted = column.getIsSorted() return ( ) } function SortIndicator({ sorted }: { sorted: false | "asc" | "desc" }) { const reduceMotion = useReducedMotion() if (!sorted) { return } return ( ) } /** Toolbar shell — a flex row for a filter input, faceted filters, view options. */ function DataTableToolbar({ className, children, }: { className?: string children: React.ReactNode }) { return (

{children}

) } const PAGE_SIZES = [10, 20, 30, 50] as const function DataTablePagination({ table, className, ...props }: { table: TanstackTable } & Omit, "children">) { const { pageIndex, pageSize } = table.getState().pagination const pageCount = Math.max(table.getPageCount(), 1) const selected = table.getFilteredSelectedRowModel().rows.length const total = table.getFilteredRowModel().rows.length // Always include the active pageSize so the trigger never renders blank when // a consumer passes a value outside the default set. const sizeOptions = Array.from(new Set([...PAGE_SIZES, pageSize])).sort( (a, b) => a - b ) return (

{selected > 0 ? `${selected} of ${total} row${total === 1 ? "" : "s"} selected` : `${total} row${total === 1 ? "" : "s"}`}

Rows per page

Page {pageIndex + 1} of {pageCount}

) } /** * Inline-editable cell. Display mode is a flat, keyboard-reachable trigger; on * activate it becomes a debossed entry well (`Input`) — the slot/token rule at * cell scale. Enter commits, Escape reverts and returns focus to the trigger. * A rejected commit shakes (opacity flash under reduced motion) and fires the * error haptic; a good commit ticks. Blur commits, or silently reverts if the * draft is invalid (clicking away shouldn't trap focus). */ function DataTableEditableCell({ value, onCommit, validate, align = "left", type = "text", label, className, }: { value: string | number onCommit: (value: string) => void /** Return false to reject the draft on Enter (shake + error haptic). */ validate?: (value: string) => boolean align?: "left" | "right" type?: "text" | "number" /** Accessible name for the edit input. */ label?: string className?: string }) { const original = String(value) const [editing, setEditing] = React.useState(false) const [draft, setDraft] = React.useState(original) const [invalid, setInvalid] = React.useState(false) const reduceMotion = useReducedMotion() const { trigger } = useHaptics() const [scope, animate] = useAnimate() const triggerRef = React.useRef(null) function begin() { setDraft(original) setInvalid(false) setEditing(true) } function refocusTrigger() { // let the trigger remount before focusing it. requestAnimationFrame(() => triggerRef.current?.focus()) } // `refocus` only when the user ended the edit by keyboard (Enter/Escape) — // returning focus to the cell is right there. On blur the user is *leaving* // for somewhere else (Tab, a click), so stealing focus back would fight them. function cancel(refocus: boolean) { setInvalid(false) setEditing(false) if (refocus) refocusTrigger() } function commit(fromBlur: boolean) { const next = draft.trim() if (validate && !validate(next)) { // Blur shouldn't trap the user in an invalid cell — revert, let focus go. if (fromBlur) { cancel(false) return } setInvalid(true) trigger("error") animate( scope.current, reduceMotion ? reduced.flash.animate : shake.animate, reduceMotion ? reduced.flash.transition : shake.transition ) return } if (next !== original) { trigger("tick") onCommit(next) } setInvalid(false) setEditing(false) if (!fromBlur) refocusTrigger() } if (!editing) { return ( ) } return ( { setDraft(event.target.value) if (invalid) setInvalid(false) }} onBlur={() => commit(true)} onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault() commit(false) } else if (event.key === "Escape") { event.preventDefault() cancel(true) } }} className={cn( "h-8 py-0", align === "right" && "text-right", invalid && "border-destructive ring-2 ring-destructive/30" )} /> ) } /** * Row action menu — a ghost icon key opening a DropdownMenu. Pass the menu * items as children; every row's trigger takes a distinct label. */ function DataTableRowActions({ children, label = "Open row actions", }: { children: React.ReactNode label?: string }) { return ( } /> {children} ) } export { DataTable, DataTableColumnHeader, DataTableToolbar, DataTablePagination, DataTableEditableCell, DataTableRowActions, type DataTableProps, } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@seamui","registryDependencies":["https://seamui.dev/r/utils.json","https://seamui.dev/r/motion.json","https://seamui.dev/r/haptics.json","https://seamui.dev/r/table.json","https://seamui.dev/r/button.json","https://seamui.dev/r/input.json","https://seamui.dev/r/select.json","https://seamui.dev/r/dropdown-menu.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/seam/ui/data-table.tsx","content":"$52","type":"registry:ui","target":"components/ui/data-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]