{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table", "title": "Data Table", "description": "A fully-featured, animated data table with sorting, search, selection, inline editing, column resizing, and pagination.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/wise-ui/components/data-table.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, AnimatePresence } from \"motion/react\"\nimport { cn } from \"@/registry/wise-ui/lib/utils\"\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport interface DataTableColumn {\n key: keyof T & string\n label: string\n sortable?: boolean\n resizable?: boolean\n editable?: boolean\n width?: number\n render?: (value: T[keyof T], row: T) => React.ReactNode\n}\n\nexport interface DataTableProps {\n data: T[]\n columns: DataTableColumn[]\n searchable?: boolean\n searchKeys?: (keyof T)[]\n selectable?: boolean\n onSelectionChange?: (rows: T[]) => void\n paginated?: boolean\n pageSize?: number\n className?: string\n}\n\ntype SortDir = \"asc\" | \"desc\" | null\n\n// ── Helpers ────────────────────────────────────────────────────────────────────\n\nfunction useDebounce(value: T, delay: number): T {\n const [debounced, setDebounced] = React.useState(value)\n React.useEffect(() => {\n const t = setTimeout(() => setDebounced(value), delay)\n return () => clearTimeout(t)\n }, [value, delay])\n return debounced\n}\n\n// ── Sub-components ─────────────────────────────────────────────────────────────\n\nfunction DataTableToolbar({\n searchValue,\n onSearchChange,\n totalRows,\n filteredRows,\n}: {\n searchValue: string\n onSearchChange: (v: string) => void\n totalRows: number\n filteredRows: number\n}) {\n return (\n
\n
\n \n \n \n \n onSearchChange(e.target.value)}\n className=\"h-9 w-64 rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/40\"\n />\n
\n \n {filteredRows === totalRows\n ? `${totalRows} rows`\n : `${filteredRows} of ${totalRows} rows`}\n \n
\n )\n}\n\nfunction DataTableHeader({\n columns,\n colWidths,\n sortKey,\n sortDir,\n onSort,\n onResizeStart,\n selectable,\n allSelected,\n onToggleAll,\n}: {\n columns: DataTableColumn[]\n colWidths: number[]\n sortKey: string | null\n sortDir: SortDir\n onSort: (key: string) => void\n onResizeStart: (colIdx: number, startX: number) => void\n selectable?: boolean\n allSelected: boolean\n onToggleAll: () => void\n}) {\n return (\n `${w}px`),\n ].join(\" \"),\n }}\n >\n {selectable && (\n
\n \n
\n )}\n {columns.map((col, i) => (\n \n col.sortable && onSort(col.key)}\n >\n {col.label}\n \n {col.sortable && sortKey === col.key && sortDir && (\n \n \n \n )}\n {(col.resizable !== false) && i < columns.length - 1 && (\n {\n e.preventDefault()\n onResizeStart(i, e.clientX)\n }}\n />\n )}\n \n ))}\n \n )\n}\n\nfunction DataTableBody({\n rows,\n columns,\n colWidths,\n selectable,\n selectedIds,\n onToggleRow,\n editingCell,\n onStartEdit,\n onSaveEdit,\n onCancelEdit,\n}: {\n rows: T[]\n columns: DataTableColumn[]\n colWidths: number[]\n selectable?: boolean\n selectedIds: Set\n onToggleRow: (id: string | number) => void\n editingCell: { rowId: string | number; colKey: string } | null\n onStartEdit: (rowId: string | number, colKey: string) => void\n onSaveEdit: (rowId: string | number, colKey: string, value: string) => void\n onCancelEdit: () => void\n}) {\n return (\n \n {rows.map((row) => (\n `${w}px`),\n ].join(\" \"),\n }}\n >\n {selectable && (\n
\n onToggleRow(row.id)} />\n
\n )}\n {columns.map((col) => {\n const value = row[col.key]\n const isEditing =\n editingCell?.rowId === row.id && editingCell?.colKey === col.key\n\n return (\n {\n if (col.editable) onStartEdit(row.id, col.key)\n }}\n >\n {isEditing ? (\n onSaveEdit(row.id, col.key, v)}\n onCancel={onCancelEdit}\n />\n ) : col.render ? (\n col.render(value, row)\n ) : (\n {String(value ?? \"\")}\n )}\n \n )\n })}\n \n ))}\n \n )\n}\n\nfunction EditableCell({\n value,\n onSave,\n onCancel,\n}: {\n value: string\n onSave: (v: string) => void\n onCancel: () => void\n}) {\n const [editValue, setEditValue] = React.useState(value)\n const inputRef = React.useRef(null)\n\n React.useEffect(() => {\n inputRef.current?.focus()\n inputRef.current?.select()\n }, [])\n\n return (\n setEditValue(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") onSave(editValue)\n if (e.key === \"Escape\") onCancel()\n }}\n onBlur={() => onSave(editValue)}\n className=\"h-7 w-full rounded border border-primary/50 bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary/40\"\n />\n )\n}\n\nfunction DataTableBatchBar({\n count,\n onClear,\n}: {\n count: number\n onClear: () => void\n}) {\n return (\n \n {count > 0 && (\n \n \n {count} row{count !== 1 && \"s\"} selected\n \n \n Clear selection\n \n \n )}\n \n )\n}\n\nfunction DataTablePagination({\n page,\n totalPages,\n pageSize,\n totalRows,\n onPageChange,\n}: {\n page: number\n totalPages: number\n pageSize: number\n totalRows: number\n onPageChange: (p: number) => void\n}) {\n const start = (page - 1) * pageSize + 1\n const end = Math.min(page * pageSize, totalRows)\n\n return (\n
\n \n Showing {start}–{end} of {totalRows}\n \n
\n onPageChange(page - 1)}\n className=\"rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40\"\n >\n Prev\n \n {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (\n onPageChange(p)}\n className={cn(\n \"rounded-md px-2.5 py-1 text-xs font-medium transition-colors\",\n p === page\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-accent hover:text-foreground\"\n )}\n >\n {p}\n \n ))}\n = totalPages}\n onClick={() => onPageChange(page + 1)}\n className=\"rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40\"\n >\n Next\n \n
\n
\n )\n}\n\nfunction RoundCheckbox({\n checked,\n onChange,\n}: {\n checked: boolean\n onChange: () => void\n}) {\n return (\n \n {checked && (\n \n \n \n )}\n \n )\n}\n\n// ── Main Component ─────────────────────────────────────────────────────────────\n\nexport function DataTable({\n data: initialData,\n columns,\n searchable = false,\n searchKeys,\n selectable = false,\n onSelectionChange,\n paginated = false,\n pageSize = 10,\n className,\n}: DataTableProps) {\n // ── Data state (for inline editing) ────────────────────────────────────────\n const [data, setData] = React.useState(initialData)\n React.useEffect(() => setData(initialData), [initialData])\n\n // ── Search ─────────────────────────────────────────────────────────────────\n const [searchValue, setSearchValue] = React.useState(\"\")\n const debouncedSearch = useDebounce(searchValue, 200)\n\n const filteredData = React.useMemo(() => {\n if (!debouncedSearch) return data\n const keys = searchKeys ?? columns.map((c) => c.key)\n const lower = debouncedSearch.toLowerCase()\n return data.filter((row) =>\n keys.some((k) => String(row[k] ?? \"\").toLowerCase().includes(lower))\n )\n }, [data, debouncedSearch, searchKeys, columns])\n\n // ── Sort ───────────────────────────────────────────────────────────────────\n const [sortKey, setSortKey] = React.useState(null)\n const [sortDir, setSortDir] = React.useState(null)\n\n function handleSort(key: string) {\n if (sortKey !== key) {\n setSortKey(key)\n setSortDir(\"asc\")\n } else if (sortDir === \"asc\") {\n setSortDir(\"desc\")\n } else {\n setSortKey(null)\n setSortDir(null)\n }\n }\n\n const sortedData = React.useMemo(() => {\n if (!sortKey || !sortDir) return filteredData\n return [...filteredData].sort((a, b) => {\n const av = a[sortKey as keyof T]\n const bv = b[sortKey as keyof T]\n const cmp = String(av ?? \"\").localeCompare(String(bv ?? \"\"), undefined, {\n numeric: true,\n })\n return sortDir === \"asc\" ? cmp : -cmp\n })\n }, [filteredData, sortKey, sortDir])\n\n // ── Pagination ─────────────────────────────────────────────────────────────\n const [page, setPage] = React.useState(1)\n const totalPages = paginated\n ? Math.max(1, Math.ceil(sortedData.length / pageSize))\n : 1\n\n // Reset page when data changes\n React.useEffect(() => {\n setPage(1)\n }, [debouncedSearch, sortKey, sortDir])\n\n const displayData = paginated\n ? sortedData.slice((page - 1) * pageSize, page * pageSize)\n : sortedData\n\n // ── Selection ──────────────────────────────────────────────────────────────\n const [selectedIds, setSelectedIds] = React.useState>(\n new Set()\n )\n\n function toggleRow(id: string | number) {\n setSelectedIds((prev) => {\n const next = new Set(prev)\n if (next.has(id)) next.delete(id)\n else next.add(id)\n return next\n })\n }\n\n function toggleAll() {\n if (selectedIds.size === sortedData.length) {\n setSelectedIds(new Set())\n } else {\n setSelectedIds(new Set(sortedData.map((r) => r.id)))\n }\n }\n\n function clearSelection() {\n setSelectedIds(new Set())\n }\n\n React.useEffect(() => {\n onSelectionChange?.(data.filter((r) => selectedIds.has(r.id)))\n }, [selectedIds, data, onSelectionChange])\n\n // ── Inline editing ─────────────────────────────────────────────────────────\n const [editingCell, setEditingCell] = React.useState<{\n rowId: string | number\n colKey: string\n } | null>(null)\n\n function handleSaveEdit(\n rowId: string | number,\n colKey: string,\n value: string\n ) {\n setData((prev) =>\n prev.map((row) =>\n row.id === rowId ? { ...row, [colKey]: value } : row\n )\n )\n setEditingCell(null)\n }\n\n // ── Column widths (resizing) ───────────────────────────────────────────────\n const [colWidths, setColWidths] = React.useState(\n columns.map((c) => c.width ?? 160)\n )\n\n const resizeRef = React.useRef<{\n colIdx: number\n startX: number\n startWidth: number\n } | null>(null)\n\n function handleResizeStart(colIdx: number, startX: number) {\n resizeRef.current = {\n colIdx,\n startX,\n startWidth: colWidths[colIdx],\n }\n\n function onMouseMove(e: MouseEvent) {\n if (!resizeRef.current) return\n const diff = e.clientX - resizeRef.current.startX\n const newWidth = Math.max(60, resizeRef.current.startWidth + diff)\n setColWidths((prev) => {\n const next = [...prev]\n next[resizeRef.current!.colIdx] = newWidth\n return next\n })\n }\n\n function onMouseUp() {\n resizeRef.current = null\n document.removeEventListener(\"mousemove\", onMouseMove)\n document.removeEventListener(\"mouseup\", onMouseUp)\n }\n\n document.addEventListener(\"mousemove\", onMouseMove)\n document.addEventListener(\"mouseup\", onMouseUp)\n }\n\n // ── Render ─────────────────────────────────────────────────────────────────\n const allSelected =\n sortedData.length > 0 && selectedIds.size === sortedData.length\n\n return (\n
\n {searchable && (\n \n )}\n\n
\n \n setEditingCell({ rowId, colKey })}\n onSaveEdit={handleSaveEdit}\n onCancelEdit={() => setEditingCell(null)}\n />\n
\n\n {selectable && (\n \n )}\n\n {paginated && (\n \n )}\n
\n )\n}\n", "type": "registry:component" } ], "type": "registry:component" }