@nccirtu/tablefy 0.6.3 → 0.6.4

package/dist/columns/index.esm.js

@@ -23,7 +23,7 @@ class BaseColumn {
             sortable: false,
             searchable: false,
             hidden: false,
-            align: 'left',
+            align: "left",
         };
     }
     // Fluent API Methods
@@ -44,15 +44,15 @@ class BaseColumn {
         return this;
     }
     alignLeft() {
-        this.config.align = 'left';
+        this.config.align = "left";
         return this;
     }
     alignCenter() {
-        this.config.align = 'center';
+        this.config.align = "center";
         return this;
     }
     alignRight() {
-        this.config.align = 'right';
+        this.config.align = "right";
         return this;
     }
     width(width) {
@@ -73,11 +73,11 @@ class BaseColumn {
     }
     // Hilfsfunktion für Alignment-Klassen
     getAlignmentClass() {
-        const baseClasses = 'text-sm text-muted-foreground';
+        const baseClasses = "text-sm text-muted-foreground";
         switch (this.config.align) {
-            case 'center':
+            case "center":
                 return `${baseClasses} text-center`;
-            case 'right':
+            case "right":
                 return `${baseClasses} text-right`;
             default:
                 return `${baseClasses} text-left`;
@@ -278,8 +278,9 @@ class CheckboxColumn {
     }
     build() {
         return {
-            id: 'select',
-            header: ({ table }) => (jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Alle ausw\u00E4hlen" })),
+            id: "select",
+            header: ({ table }) => (jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() ||
+                    (table.getIsSomePageRowsSelected() && "indeterminate"), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Alle ausw\u00E4hlen" })),
             cell: ({ row }) => (jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Zeile ausw\u00E4hlen" })),
             enableSorting: false,
             enableHiding: false,
@@ -290,8 +291,8 @@ class CheckboxColumn {
 class DateColumn extends BaseColumn {
     constructor(accessor) {
         super(accessor);
-        this.config.format = 'short';
-        this.config.locale = 'de-DE';
+        this.config.format = "short";
+        this.config.locale = "de-DE";
         this.config.showIcon = false;
     }
     static make(accessor) {
@@ -311,52 +312,62 @@ class DateColumn extends BaseColumn {
     }
     // Shortcuts
     short() {
-        return this.format('short');
+        return this.format("short");
     }
     long() {
-        return this.format('long');
+        return this.format("long");
     }
     relative() {
-        return this.format('relative');
+        return this.format("relative");
     }
     time() {
-        return this.format('time');
+        return this.format("time");
     }
     datetime() {
-        return this.format('datetime');
+        return this.format("datetime");
     }
     formatDate(date, format, locale) {
-        if (format === 'relative') {
+        if (format === "relative") {
             return this.getRelativeTime(date);
         }
         const formatOptions = {
-            short: { day: '2-digit', month: '2-digit', year: 'numeric' },
-            long: { day: 'numeric', month: 'long', year: 'numeric' },
-            time: { hour: '2-digit', minute: '2-digit' },
-            datetime: { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' },
+            short: { day: "2-digit", month: "2-digit", year: "numeric" },
+            long: { day: "numeric", month: "long", year: "numeric" },
+            time: { hour: "2-digit", minute: "2-digit" },
+            datetime: {
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+            },
+        };
+        const options = formatOptions[format] || {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric",
         };
-        const options = formatOptions[format] || { day: '2-digit', month: '2-digit', year: 'numeric' };
         return new Intl.DateTimeFormat(locale, options).format(date);
     }
     getRelativeTime(date) {
         const now = new Date();
         const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
         const intervals = [
-            { label: 'Jahr', seconds: 31536000 },
-            { label: 'Monat', seconds: 2592000 },
-            { label: 'Woche', seconds: 604800 },
-            { label: 'Tag', seconds: 86400 },
-            { label: 'Stunde', seconds: 3600 },
-            { label: 'Minute', seconds: 60 },
+            { label: "Jahr", seconds: 31536000 },
+            { label: "Monat", seconds: 2592000 },
+            { label: "Woche", seconds: 604800 },
+            { label: "Tag", seconds: 86400 },
+            { label: "Stunde", seconds: 3600 },
+            { label: "Minute", seconds: 60 },
         ];
         for (const interval of intervals) {
             const count = Math.floor(diffInSeconds / interval.seconds);
             if (count >= 1) {
-                const plural = count > 1 ? (interval.label === 'Monat' ? 'e' : 'en') : '';
+                const plural = count > 1 ? (interval.label === "Monat" ? "e" : "en") : "";
                 return `vor ${count} ${interval.label}${plural}`;
             }
         }
-        return 'gerade eben';
+        return "gerade eben";
     }
     build() {
         const config = this.config;
@@ -366,9 +377,9 @@ class DateColumn extends BaseColumn {
             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 (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" })] }));
+                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 = getValue();
@@ -377,10 +388,10 @@ class DateColumn extends BaseColumn {
                 }
                 const date = value instanceof Date ? value : new Date(value);
                 if (isNaN(date.getTime())) {
-                    return jsx("span", { className: "text-muted-foreground", children: "Ung\u00FCltiges Datum" });
+                    return (jsx("span", { className: "text-muted-foreground", children: "Ung\u00FCltiges Datum" }));
                 }
-                const formatted = this.formatDate(date, format || 'short', locale || 'de-DE');
-                return (jsxs("span", { className: cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [showIcon && jsx(Calendar, { className: "text-muted-foreground h-4 w-4" }), formatted] }));
+                const formatted = this.formatDate(date, format || "short", locale || "de-DE");
+                return (jsxs("span", { className: cn("flex items-center gap-2", this.getAlignmentClass(), this.config.cellClassName), children: [showIcon && jsx(Calendar, { className: "text-muted-foreground h-4 w-4" }), formatted] }));
             },
         };
     }
@@ -403,11 +414,11 @@ class IconColumn extends BaseColumn {
         super(accessor);
         const config = this.config;
         config.states = {};
-        config.size = 'md';
+        config.size = "md";
         config.showLabel = false;
         config.showTooltip = true;
         config.withBackground = false;
-        config.align = 'center';
+        config.align = "center";
     }
     static make(accessor) {
         return new IconColumn(accessor);
@@ -459,14 +470,14 @@ class IconColumn extends BaseColumn {
         c.states = {
             true: {
                 icon: config?.trueIcon || this.createCheckIcon(),
-                label: config?.trueLabel || 'Ja',
-                color: config?.trueColor || 'text-green-500',
+                label: config?.trueLabel || "Ja",
+                color: config?.trueColor || "text-green-500",
                 bgColor: config?.trueBgColor,
             },
             false: {
                 icon: config?.falseIcon || this.createXIcon(),
-                label: config?.falseLabel || 'Nein',
-                color: config?.falseColor || 'text-red-500',
+                label: config?.falseLabel || "Nein",
+                color: config?.falseColor || "text-red-500",
                 bgColor: config?.falseBgColor,
             },
         };
@@ -477,15 +488,15 @@ class IconColumn extends BaseColumn {
         return this.states({
             active: {
                 icon: this.createCircleIcon(),
-                label: 'Aktiv',
-                color: 'text-green-500',
-                tooltip: 'Status: Aktiv',
+                label: "Aktiv",
+                color: "text-green-500",
+                tooltip: "Status: Aktiv",
             },
             inactive: {
                 icon: this.createCircleIcon(),
-                label: 'Inaktiv',
-                color: 'text-gray-400',
-                tooltip: 'Status: Inaktiv',
+                label: "Inaktiv",
+                color: "text-gray-400",
+                tooltip: "Status: Inaktiv",
             },
         });
     }
@@ -494,27 +505,27 @@ class IconColumn extends BaseColumn {
         return this.states({
             online: {
                 icon: this.createCircleIcon(),
-                label: 'Online',
-                color: 'text-green-500',
-                bgColor: 'bg-green-500',
+                label: "Online",
+                color: "text-green-500",
+                bgColor: "bg-green-500",
             },
             offline: {
                 icon: this.createCircleIcon(),
-                label: 'Offline',
-                color: 'text-gray-400',
-                bgColor: 'bg-gray-400',
+                label: "Offline",
+                color: "text-gray-400",
+                bgColor: "bg-gray-400",
             },
             away: {
                 icon: this.createCircleIcon(),
-                label: 'Abwesend',
-                color: 'text-yellow-500',
-                bgColor: 'bg-yellow-500',
+                label: "Abwesend",
+                color: "text-yellow-500",
+                bgColor: "bg-yellow-500",
             },
             busy: {
                 icon: this.createCircleIcon(),
-                label: 'Beschäftigt',
-                color: 'text-red-500',
-                bgColor: 'bg-red-500',
+                label: "Beschäftigt",
+                color: "text-red-500",
+                bgColor: "bg-red-500",
             },
         });
     }
@@ -523,23 +534,23 @@ class IconColumn extends BaseColumn {
         return this.states({
             low: {
                 icon: this.createArrowDownIcon(),
-                label: 'Niedrig',
-                color: 'text-blue-500',
+                label: "Niedrig",
+                color: "text-blue-500",
             },
             medium: {
                 icon: this.createMinusIcon(),
-                label: 'Mittel',
-                color: 'text-yellow-500',
+                label: "Mittel",
+                color: "text-yellow-500",
             },
             high: {
                 icon: this.createArrowUpIcon(),
-                label: 'Hoch',
-                color: 'text-orange-500',
+                label: "Hoch",
+                color: "text-orange-500",
             },
             critical: {
                 icon: this.createAlertIcon(),
-                label: 'Kritisch',
-                color: 'text-red-500',
+                label: "Kritisch",
+                color: "text-red-500",
             },
         });
     }
@@ -548,18 +559,18 @@ class IconColumn extends BaseColumn {
         return this.states({
             verified: {
                 icon: this.createShieldCheckIcon(),
-                label: 'Verifiziert',
-                color: 'text-green-500',
+                label: "Verifiziert",
+                color: "text-green-500",
             },
             pending: {
                 icon: this.createClockIcon(),
-                label: 'Ausstehend',
-                color: 'text-yellow-500',
+                label: "Ausstehend",
+                color: "text-yellow-500",
             },
             rejected: {
                 icon: this.createShieldXIcon(),
-                label: 'Abgelehnt',
-                color: 'text-red-500',
+                label: "Abgelehnt",
+                color: "text-red-500",
             },
         });
     }
@@ -596,33 +607,33 @@ class IconColumn extends BaseColumn {
     }
     build() {
         const config = this.config;
-        const { accessor, label, sortable, states, size, showLabel, showTooltip, withBackground, defaultIcon, defaultLabel } = config;
+        const { accessor, label, sortable, states, size, showLabel, showTooltip, withBackground, defaultIcon, defaultLabel, } = config;
         const sizeClasses = {
-            xs: 'h-3 w-3',
-            sm: 'h-4 w-4',
-            md: 'h-5 w-5',
-            lg: 'h-6 w-6',
+            xs: "h-3 w-3",
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6",
         };
         const bgSizeClasses = {
-            xs: 'h-5 w-5',
-            sm: 'h-6 w-6',
-            md: 'h-8 w-8',
-            lg: 'h-10 w-10',
+            xs: "h-5 w-5",
+            sm: "h-6 w-6",
+            md: "h-8 w-8",
+            lg: "h-10 w-10",
         };
         const iconInBgSizeClasses = {
-            xs: 'h-2.5 w-2.5',
-            sm: 'h-3 w-3',
-            md: 'h-4 w-4',
-            lg: 'h-5 w-5',
+            xs: "h-2.5 w-2.5",
+            sm: "h-3 w-3",
+            md: "h-4 w-4",
+            lg: "h-5 w-5",
         };
         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 (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" })] }));
+                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());
@@ -630,16 +641,16 @@ class IconColumn extends BaseColumn {
                 // Default verwenden wenn State nicht gefunden
                 const icon = stateConfig?.icon || defaultIcon;
                 const stateLabel = stateConfig?.label || defaultLabel || value;
-                const color = stateConfig?.color || 'text-muted-foreground';
+                const color = stateConfig?.color || "text-muted-foreground";
                 const bgColor = stateConfig?.bgColor;
                 const tooltip = stateConfig?.tooltip || stateLabel;
                 if (!icon) {
                     return jsx("span", { className: "text-muted-foreground", children: "\u2014" });
                 }
                 // Icon als Element rendern (falls LucideIcon übergeben wurde)
-                const IconElement = typeof icon === 'function' ? icon : null;
-                const renderedIcon = IconElement ? jsx(IconElement, { className: "h-full w-full" }) : icon;
-                const iconElement = (jsxs("div", { className: cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [withBackground ? (jsx("div", { className: cn('inline-flex items-center justify-center rounded-md', bgSizeClasses[size || 'md'], bgColor || 'bg-blue-50'), children: jsx("div", { className: cn(iconInBgSizeClasses[size || 'md'], color), children: renderedIcon }) })) : (jsx("div", { className: cn(sizeClasses[size || 'md'], color), children: renderedIcon })), showLabel && jsx("span", { className: cn('text-sm', color), children: stateLabel })] }));
+                const IconElement = typeof icon === "function" ? icon : null;
+                const renderedIcon = IconElement ? (jsx(IconElement, { className: "h-full w-full" })) : icon;
+                const iconElement = (jsxs("div", { className: cn("flex items-center gap-2", this.getAlignmentClass(), this.config.cellClassName), children: [withBackground ? (jsx("div", { className: cn("inline-flex items-center justify-center rounded-md", bgSizeClasses[size || "md"], bgColor || "bg-blue-50"), children: jsx("div", { className: cn(iconInBgSizeClasses[size || "md"], color), children: renderedIcon }) })) : (jsx("div", { className: cn(sizeClasses[size || "md"], color), children: renderedIcon })), showLabel && (jsx("span", { className: cn("text-sm", color), children: stateLabel }))] }));
                 if (showTooltip) {
                     return (jsx(TooltipProvider, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: iconElement }), jsx(TooltipContent, { children: jsx("p", { children: tooltip }) })] }) }));
                 }
@@ -652,8 +663,8 @@ class IconColumn extends BaseColumn {
 class ImageColumn extends BaseColumn {
     constructor(accessor) {
         super(accessor);
-        this.config.size = 'md';
-        this.config.rounded = 'md';
+        this.config.size = "md";
+        this.config.rounded = "md";
     }
     static make(accessor) {
         return new ImageColumn(accessor);
@@ -667,10 +678,10 @@ class ImageColumn extends BaseColumn {
         return this;
     }
     circular() {
-        return this.rounded('full');
+        return this.rounded("full");
     }
     square() {
-        return this.rounded('none');
+        return this.rounded("none");
     }
     fallback(url) {
         this.config.fallback = url;
@@ -684,24 +695,24 @@ class ImageColumn extends BaseColumn {
         const config = this.config;
         const { accessor, label, size, rounded, fallback, alt } = config;
         const sizeClasses = {
-            sm: 'h-8 w-8',
-            md: 'h-10 w-10',
-            lg: 'h-12 w-12',
+            sm: "h-8 w-8",
+            md: "h-10 w-10",
+            lg: "h-12 w-12",
         };
         const roundedClasses = {
-            none: 'rounded-none',
-            sm: 'rounded-sm',
-            md: 'rounded-md',
-            lg: 'rounded-lg',
-            full: 'rounded-full',
+            none: "rounded-none",
+            sm: "rounded-sm",
+            md: "rounded-md",
+            lg: "rounded-lg",
+            full: "rounded-full",
         };
         return {
             accessorKey: accessor,
-            header: () => jsx("span", { className: cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
+            header: () => (jsx("span", { className: cn("text-muted-foreground font-medium", this.config.headerClassName), children: label || "" })),
             cell: ({ getValue, row }) => {
                 const src = getValue();
-                const altText = alt ? alt(row.original) : 'Bild';
-                return (jsx("img", { src: src || fallback || '/placeholder.png', alt: altText, className: cn('object-cover', sizeClasses[size || 'md'], roundedClasses[rounded || 'md'], this.config.cellClassName), onError: (e) => {
+                const altText = alt ? alt(row.original) : "Bild";
+                return (jsx("img", { src: src || fallback || "/placeholder.png", alt: altText, className: cn("object-cover", sizeClasses[size || "md"], roundedClasses[rounded || "md"], this.config.cellClassName), onError: (e) => {
                         if (fallback) {
                             e.target.src = fallback;
                         }
@@ -729,7 +740,7 @@ class LinkColumn extends BaseColumn {
         const config = this.config;
         config.external = false;
         config.showExternalIcon = false;
-        config.underline = 'hover';
+        config.underline = "hover";
         config.openInNewTab = false;
     }
     static make(accessor) {
@@ -780,20 +791,20 @@ class LinkColumn extends BaseColumn {
     }
     build() {
         const config = this.config;
-        const { accessor, label, sortable, href, icon, showExternalIcon, underline, openInNewTab, onClick } = config;
+        const { accessor, label, sortable, href, icon, showExternalIcon, underline, openInNewTab, onClick, } = config;
         const underlineClasses = {
-            always: 'underline',
-            hover: 'hover:underline',
-            never: 'no-underline',
+            always: "underline",
+            hover: "hover:underline",
+            never: "no-underline",
         };
         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 (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" })] }));
+                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 value = getValue();
@@ -801,7 +812,7 @@ class LinkColumn extends BaseColumn {
                     return jsx("span", { className: "text-muted-foreground", children: "\u2014" });
                 }
                 // URL berechnen
-                const url = typeof href === 'function' ? href(row.original) : href || value;
+                const url = typeof href === "function" ? href(row.original) : href || value;
                 const handleClick = (e) => {
                     if (onClick) {
                         e.preventDefault();
@@ -809,8 +820,12 @@ class LinkColumn extends BaseColumn {
                     }
                 };
                 // Alignment ohne text-muted-foreground für Links
-                const alignmentClass = this.config.align === 'center' ? 'text-center' : this.config.align === 'right' ? 'text-right' : 'text-left';
-                return (jsxs("a", { href: url, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, onClick: onClick ? handleClick : undefined, className: cn('inline-flex items-center gap-1.5 text-sm text-blue-500', underlineClasses[underline || 'hover'], 'hover:text-blue-500/80', alignmentClass, this.config.cellClassName), children: [icon, jsx("span", { children: value }), showExternalIcon && jsx(ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }));
+                const alignmentClass = this.config.align === "center"
+                    ? "text-center"
+                    : this.config.align === "right"
+                        ? "text-right"
+                        : "text-left";
+                return (jsxs("a", { href: url, target: openInNewTab ? "_blank" : undefined, rel: openInNewTab ? "noopener noreferrer" : undefined, onClick: onClick ? handleClick : undefined, className: cn("inline-flex items-center gap-1.5 text-sm text-blue-500", underlineClasses[underline || "hover"], "hover:text-blue-500/80", alignmentClass, this.config.cellClassName), children: [icon, jsx("span", { children: value }), showExternalIcon && (jsx(ExternalLink, { className: "text-muted-foreground h-3 w-3" }))] }));
             },
         };
     }
@@ -819,9 +834,9 @@ class LinkColumn extends BaseColumn {
 class NumberColumn extends BaseColumn {
     constructor(accessor) {
         super(accessor);
-        this.config.align = 'right'; // Zahlen standardmäßig rechtsbündig
+        this.config.align = "right"; // Zahlen standardmäßig rechtsbündig
         this.config.decimals = 0;
-        this.config.locale = 'de-DE';
+        this.config.locale = "de-DE";
     }
     static make(accessor) {
         return new NumberColumn(accessor);
@@ -835,7 +850,7 @@ class NumberColumn extends BaseColumn {
         return this;
     }
     // Währungsformatierung
-    money(currency = 'EUR') {
+    money(currency = "EUR") {
         this.config.currency = currency;
         this.config.decimals = 2;
         return this;
@@ -855,15 +870,15 @@ class NumberColumn extends BaseColumn {
     }
     build() {
         const config = this.config;
-        const { accessor, label, sortable, decimals, locale, currency, percent, prefix, suffix } = config;
+        const { accessor, label, sortable, decimals, locale, currency, percent, prefix, suffix, } = 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 (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" })] }));
+                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 = getValue();
@@ -873,7 +888,7 @@ class NumberColumn extends BaseColumn {
                 let formatted;
                 if (currency) {
                     formatted = new Intl.NumberFormat(locale, {
-                        style: 'currency',
+                        style: "currency",
                         currency,
                         minimumFractionDigits: decimals,
                         maximumFractionDigits: decimals,
@@ -881,7 +896,7 @@ class NumberColumn extends BaseColumn {
                 }
                 else if (percent) {
                     formatted = new Intl.NumberFormat(locale, {
-                        style: 'percent',
+                        style: "percent",
                         minimumFractionDigits: decimals,
                         maximumFractionDigits: decimals,
                     }).format(value / 100);
@@ -892,8 +907,8 @@ class NumberColumn extends BaseColumn {
                         maximumFractionDigits: decimals,
                     }).format(value);
                 }
-                const displayValue = `${prefix || ''}${formatted}${suffix || ''}`;
-                return jsx("span", { className: cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
+                const displayValue = `${prefix || ""}${formatted}${suffix || ""}`;
+                return (jsx("span", { className: cn("tabular-nums", this.getAlignmentClass(), this.config.cellClassName), children: displayValue }));
             },
         };
     }
@@ -906,8 +921,8 @@ class ProgressColumn extends BaseColumn {
         config.max = 100;
         config.showValue = false;
         config.showPercentage = true;
-        config.size = 'md';
-        config.color = 'default';
+        config.size = "md";
+        config.color = "default";
     }
     static make(accessor) {
         return new ProgressColumn(accessor);
@@ -951,10 +966,10 @@ class ProgressColumn extends BaseColumn {
         config.color = (value, max) => {
             const percent = (value / max) * 100;
             if (percent <= danger)
-                return 'danger';
+                return "danger";
             if (percent <= warning)
-                return 'warning';
-            return 'success';
+                return "warning";
+            return "success";
         };
         return this;
     }
@@ -965,10 +980,10 @@ class ProgressColumn extends BaseColumn {
         config.color = (value, max) => {
             const percent = (value / max) * 100;
             if (percent >= danger)
-                return 'danger';
+                return "danger";
             if (percent >= warning)
-                return 'warning';
-            return 'success';
+                return "warning";
+            return "success";
         };
         return this;
     }
@@ -979,26 +994,26 @@ class ProgressColumn extends BaseColumn {
     }
     build() {
         const config = this.config;
-        const { accessor, label, sortable, max, showValue, showPercentage, size, color, format } = config;
+        const { accessor, label, sortable, max, showValue, showPercentage, size, color, format, } = config;
         const sizeClasses = {
-            sm: 'h-1.5',
-            md: 'h-2',
-            lg: 'h-3',
+            sm: "h-1.5",
+            md: "h-2",
+            lg: "h-3",
         };
         const colorClasses = {
-            default: '[&>div]:bg-primary',
-            success: '[&>div]:bg-green-500',
-            warning: '[&>div]:bg-yellow-500',
-            danger: '[&>div]:bg-red-500',
+            default: "[&>div]:bg-primary",
+            success: "[&>div]:bg-green-500",
+            warning: "[&>div]:bg-yellow-500",
+            danger: "[&>div]:bg-red-500",
         };
         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 (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" })] }));
+                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 = getValue();
@@ -1008,9 +1023,11 @@ class ProgressColumn extends BaseColumn {
                 }
                 const percentage = Math.min(100, Math.max(0, (value / maxValue) * 100));
                 // Farbe berechnen
-                const currentColor = typeof color === 'function' ? color(value, maxValue) : color || 'default';
+                const currentColor = typeof color === "function"
+                    ? color(value, maxValue)
+                    : color || "default";
                 // Label erstellen
-                let labelText = '';
+                let labelText = "";
                 if (format) {
                     labelText = format(value, maxValue);
                 }
@@ -1020,7 +1037,7 @@ class ProgressColumn extends BaseColumn {
                 else if (showPercentage) {
                     labelText = `${Math.round(percentage)}%`;
                 }
-                return (jsxs("div", { className: cn('flex min-w-[120px] items-center gap-3', this.config.cellClassName), children: [jsx(Progress, { value: percentage, className: cn('flex-1', sizeClasses[size || 'md'], colorClasses[currentColor]) }), labelText && jsx("span", { className: "text-muted-foreground min-w-[3rem] text-right text-sm tabular-nums", children: labelText })] }));
+                return (jsxs("div", { className: cn("flex min-w-[120px] items-center gap-3", this.config.cellClassName), children: [jsx(Progress, { value: percentage, className: cn("flex-1", sizeClasses[size || "md"], colorClasses[currentColor]) }), labelText && (jsx("span", { className: "text-muted-foreground min-w-[3rem] text-right text-sm tabular-nums", children: labelText }))] }));
             },
         };
     }
@@ -1063,7 +1080,9 @@ class TextColumn extends BaseColumn {
         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 typeof result === "string"
+                ? result.toUpperCase()
+                : result;
         };
         return this;
     }
@@ -1071,7 +1090,9 @@ class TextColumn extends BaseColumn {
         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 typeof result === "string"
+                ? result.toLowerCase()
+                : result;
         };
         return this;
     }
@@ -1079,23 +1100,23 @@ class TextColumn extends BaseColumn {
         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) + '...';
+            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 } = this.config;
+        const { accessor, label, sortable, prefix, suffix, placeholder, formatter, } = this.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 (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" })] }));
+                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();
@@ -1104,12 +1125,12 @@ class TextColumn extends BaseColumn {
                     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 || '—' }));
+                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 });
+                const displayValue = `${prefix || ""}${value}${suffix || ""}`;
+                return (jsx("span", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue }));
             },
         };
     }
@@ -1118,7 +1139,7 @@ class TextColumn extends BaseColumn {
 class ActionsColumn {
     config = {
         actions: [],
-        label: 'Aktionen',
+        label: "Aktionen",
     };
     static make() {
         return new ActionsColumn();
@@ -1138,16 +1159,16 @@ class ActionsColumn {
     }
     // Shortcuts für gängige Actions
     view(onClick) {
-        return this.action({ label: 'Anzeigen', onClick });
+        return this.action({ label: "Anzeigen", onClick });
     }
     edit(onClick) {
-        return this.action({ label: 'Bearbeiten', onClick });
+        return this.action({ label: "Bearbeiten", onClick });
     }
     delete(onClick) {
         return this.action({
-            label: 'Löschen',
+            label: "Löschen",
             onClick,
-            variant: 'destructive',
+            variant: "destructive",
             separator: true,
         });
     }
@@ -1163,21 +1184,22 @@ class ActionsColumn {
     build() {
         const { actions, label, triggerIcon } = this.config;
         return {
-            id: 'actions',
+            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: [jsxs(DropdownMenuItem, { disabled: action.disabled?.(data), className: cn(action.variant === 'destructive' && 'text-destructive focus:text-destructive'), onClick: () => {
+                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: [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))) })] }));
+                                        }, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }), action.separator && index < visibleActions.length - 1 && (jsx(DropdownMenuSeparator, {}))] }, index))) })] }));
             },
         };
     }