@nccirtu/tablefy 0.7.2 → 0.7.4

package/dist/index.js

@@ -16,7 +16,7 @@ var tooltip = require('@/components/ui/tooltip');
 var progress = require('@/components/ui/progress');
 var dialog = require('@/components/ui/dialog');
 
-function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, className, }) {
+function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, enableColumnVisibility = false, columnVisibilityLabel = "Spalten", className, }) {
     const normalActions = actions.filter((a) => !a.bulk && !a.hidden);
     const bulkActions = actions.filter((a) => a.bulk && !a.hidden);
     const showBulkActions = selectedCount > 0 && bulkActions.length > 0;
@@ -50,7 +50,14 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
         return null;
     }
     return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-4", className), children: [(title || description) && (jsxRuntime.jsxs("div", { className: "space-y-1", children: [title && (jsxRuntime.jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxRuntime.jsxs("div", { className: "relative max-w-sm flex-1", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsxRuntime.jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [showBulkActions && (jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedCount, " ausgew\u00E4hlt"] })), showBulkActions &&
-                                bulkActions.map((action, index) => renderAction(action, index)), normalActions.length > 0 &&
+                                bulkActions.map((action, index) => renderAction(action, index)), enableColumnVisibility && table && (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "outline", size: "default", children: [jsxRuntime.jsx(lucideReact.Columns, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "ml-2", children: columnVisibilityLabel }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-[200px]", children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuLabel, { children: columnVisibilityLabel }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), table
+                                                .getAllColumns()
+                                                .filter((column) => column.getCanHide())
+                                                .map((column) => {
+                                                const meta = column.columnDef.meta;
+                                                const label = meta?.visibilityLabel || column.id;
+                                                return (jsxRuntime.jsx(dropdownMenu.DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: label }, column.id));
+                                            })] })] })), normalActions.length > 0 &&
                                 normalActions.map((action, index) => renderAction(action, index))] })] }))] }));
 }
 
@@ -376,7 +383,16 @@ class EmptyStateBuilder {
 function DataTable({ columns, data, config = {}, className, isLoading = false, isError = false, onRetry, }) {
     const [sorting, setSorting] = react.useState(config.defaultSort ? [config.defaultSort] : []);
     const [columnFilters, setColumnFilters] = react.useState([]);
-    const [columnVisibility, setColumnVisibility] = react.useState({});
+    // Initialize column visibility based on visibleByDefault
+    const [columnVisibility, setColumnVisibility] = react.useState(() => {
+        const initialVisibility = {};
+        columns.forEach((column) => {
+            if (column.meta?.visibleByDefault === false) {
+                initialVisibility[column.accessorKey || column.id] = false;
+            }
+        });
+        return initialVisibility;
+    });
     const [rowSelection, setRowSelection] = react.useState({});
     const [globalFilter, setGlobalFilter] = react.useState("");
     const table$1 = reactTable.useReactTable({
@@ -424,7 +440,7 @@ function DataTable({ columns, data, config = {}, className, isLoading = false, i
     };
     const selectedCount = table$1.getFilteredSelectedRowModel().rows.length;
     const hasRows = table$1.getRowModel().rows?.length > 0;
-    return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", className), children: [jsxRuntime.jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table$1, selectedCount: selectedCount }), jsxRuntime.jsx("div", { className: utils.cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: utils.cn(densityClasses[config.density || "default"], config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "", config.hoverable !== false && "[&_tr:hover]:bg-muted/50"), children: [jsxRuntime.jsx(table.TableHeader, { children: table$1.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => (jsxRuntime.jsx(table.TableHead, { children: header.isPlaceholder
+    return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", className), children: [jsxRuntime.jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table$1, selectedCount: selectedCount, enableColumnVisibility: config.enableColumnVisibility, columnVisibilityLabel: config.columnVisibilityLabel }), jsxRuntime.jsx("div", { className: utils.cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: utils.cn(densityClasses[config.density || "default"], config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "", config.hoverable !== false && "[&_tr:hover]:bg-muted/50"), children: [jsxRuntime.jsx(table.TableHeader, { children: table$1.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => (jsxRuntime.jsx(table.TableHead, { children: header.isPlaceholder
                                         ? null
                                         : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), jsxRuntime.jsx(table.TableBody, { children: isLoading ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length, className: "h-[400px]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [jsxRuntime.jsxs("svg", { className: "animate-spin h-8 w-8 text-muted-foreground", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Laden..." })] }) }) }) })) : hasRows ? (table$1.getRowModel().rows.map((row) => (jsxRuntime.jsx(table.TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx(table.TableCell, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsxRuntime.jsx(DataTableEmpty, { config: getEmptyState(), colSpan: columns.length })) })] }) }), config.pagination?.enabled && hasRows && (jsxRuntime.jsx(DataTablePagination, { table: table$1, config: config.pagination }))] }));
 }
@@ -466,6 +482,14 @@ class BaseColumn {
         this.config.hidden = hidden;
         return this;
     }
+    visibleByDefault(visible = true) {
+        this.config.visibleByDefault = visible;
+        return this;
+    }
+    visibilityLabel(label) {
+        this.config.visibilityLabel = label;
+        return this;
+    }
     alignLeft() {
         this.config.align = "left";
         return this;
@@ -1598,60 +1622,70 @@ class SelectColumn extends BaseColumn {
     }
 }
 
-class TextColumn extends BaseColumn {
+class EnumColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        this.config.asBadge = true;
+        this.config.showIcon = true;
+        this.config.iconPosition = "left";
+    }
     static make(accessor) {
-        return new TextColumn(accessor);
+        return new EnumColumn(accessor);
     }
-    formatter(fn) {
-        this.config.formatter = fn;
+    /**
+     * Define the enum options with labels, icons, and colors
+     */
+    options(options) {
+        this.config.options = options;
         return this;
     }
-    prefix(prefix) {
-        this.config.prefix = prefix;
+    /**
+     * Display as plain text instead of badge
+     */
+    asText() {
+        this.config.asBadge = false;
         return this;
     }
-    suffix(suffix) {
-        this.config.suffix = suffix;
+    /**
+     * Display as badge (default)
+     */
+    asBadge() {
+        this.config.asBadge = true;
         return this;
     }
-    placeholder(placeholder) {
-        this.config.placeholder = placeholder;
+    /**
+     * Hide icons
+     */
+    hideIcon() {
+        this.config.showIcon = false;
         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;
-        };
+    /**
+     * Show icons (default)
+     */
+    showIcon() {
+        this.config.showIcon = true;
         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;
-        };
+    /**
+     * Set icon position
+     */
+    iconPosition(position) {
+        this.config.iconPosition = position;
         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;
-        };
+    /**
+     * Placeholder for unknown values
+     */
+    placeholder(placeholder) {
+        this.config.placeholder = placeholder;
         return this;
     }
     build() {
-        const { accessor, label, sortable, prefix, suffix, placeholder, formatter, } = this.config;
+        const { accessor, label, sortable, options, asBadge, showIcon, iconPosition, placeholder, } = this.config;
+        if (!options || options.length === 0) {
+            throw new Error(`EnumColumn "${String(accessor)}" requires options to be defined`);
+        }
         return {
             accessorKey: accessor,
             header: ({ column }) => {
@@ -1661,92 +1695,22 @@ class TextColumn extends BaseColumn {
                 }
                 return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.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 === "") {
+            cell: ({ getValue }) => {
+                const value = getValue();
+                // Find matching option
+                const option = options.find((opt) => opt.value === value);
+                // Handle unknown values
+                if (!option) {
                     return (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground", this.getAlignmentClass(), this.config.cellClassName), children: placeholder || "—" }));
                 }
-                // Prefix/Suffix hinzufügen
-                const displayValue = `${prefix || ""}${value}${suffix || ""}`;
-                return (jsxRuntime.jsx("span", { className: utils.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: () => jsxRuntime.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 (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "ghost", className: "h-10 w-10 p-0", children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), triggerIcon || jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-8 w-8" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => (jsxRuntime.jsxs("div", { children: [action.render ? (
-                                    // Custom render function takes priority
-                                    action.render(data)) : (
-                                    // Standard menu item
-                                    jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { disabled: action.disabled?.(data), className: utils.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 && (jsxRuntime.jsx("span", { className: "mr-2", children: action.icon })), action.label] })), action.separator && index < visibleActions.length - 1 && (jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}))] }, index))) })] }));
+                const Icon = option.icon;
+                const iconElement = showIcon && Icon ? jsxRuntime.jsx(Icon, { className: "h-4 w-4" }) : null;
+                // Render as Badge
+                if (asBadge) {
+                    return (jsxRuntime.jsx("div", { className: utils.cn(this.getAlignmentClass(), this.config.cellClassName), children: jsxRuntime.jsxs(badge.Badge, { variant: option.color || "default", className: utils.cn("inline-flex items-center gap-1.5", option.className), children: [iconPosition === "left" && iconElement, option.label, iconPosition === "right" && iconElement] }) }));
+                }
+                // Render as plain text with icon
+                return (jsxRuntime.jsxs("div", { className: utils.cn("inline-flex items-center gap-2", this.getAlignmentClass(), this.config.cellClassName, option.className), children: [iconPosition === "left" && iconElement, jsxRuntime.jsx("span", { children: option.label }), iconPosition === "right" && iconElement] }));
             },
         };
     }
@@ -1791,7 +1755,6 @@ function ConfirmProvider({ children }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(dialog.Dialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxRuntime.jsxs(dialog.DialogContent, { children: [jsxRuntime.jsxs(dialog.DialogHeader, { children: [jsxRuntime.jsx(dialog.DialogTitle, { children: currentRequest?.options?.title || "Bestätigung erforderlich" }), currentRequest?.options?.description && (jsxRuntime.jsx(dialog.DialogDescription, { children: currentRequest.options.description }))] }), jsxRuntime.jsxs(dialog.DialogFooter, { children: [jsxRuntime.jsx(button.Button, { variant: "outline", onClick: handleCancel, children: currentRequest?.options.cancelLabel || "Abbrechen" }), jsxRuntime.jsx(button.Button, { variant: currentRequest?.options.variant || "default", onClick: handleConfirm, children: currentRequest?.options.confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
-exports.ActionsColumn = ActionsColumn;
 exports.AvatarGroupColumn = AvatarGroupColumn;
 exports.BadgeColumn = BadgeColumn;
 exports.ButtonColumn = ButtonColumn;
@@ -1802,6 +1765,7 @@ exports.DataTableSchema = DataTableSchema;
 exports.DateColumn = DateColumn;
 exports.DropdownColumn = DropdownColumn;
 exports.EmptyStateBuilder = EmptyStateBuilder;
+exports.EnumColumn = EnumColumn;
 exports.IconColumn = IconColumn;
 exports.ImageColumn = ImageColumn;
 exports.InputColumn = InputColumn;
@@ -1810,7 +1774,6 @@ exports.NumberColumn = NumberColumn;
 exports.ProgressColumn = ProgressColumn;
 exports.SelectColumn = SelectColumn;
 exports.TableSchema = TableSchema;
-exports.TextColumn = TextColumn;
 exports.avatarGroupColumn = AvatarGroupColumn;
 exports.badgeColumn = BadgeColumn;
 exports.buttonColumn = ButtonColumn;
@@ -1818,9 +1781,7 @@ exports.checkboxColumn = CheckboxColumn;
 exports.confirm = confirm;
 exports.dateColumn = DateColumn;
 exports.dropdownColumn = DropdownColumn;
+exports.enumColumn = EnumColumn;
 exports.iconColumn = IconColumn;
 exports.inputColumn = InputColumn;
-exports.progressColumn = ProgressColumn;
-exports.selectColumn = SelectColumn;
-exports.textColumn = TextColumn;
 //# sourceMappingURL=index.js.map