@nccirtu/tablefy 0.6.4 → 0.6.6

package/dist/columns/columns/input-column.d.ts

@@ -1,14 +1,27 @@
-interface InputColumnConfig {
-    accessorKey?: string;
-    header?: string;
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
+interface InputColumnConfig<TData> extends BaseColumnConfig<TData> {
     placeholder?: string;
-    onChange?: (data: any, value: string) => void;
+    type?: "text" | "email" | "number" | "password" | "url";
+    disabled?: boolean | ((row: TData) => boolean);
+    onSave?: (row: TData, newValue: string) => void;
+    onChange?: (row: TData, newValue: string) => void;
+    debounce?: number;
+}
+export declare class InputColumn<TData> extends BaseColumn<TData, InputColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): InputColumn<TData>;
+    placeholder(placeholder: string): this;
+    type(type: "text" | "email" | "number" | "password" | "url"): this;
+    disabled(disabled: boolean | ((row: TData) => boolean)): this;
+    onSave(handler: (row: TData, newValue: string) => void): this;
+    onChange(handler: (row: TData, newValue: string) => void): this;
+    debounce(ms: number): this;
+    email(): this;
+    number(): this;
+    password(): this;
+    url(): this;
+    build(): ColumnDef<TData, unknown>;
 }
-export declare const InputColumn: (config: InputColumnConfig) => {
-    accessorKey: string;
-    header: string;
-    cell: ({ row }: {
-        row: any;
-    }) => import("react/jsx-runtime").JSX.Element;
-};
 export { InputColumn as inputColumn };

package/dist/columns/columns/select-column.d.ts

@@ -1,19 +1,24 @@
-interface SelectOption {
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumn } from "./base-column";
+import { BaseColumnConfig } from "./types";
+export interface SelectOption {
     label: string;
     value: string;
+    disabled?: boolean;
 }
-interface SelectColumnConfig {
-    accessorKey?: string;
-    header?: string;
+interface SelectColumnConfig<TData> extends BaseColumnConfig<TData> {
+    options?: SelectOption[];
     placeholder?: string;
-    options: SelectOption[];
-    onChange?: (data: any, value: string) => void;
+    disabled?: boolean | ((row: TData) => boolean);
+    onValueChange?: (row: TData, newValue: string) => void;
+}
+export declare class SelectColumn<TData> extends BaseColumn<TData, SelectColumnConfig<TData>> {
+    constructor(accessor: keyof TData | string);
+    static make<TData>(accessor: keyof TData | string): SelectColumn<TData>;
+    options(options: SelectOption[]): this;
+    placeholder(placeholder: string): this;
+    disabled(disabled: boolean | ((row: TData) => boolean)): this;
+    onValueChange(handler: (row: TData, newValue: string) => void): this;
+    build(): ColumnDef<TData, unknown>;
 }
-export declare const SelectColumn: (config: SelectColumnConfig) => {
-    accessorKey: string;
-    header: string;
-    cell: ({ row }: {
-        row: any;
-    }) => import("react/jsx-runtime").JSX.Element;
-};
 export { SelectColumn as selectColumn };

package/dist/columns/index.esm.js

@@ -6,6 +6,7 @@ import { ArrowUpDown, Calendar, ExternalLink, MoreHorizontal } from 'lucide-reac
 import { Checkbox } from '@/components/ui/checkbox';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import { useState, useEffect } from 'react';
 import { Input } from '@/components/ui/input';
 import { Progress } from '@/components/ui/progress';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
@@ -722,17 +723,91 @@ class ImageColumn extends BaseColumn {
     }
 }
 
-const InputColumn = (config) => {
-    const accessorKey = config.accessorKey || "input";
-    return {
-        accessorKey,
-        header: config.header || "Input",
-        cell: ({ row }) => {
-            const value = row.getValue(accessorKey);
-            return (jsx(Input, { value: value || "", onChange: (e) => config.onChange && config.onChange(row.original, e.target.value), placeholder: config.placeholder || "Enter value" }));
-        },
-    };
-};
+class InputColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        const config = this.config;
+        config.type = "text";
+        config.disabled = false;
+    }
+    static make(accessor) {
+        return new InputColumn(accessor);
+    }
+    placeholder(placeholder) {
+        this.config.placeholder = placeholder;
+        return this;
+    }
+    type(type) {
+        this.config.type = type;
+        return this;
+    }
+    disabled(disabled) {
+        this.config.disabled = disabled;
+        return this;
+    }
+    onSave(handler) {
+        this.config.onSave = handler;
+        return this;
+    }
+    onChange(handler) {
+        this.config.onChange = handler;
+        return this;
+    }
+    debounce(ms) {
+        this.config.debounce = ms;
+        return this;
+    }
+    // Shortcuts
+    email() {
+        return this.type("email");
+    }
+    number() {
+        return this.type("number");
+    }
+    password() {
+        return this.type("password");
+    }
+    url() {
+        return this.type("url");
+    }
+    build() {
+        const config = this.config;
+        const { accessor, label, sortable, placeholder, type, disabled, onSave, onChange, } = config;
+        return {
+            accessorKey: accessor,
+            header: ({ column }) => {
+                const displayLabel = label || String(accessor);
+                if (!sortable) {
+                    return (jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                }
+                return (jsxs(Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
+            },
+            cell: ({ getValue, row }) => {
+                const initialValue = getValue();
+                const [localValue, setLocalValue] = useState(initialValue || "");
+                const isDisabled = typeof disabled === "function" ? disabled(row.original) : disabled;
+                // Sync local value with table data when it changes externally
+                useEffect(() => {
+                    setLocalValue(initialValue || "");
+                }, [initialValue]);
+                const handleChange = (e) => {
+                    const newValue = e.target.value;
+                    setLocalValue(newValue);
+                    if (onChange) {
+                        onChange(row.original, newValue);
+                    }
+                };
+                const handleBlur = (e) => {
+                    const newValue = e.target.value;
+                    if (onSave && newValue !== initialValue) {
+                        onSave(row.original, newValue);
+                    }
+                };
+                return (jsx(Input, { type: type || "text", value: localValue, onChange: handleChange, onBlur: handleBlur, placeholder: placeholder, disabled: isDisabled, className: cn("h-8", this.config.cellClassName) }));
+            },
+        };
+    }
+}
 
 class LinkColumn extends BaseColumn {
     constructor(accessor) {
@@ -1043,17 +1118,63 @@ class ProgressColumn extends BaseColumn {
     }
 }
 
-const SelectColumn = (config) => {
-    const accessorKey = config.accessorKey || "select";
-    return {
-        accessorKey,
-        header: config.header || "Select",
-        cell: ({ row }) => {
-            const value = row.getValue(accessorKey);
-            return (jsxs(Select, { value: value || "", onValueChange: (value) => config.onChange && config.onChange(row.original, value), children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: config.placeholder || "Select an option" }) }), jsx(SelectContent, { children: config.options.map((option, index) => (jsx(SelectItem, { value: option.value, children: option.label }, index))) })] }));
-        },
-    };
-};
+class SelectColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        const config = this.config;
+        config.options = [];
+        config.disabled = false;
+    }
+    static make(accessor) {
+        return new SelectColumn(accessor);
+    }
+    options(options) {
+        this.config.options = options;
+        return this;
+    }
+    placeholder(placeholder) {
+        this.config.placeholder = placeholder;
+        return this;
+    }
+    disabled(disabled) {
+        this.config.disabled = disabled;
+        return this;
+    }
+    onValueChange(handler) {
+        this.config.onValueChange = handler;
+        return this;
+    }
+    build() {
+        const config = this.config;
+        const { accessor, label, sortable, options, placeholder, disabled, onValueChange, } = config;
+        return {
+            accessorKey: accessor,
+            header: ({ column }) => {
+                const displayLabel = label || String(accessor);
+                if (!sortable) {
+                    return (jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                }
+                return (jsxs(Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
+            },
+            cell: ({ getValue, row }) => {
+                const initialValue = getValue();
+                const [localValue, setLocalValue] = useState(initialValue || "");
+                const isDisabled = typeof disabled === "function" ? disabled(row.original) : disabled;
+                // Sync local value with table data when it changes externally
+                useEffect(() => {
+                    setLocalValue(initialValue || "");
+                }, [initialValue]);
+                const handleValueChange = (newValue) => {
+                    setLocalValue(newValue);
+                    if (onValueChange) {
+                        onValueChange(row.original, newValue);
+                    }
+                };
+                return (jsxs(Select, { value: localValue, onValueChange: handleValueChange, disabled: isDisabled, children: [jsx(SelectTrigger, { className: cn("h-8", this.config.cellClassName), children: jsx(SelectValue, { placeholder: placeholder || "Select..." }) }), jsx(SelectContent, { children: options?.map((option, index) => (jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, index))) })] }));
+            },
+        };
+    }
+}
 
 class TextColumn extends BaseColumn {
     static make(accessor) {