@nccirtu/tablefy 0.8.2 → 0.8.4

package/dist/columns/types.d.ts

@@ -27,6 +27,13 @@ export interface BadgeColumnConfig<TData> extends BaseColumnConfig<TData> {
         className?: string;
         icon?: ReactNode;
     }>;
+    variantFn?: (value: unknown, row: TData) => {
+        label?: string;
+        variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "muted";
+        className?: string;
+        icon?: ReactNode;
+    };
+    classNameFn?: (value: unknown, row: TData) => string;
 }
 export interface ActionConfig<TData> {
     label: string;

package/dist/index.d.ts

@@ -13,6 +13,9 @@ export { InputColumn, InputColumn as inputColumn, } from "./columns/input-column
 export { LinkColumn } from "./columns/link-column";
 export { NumberColumn } from "./columns/number-column";
 export { ProgressColumn, SelectColumn } from "./columns";
+export { ActionsColumn, ActionsColumn as actionsColumn, } from "./columns/actions-column";
+export type { ActionItem } from "./columns/actions-column";
+export { TextColumn, TextColumn as textColumn } from "./columns/text-column";
 export { EnumColumn, EnumColumn as enumColumn } from "./columns/enum-column";
 export type { EnumOption } from "./columns/enum-column";
 export { ConfirmProvider, confirm } from "./confirm";

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Search, X, Columns, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink } from 'lucide-react';
+import { Search, X, Columns, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, MoreHorizontal } from 'lucide-react';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -599,8 +599,18 @@ class BadgeColumn extends BaseColumn {
         this.config.variants = variants;
         return this;
     }
+    // Dynamische Variante basierend auf Row-Daten
+    variantFn(fn) {
+        this.config.variantFn = fn;
+        return this;
+    }
+    // Dynamische className basierend auf Row-Daten
+    classNameFn(fn) {
+        this.config.classNameFn = fn;
+        return this;
+    }
     build() {
-        const { accessor, label, sortable, variants } = this.config;
+        const { accessor, label, sortable, variants, variantFn, classNameFn } = this.config;
         return {
             accessorKey: accessor,
             header: ({ column }) => {
@@ -610,18 +620,31 @@ class BadgeColumn extends BaseColumn {
                 }
                 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 }) => {
-                const value = String(getValue());
-                const variantConfig = variants?.[value];
-                if (!variantConfig) {
-                    return (jsx(Badge, { variant: "outline", className: this.config.cellClassName, children: value }));
+            cell: ({ getValue, row }) => {
+                const value = getValue();
+                const stringValue = String(value);
+                // Priority 1: Dynamic variantFn (highest priority)
+                if (variantFn) {
+                    const dynamicConfig = variantFn(value, row.original);
+                    return (jsxs(Badge, { variant: dynamicConfig.variant === "success" ||
+                            dynamicConfig.variant === "warning" ||
+                            dynamicConfig.variant === "info" ||
+                            dynamicConfig.variant === "muted"
+                            ? "default"
+                            : dynamicConfig.variant || "default", className: cn(dynamicConfig.className, classNameFn?.(value, row.original), this.config.cellClassName), children: [dynamicConfig.icon, dynamicConfig.label || stringValue] }));
+                }
+                // Priority 2: Static variants lookup
+                const variantConfig = variants?.[stringValue];
+                if (variantConfig) {
+                    return (jsxs(Badge, { variant: variantConfig.variant === "success" ||
+                            variantConfig.variant === "warning" ||
+                            variantConfig.variant === "info" ||
+                            variantConfig.variant === "muted"
+                            ? "default"
+                            : variantConfig.variant || "default", className: cn(variantConfig.className, classNameFn?.(value, row.original), this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || stringValue] }));
                 }
-                return (jsxs(Badge, { variant: variantConfig.variant === "success" ||
-                        variantConfig.variant === "warning" ||
-                        variantConfig.variant === "info" ||
-                        variantConfig.variant === "muted"
-                        ? "default"
-                        : variantConfig.variant || "default", className: cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
+                // Priority 3: Default badge with optional dynamic className
+                return (jsx(Badge, { variant: "outline", className: cn(classNameFn?.(value, row.original), this.config.cellClassName), children: stringValue }));
             },
         };
     }
@@ -1542,6 +1565,164 @@ class SelectColumn extends BaseColumn {
     }
 }
 
+class TextColumn extends BaseColumn {
+    static make(accessor) {
+        return new TextColumn(accessor);
+    }
+    formatter(fn) {
+        this.config.formatter = fn;
+        return this;
+    }
+    prefix(prefix) {
+        this.config.prefix = prefix;
+        return this;
+    }
+    suffix(suffix) {
+        this.config.suffix = suffix;
+        return this;
+    }
+    placeholder(placeholder) {
+        this.config.placeholder = placeholder;
+        return this;
+    }
+    // Shortcuts für gängige Formatierungen
+    uppercase() {
+        const existingFormatter = this.config.formatter;
+        this.config.formatter = (value, row) => {
+            const result = existingFormatter ? existingFormatter(value, row) : value;
+            return typeof result === "string"
+                ? result.toUpperCase()
+                : result;
+        };
+        return this;
+    }
+    lowercase() {
+        const existingFormatter = this.config.formatter;
+        this.config.formatter = (value, row) => {
+            const result = existingFormatter ? existingFormatter(value, row) : value;
+            return typeof result === "string"
+                ? result.toLowerCase()
+                : result;
+        };
+        return this;
+    }
+    limit(chars) {
+        const existingFormatter = this.config.formatter;
+        this.config.formatter = (value, row) => {
+            const result = existingFormatter ? existingFormatter(value, row) : value;
+            if (typeof result === "string" && result.length > chars) {
+                return result.slice(0, chars) + "...";
+            }
+            return result;
+        };
+        return this;
+    }
+    build() {
+        const { accessor, label, sortable, prefix, suffix, placeholder, formatter, visibleByDefault, visibilityLabel, } = this.config;
+        return {
+            accessorKey: accessor,
+            meta: {
+                visibleByDefault,
+                visibilityLabel: visibilityLabel || label || String(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: ({ row, getValue }) => {
+                let value = getValue();
+                // Custom Formatter anwenden
+                if (formatter) {
+                    value = formatter(value, row);
+                }
+                // Placeholder wenn leer
+                if (value === null || value === undefined || value === "") {
+                    return (jsx("span", { className: cn("text-muted-foreground", this.getAlignmentClass(), this.config.cellClassName), children: placeholder || "—" }));
+                }
+                // Prefix/Suffix hinzufügen
+                const displayValue = `${prefix || ""}${value}${suffix || ""}`;
+                return (jsx("span", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue }));
+            },
+        };
+    }
+}
+
+class ActionsColumn {
+    config = {
+        actions: [],
+        label: "Aktionen",
+    };
+    static make() {
+        return new ActionsColumn();
+    }
+    label(label) {
+        this.config.label = label;
+        return this;
+    }
+    triggerIcon(icon) {
+        this.config.triggerIcon = icon;
+        return this;
+    }
+    // Action hinzufügen
+    action(action) {
+        this.config.actions.push(action);
+        return this;
+    }
+    // Shortcuts für gängige Actions
+    view(onClick) {
+        return this.action({ label: "Anzeigen", onClick });
+    }
+    edit(onClick) {
+        return this.action({ label: "Bearbeiten", onClick });
+    }
+    delete(onClick) {
+        return this.action({
+            label: "Löschen",
+            onClick,
+            variant: "destructive",
+            separator: true,
+        });
+    }
+    link(label, href) {
+        return this.action({ label, href });
+    }
+    separator() {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].separator = true;
+        }
+        return this;
+    }
+    build() {
+        const { actions, label, triggerIcon } = this.config;
+        return {
+            id: "actions",
+            header: () => jsx("span", { className: "sr-only", children: label }),
+            cell: ({ row }) => {
+                const data = row.original;
+                const visibleActions = actions.filter((action) => !action.hidden || !action.hidden(data));
+                if (visibleActions.length === 0)
+                    return null;
+                return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: "h-10 w-10 p-0", children: [jsx("span", { className: "sr-only", children: label }), triggerIcon || jsx(MoreHorizontal, { className: "h-8 w-8" })] }) }), jsx(DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => (jsxs("div", { children: [action.render ? (
+                                    // Custom render function takes priority
+                                    action.render(data)) : (
+                                    // Standard menu item
+                                    jsxs(DropdownMenuItem, { disabled: action.disabled?.(data), className: cn(action.variant === "destructive" &&
+                                            "text-destructive focus:text-destructive"), onClick: () => {
+                                            if (action.href) {
+                                                window.location.href = action.href(data);
+                                            }
+                                            else if (action.onClick) {
+                                                action.onClick(data);
+                                            }
+                                        }, children: [action.icon && (jsx("span", { className: "mr-2", children: action.icon })), action.label] })), action.separator && index < visibleActions.length - 1 && (jsx(DropdownMenuSeparator, {}))] }, index))) })] }));
+            },
+        };
+    }
+}
+
 class EnumColumn extends BaseColumn {
     constructor(accessor) {
         super(accessor);
@@ -1676,5 +1857,5 @@ function ConfirmProvider({ children }) {
     return (jsxs(Fragment, { children: [children, jsx(AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(AlertDialogContent, { className: "max-w-md", children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsx(AlertDialogDescription, { className: "text-center", children: description }))] }), image && (jsx("div", { className: "flex justify-center py-4", children: jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsx("div", { className: "flex justify-center py-4 text-6xl", children: icon })), jsxs(AlertDialogFooter, { className: "flex flex-row !justify-between w-full", children: [jsx(AlertDialogCancel, { onClick: handleCancel, className: "mt-0", children: cancelLabel || "Abbrechen" }), jsx(AlertDialogAction, { onClick: handleConfirm, variant: variant === "destructive" ? "destructive" : "default", children: confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
-export { AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, EnumColumn, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TableSchema, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, EnumColumn as enumColumn, IconColumn as iconColumn, InputColumn as inputColumn };
+export { ActionsColumn, AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, EnumColumn, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TableSchema, TextColumn, ActionsColumn as actionsColumn, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, EnumColumn as enumColumn, IconColumn as iconColumn, InputColumn as inputColumn, TextColumn as textColumn };
 //# sourceMappingURL=index.esm.js.map