@tablecraft/table 0.1.0

package/dist/view-options.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, GripVertical, Settings2, RotateCcw } from "lucide-react";
+import { cn } from "./utils/cn";
+import { useCallback, useEffect, useState, useMemo } from "react";
+import { Popover, PopoverContent, PopoverTrigger, } from "./components/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./components/command";
+const COLUMN_ORDER_STORAGE_KEY = "tablecraft-column-order";
+export function DataTableViewOptions({ table, columnMapping, size = "default", tableId, }) {
+    const columns = useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()), [table]);
+    const [draggedColumnId, setDraggedColumnId] = useState(null);
+    const storageKey = tableId
+        ? `${COLUMN_ORDER_STORAGE_KEY}-${tableId}`
+        : COLUMN_ORDER_STORAGE_KEY;
+    const columnOrder = table.getState().columnOrder;
+    const orderedColumns = useMemo(() => {
+        if (!columnOrder.length)
+            return columns;
+        return [...columns].sort((a, b) => {
+            const aIndex = columnOrder.indexOf(a.id);
+            const bIndex = columnOrder.indexOf(b.id);
+            if (aIndex === -1)
+                return 1;
+            if (bIndex === -1)
+                return -1;
+            return aIndex - bIndex;
+        });
+    }, [columns, columnOrder]);
+    // Load column order from localStorage
+    useEffect(() => {
+        try {
+            const savedOrder = localStorage.getItem(storageKey);
+            if (savedOrder) {
+                const parsed = JSON.parse(savedOrder);
+                if (Array.isArray(parsed)) {
+                    table.setColumnOrder(parsed);
+                }
+            }
+        }
+        catch {
+            // ignore
+        }
+    }, [table, storageKey]);
+    const saveColumnOrder = useCallback((order) => {
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(order));
+        }
+        catch {
+            // ignore
+        }
+    }, [storageKey]);
+    const handleColumnVisibilityToggle = useCallback((columnId) => {
+        const currentVisibility = table.getState().columnVisibility;
+        const isCurrentlyVisible = currentVisibility[columnId] !== false;
+        table.setColumnVisibility({
+            ...currentVisibility,
+            [columnId]: !isCurrentlyVisible,
+        });
+    }, [table]);
+    const handleDragStart = useCallback((e, columnId) => {
+        setDraggedColumnId(columnId);
+        e.dataTransfer.effectAllowed = "move";
+        if (e.dataTransfer.setDragImage && e.currentTarget instanceof HTMLElement) {
+            e.dataTransfer.setDragImage(e.currentTarget, 20, 20);
+        }
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+    }, []);
+    const handleDrop = useCallback((e, targetColumnId) => {
+        e.preventDefault();
+        if (!draggedColumnId || draggedColumnId === targetColumnId)
+            return;
+        const currentOrder = table.getState().columnOrder.length > 0
+            ? [...table.getState().columnOrder]
+            : table.getAllLeafColumns().map((d) => d.id);
+        const draggedIndex = currentOrder.indexOf(draggedColumnId);
+        const targetIndex = currentOrder.indexOf(targetColumnId);
+        if (draggedIndex === -1 || targetIndex === -1)
+            return;
+        const newOrder = [...currentOrder];
+        newOrder.splice(draggedIndex, 1);
+        newOrder.splice(targetIndex, 0, draggedColumnId);
+        table.setColumnOrder(newOrder);
+        saveColumnOrder(newOrder);
+        setDraggedColumnId(null);
+    }, [draggedColumnId, table, saveColumnOrder]);
+    const resetColumnOrder = useCallback(() => {
+        table.setColumnOrder([]);
+        localStorage.removeItem(storageKey);
+    }, [table, storageKey]);
+    const getColumnLabel = useCallback((column) => {
+        if (columnMapping && column.id in columnMapping) {
+            return columnMapping[column.id];
+        }
+        return (column.columnDef.meta?.label ??
+            column.id.replace(/_/g, " "));
+    }, [columnMapping]);
+    // Styles matching shadcn Button variant="outline"
+    const buttonClass = cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "border border-input bg-background hover:bg-accent hover:text-accent-foreground", size === "sm" ? "h-8 px-3" : size === "lg" ? "h-11 px-5" : "h-9 px-4", "ml-auto hidden lg:flex");
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { "aria-label": "Toggle columns", className: buttonClass, children: [_jsx(Settings2, { className: "mr-2 h-4 w-4" }), "View"] }) }), _jsx(PopoverContent, { align: "end", className: "w-[220px] p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search columns..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No columns found." }), _jsx(CommandGroup, { children: orderedColumns.map((column) => (_jsxs(CommandItem, { onSelect: () => handleColumnVisibilityToggle(column.id), draggable: true, onDragStart: (e) => handleDragStart(e, column.id), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, column.id), className: cn("flex items-center cursor-grab", draggedColumnId === column.id && "bg-accent opacity-50"), children: [_jsx(GripVertical, { className: "mr-2 h-4 w-4 cursor-grab text-muted-foreground" }), _jsx("span", { className: "flex-grow truncate capitalize", children: getColumnLabel(column) }), _jsx(Check, { className: cn("ml-auto h-4 w-4", column.getIsVisible() ? "opacity-100" : "opacity-0") })] }, column.id))) }), _jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsxs(CommandItem, { onSelect: resetColumnOrder, className: "justify-center text-center cursor-pointer", children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset Column Order"] }) })] })] }) })] }));
+}
+//# sourceMappingURL=view-options.js.map

package/dist/view-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-options.js","sourceRoot":"","sources":["../src/view-options.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@tablecraft/table",
+  "version": "0.1.0",
+  "description": "Schema-driven data table for React — built on TanStack Table + Shadcn UI with native TableCraft engine support",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run --bun tsc",
+    "dev": "bun run --bun tsc --watch",
+    "test": "vitest",
+    "typecheck": "bun run --bun tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": ">=8.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "exceljs": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "lucide-react": ">=0.300.0",
+    "react-day-picker": "^9.13.2",
+    "sonner": "^2.0.0",
+    "tailwind-merge": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@tablecraft/client": "workspace:*",
+    "@tanstack/react-table": "^8.20.0",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "keywords": [
+    "tablecraft",
+    "table",
+    "react",
+    "tanstack",
+    "shadcn",
+    "data-table"
+  ],
+  "license": "MIT"
+}