{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table", "title": "Data Table", "description": "TanStack Table with manual sort, expansion and selection, responsive column priority and optional stacked rows. Desktop row activation uses one keyboard stop, with exact timestamps available on row focus or time hover.", "dependencies": [ "@tanstack/react-table@8.21.3", "lucide-react@1.33.0" ], "registryDependencies": [ "@waimakers/utils", "@waimakers/table", "@waimakers/button", "@waimakers/empty-state", "@waimakers/error-state", "@waimakers/refused-state", "@waimakers/skeleton-presets", "@waimakers/tooltip" ], "files": [ { "path": "src/components/ui/data-table.tsx", "content": "import {\n flexRender,\n getCoreRowModel,\n useReactTable,\n type ColumnDef,\n type ExpandedState,\n type VisibilityState,\n} from \"@tanstack/react-table\";\nimport { ArrowUpDown, ChevronDown, ChevronRight, ChevronUp, Info } from \"lucide-react\";\nimport { Fragment, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { cn, focusRing } from \"../../lib/utils\";\nimport { Button } from \"./button\";\nimport { EmptyState } from \"./empty-state\";\nimport { ErrorState } from \"./error-state\";\nimport { RefusedState } from \"./refused-state\";\nimport { SkeletonTable } from \"./skeleton-presets\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./tooltip\";\nimport { TimestampTooltipGroup, TimestampTooltipTarget } from \"./timestamp-tooltip-group\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"./table\";\n\nexport interface DataTableColumn {\n id: string;\n header: string;\n description?: string;\n cell: (row: T) => ReactNode;\n cellClassName?: string;\n headerClassName?: string;\n sortable?: boolean;\n priority?: 1 | 2 | 3;\n}\n\nexport interface DataTableMobileLabels {\n label: (columnId: string, content?: ReactNode) => ReactNode;\n}\n\nexport interface DataTableProps {\n columns: readonly DataTableColumn[];\n data: readonly T[];\n getRowId: (row: T) => string;\n getRowLabel?: (row: T) => string;\n groupKey?: (row: T) => string;\n groupLabel?: (key: string) => ReactNode;\n sort?: { id: string; desc: boolean } | null;\n onSort?: (columnId: string) => void;\n renderExpanded?: (row: T) => ReactNode;\n isRowSelected?: (row: T) => boolean;\n onRowClick?: (row: T) => void;\n rowActionPlacement?: \"first-cell\" | \"end\";\n emptyState?: ReactNode;\n filtered?: boolean;\n onClearFilters?: () => void;\n state?:\n | { kind: \"loading\" }\n | { kind: \"refused\"; grant: string; grantor: string; title?: string }\n | { kind: \"error\"; title: string; description: string; reference: string; onRetry: () => void };\n density?: \"comfortable\" | \"compact\";\n scrollable?: boolean;\n columnVisibility?: VisibilityState;\n mobileRow?: (\n row: T,\n labels: DataTableMobileLabels,\n ) => { primary: ReactNode; status?: ReactNode; secondary?: ReactNode };\n className?: string;\n label?: string;\n}\n\nexport function DataTable({\n columns,\n data,\n getRowId,\n getRowLabel,\n groupKey,\n groupLabel,\n sort,\n onSort,\n renderExpanded,\n isRowSelected,\n onRowClick,\n rowActionPlacement = \"first-cell\",\n emptyState,\n filtered,\n onClearFilters,\n state,\n density = \"compact\",\n scrollable = false,\n columnVisibility,\n mobileRow,\n className,\n label,\n}: DataTableProps) {\n const root = useRef(null);\n const instanceId = useId();\n const [width, setWidth] = useState(1280);\n const [expanded, setExpanded] = useState({});\n useEffect(() => {\n const element = root.current;\n if (!element) {\n return;\n }\n const observer = new ResizeObserver(([entry]) => {\n if (entry) {\n setWidth(entry.contentRect.width);\n }\n });\n observer.observe(element);\n return () => observer.disconnect();\n }, []);\n const tableColumns = useMemo[]>(\n () =>\n columns.map((column) => ({\n id: column.id,\n header: column.header,\n cell: ({ row }) => column.cell(row.original),\n enableSorting: column.sortable ?? false,\n })),\n [columns],\n );\n const tableData = useMemo(() => [...data], [data]);\n const visibility = Object.fromEntries(\n columns.map((column) => [\n column.id,\n columnVisibility?.[column.id] !== false &&\n (column.priority === undefined ||\n column.priority === 1 ||\n width >= (column.priority === 2 ? 960 : 1200)),\n ]),\n );\n const selection = Object.fromEntries(\n data.filter((row) => isRowSelected?.(row)).map((row) => [getRowId(row), true]),\n );\n const table = useReactTable({\n data: tableData,\n columns: tableColumns,\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n getRowCanExpand: () => Boolean(renderExpanded),\n onExpandedChange: setExpanded,\n manualSorting: true,\n state: {\n expanded,\n columnVisibility: visibility,\n rowSelection: selection,\n sorting: sort ? [sort] : [],\n },\n });\n const rows = table.getRowModel().rows;\n const groupHeading = (index: number) => {\n const row = rows[index];\n if (!groupKey || !row) {\n return undefined;\n }\n const key = groupKey(row.original);\n const previous = rows[index - 1];\n return previous && groupKey(previous.original) === key ? undefined : (groupLabel?.(key) ?? key);\n };\n const endAction = Boolean(onRowClick && rowActionPlacement === \"end\");\n const span =\n table.getVisibleLeafColumns().length + (renderExpanded ? 1 : 0) + (endAction ? 1 : 0);\n const stacked = mobileRow !== undefined && width < 768;\n const plainEmpty = !state && !filtered && rows.length === 0 && typeof emptyState === \"string\";\n const stateContent =\n state?.kind === \"loading\" ? (\n \n ) : state?.kind === \"refused\" ? (\n \n ) : state?.kind === \"error\" ? (\n \n ) : rows.length === 0 && !plainEmpty ? (\n filtered ? (\n \n Clear filters\n \n ) : undefined\n }\n />\n ) : (\n (emptyState ?? )\n )\n ) : undefined;\n return (\n \n {stateContent !== undefined ? (\n stateContent\n ) : stacked && !plainEmpty ? (\n
    \n {rows.map((row, index) => {\n const content = mobileRow(row.original, mobileLabels(columns));\n const open = row.getIsExpanded();\n const previewId = `${instanceId}-preview-${row.id}`;\n const rowLabel = getRowLabel?.(row.original) ?? row.id;\n const heading = groupHeading(index);\n return (\n \n {heading !== undefined && (\n
  • \n

    {heading}

    \n
    • \n )}\n \n \n
    \n
    {content.primary}
    \n {content.status}\n {renderExpanded && (\n row.toggleExpanded()}\n />\n )}\n {onRowClick && (\n onRowClick(row.original)}\n />\n )}\n
    \n
    \n {content.secondary}\n
    \n {renderExpanded && open && (\n
    \n {renderExpanded(row.original)}\n
    \n )}\n \n     \n     \n );\n })}\n
\n ) : (\n \n \n {table.getHeaderGroups().map((group) => (\n \n {renderExpanded ? (\n \n Expand\n \n ) : null}\n {group.headers.map((header) => {\n const column = columns.find((entry) => entry.id === header.column.id);\n const direction = header.column.getIsSorted();\n return (\n \n \n {column?.sortable && onSort ? (\n onSort(column.id)}\n aria-label={`Sort by ${column.header}`}\n >\n {column.header}\n {direction === \"desc\" ? (\n \n ) : direction === \"asc\" ? (\n \n ) : (\n \n )}\n \n ) : (\n flexRender(header.column.columnDef.header, header.getContext())\n )}\n {column?.description && }\n \n \n );\n })}\n {endAction && (\n \n Inspect\n \n )}\n \n ))}\n \n \n {plainEmpty && (\n \n \n {emptyState}\n \n \n )}\n {rows.map((row, index) => {\n const open = row.getIsExpanded();\n const previewId = `${instanceId}-preview-${row.id}`;\n const heading = groupHeading(index);\n return (\n \n {heading !== undefined && (\n \n \n {heading}\n \n \n )}\n \n \n {\n if (\n !(event.target instanceof Element) ||\n !event.target.closest(\"button, a, input, select, textarea\")\n ) {\n onRowClick(row.original);\n }\n }\n : undefined\n }\n onKeyDown={\n onRowClick\n ? (event) => {\n if (\n event.target === event.currentTarget &&\n (event.key === \"Enter\" || event.key === \" \")\n ) {\n event.preventDefault();\n onRowClick(row.original);\n }\n }\n : undefined\n }\n >\n {renderExpanded ? (\n \n row.toggleExpanded()}\n />\n \n ) : null}\n {row.getVisibleCells().map((cell, index) => (\n entry.id === cell.column.id)?.cellClassName,\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {onRowClick && !endAction && index === 0 && (\n onRowClick(row.original)}\n />\n )}\n \n ))}\n {endAction && onRowClick && (\n \n onRowClick(row.original)}\n />\n \n )}\n \n \n \n {renderExpanded && open ? (\n \n \n
{renderExpanded(row.original)}
\n \n \n ) : null}\n \n );\n })}\n \n \n )}\n \n );\n}\n\nfunction DataTableExpandButton({\n open,\n label,\n previewId,\n onToggle,\n}: {\n open: boolean;\n label: string;\n previewId: string;\n onToggle: () => void;\n}) {\n return (\n \n \n \n );\n}\nfunction DataTableOpenButton({\n label,\n onOpen,\n inspect = false,\n tabIndex,\n timestampTarget = false,\n}: {\n label: string;\n onOpen: () => void;\n inspect?: boolean;\n tabIndex?: number;\n timestampTarget?: boolean;\n}) {\n const button = inspect ? (\n \n Inspect\n \n ) : (\n \n \n \n );\n return timestampTarget ? {button} : button;\n}\n\nfunction DataTableColumnLabel({\n column,\n content,\n iconOnly = false,\n}: {\n column: { header: string; description?: string };\n content?: ReactNode;\n iconOnly?: boolean;\n}) {\n const id = useId();\n if (!column.description) {\n return {content ?? column.header};\n }\n const help = (\n \n \n }\n >\n {iconOnly || content !== undefined ? (\n \n ) : (\n <>\n {column.header}\n \n \n )}\n \n \n {column.description}\n \n \n );\n return content === undefined ? (\n help\n ) : (\n \n {content}\n {help}\n \n );\n}\n\nfunction mobileLabels(columns: readonly DataTableColumn[]): DataTableMobileLabels {\n return {\n label: (id, content) => {\n const column = columns.find((entry) => entry.id === id);\n return column ? : null;\n },\n };\n}\n", "type": "registry:ui", "target": "components/ui/data-table.tsx" } ], "type": "registry:block" }