@nccirtu/tablefy 0.6.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
  var reactTable = require('@tanstack/react-table');
6
6
  var table = require('@/components/ui/table');
7
- var clsx = require('clsx');
7
+ var utils = require('@/lib/utils');
8
8
  var button = require('@/components/ui/button');
9
9
  var input = require('@/components/ui/input');
10
10
  var dropdownMenu = require('@/components/ui/dropdown-menu');
@@ -15,10 +15,6 @@ var checkbox = require('@/components/ui/checkbox');
15
15
  var tooltip = require('@/components/ui/tooltip');
16
16
  var progress = require('@/components/ui/progress');
17
17
 
18
- function cn(...inputs) {
19
- return clsx(inputs.filter(Boolean));
20
- }
21
-
22
18
  function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, className, }) {
23
19
  const normalActions = actions.filter((a) => !a.bulk && !a.hidden);
24
20
  const bulkActions = actions.filter((a) => a.bulk && !a.hidden);
@@ -30,11 +26,11 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
30
26
  };
31
27
  const renderAction = (action, index) => {
32
28
  if (action.children && action.children.length > 0) {
33
- return (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, children: [action.icon, jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: action.children.map((child, childIndex) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: child.onClick, className: cn(child.variant === "destructive" &&
29
+ return (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, children: [action.icon, jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: action.children.map((child, childIndex) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: child.onClick, className: utils.cn(child.variant === "destructive" &&
34
30
  "text-destructive focus:text-destructive"), children: [child.icon && jsxRuntime.jsx("span", { className: "mr-2", children: child.icon }), child.label] }, child.id || childIndex))) })] }, action.id || index));
35
31
  }
36
32
  if (action.href) {
37
- return (jsxRuntime.jsx(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, asChild: true, children: jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, action.size !== "icon" && (jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label }))] }) }, action.id || index));
33
+ return (jsxRuntime.jsx(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, asChild: true, children: jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, action.size !== "icon" && (jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label }))] }) }, action.id || index));
38
34
  }
39
35
  return (jsxRuntime.jsxs(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, onClick: () => {
40
36
  if (action.bulk && action.bulkOnClick) {
@@ -43,7 +39,7 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
43
39
  else if (action.onClick) {
44
40
  action.onClick();
45
41
  }
46
- }, children: [action.loading ? (jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", 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" })] })) : (action.icon), action.size !== "icon" && (jsxRuntime.jsx("span", { className: cn(action.icon || action.loading ? "ml-2" : ""), children: action.label }))] }, action.id || index));
42
+ }, children: [action.loading ? (jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", 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" })] })) : (action.icon), action.size !== "icon" && (jsxRuntime.jsx("span", { className: utils.cn(action.icon || action.loading ? "ml-2" : ""), children: action.label }))] }, action.id || index));
47
43
  };
48
44
  if (!title &&
49
45
  !description &&
@@ -52,21 +48,23 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
52
48
  !search?.enabled) {
53
49
  return null;
54
50
  }
55
- return (jsxRuntime.jsxs("div", { className: 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 &&
51
+ 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 &&
56
52
  bulkActions.map((action, index) => renderAction(action, index)), normalActions.length > 0 &&
57
53
  normalActions.map((action, index) => renderAction(action, index))] })] }))] }));
58
54
  }
59
55
 
60
56
  function DataTableEmpty({ config, colSpan, className, }) {
61
57
  const { icon, imageUrl, title, description, action, variant } = config;
62
- return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: cn("h-[400px]", className), children: jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4 text-center p-8", children: [imageUrl ? (jsxRuntime.jsx("img", { className: "w-24 h-24", src: imageUrl, alt: "Empty State" })) : icon ? (jsxRuntime.jsx("div", { className: cn("rounded-full p-4", variant === "error" ? "bg-destructive/10" : "bg-muted"), children: icon })) : null, jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-2", children: [jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground whitespace-normal break-words", children: title }), description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-normal whitespace-normal break-words leading-relaxed", children: description }))] }), action && (jsxRuntime.jsx(button.Button, { variant: variant === "error" ? "outline" : "default", onClick: action.onClick, asChild: !!action.href, className: "mt-2", children: action.href ? (jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [action.icon, jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label })] })) }))] }) }) }));
58
+ return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: utils.cn("h-[400px]", className), children: jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4 text-center p-8", children: [imageUrl ? (jsxRuntime.jsx("img", { className: "w-24 h-24", src: imageUrl, alt: "Empty State" })) : icon ? (jsxRuntime.jsx("div", { className: utils.cn("rounded-full p-4", variant === "error" ? "bg-destructive/10" : "bg-muted"), children: icon })) : null, jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-2", children: [jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground whitespace-normal break-words", children: title }), description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-normal whitespace-normal break-words leading-relaxed", children: description }))] }), action && (jsxRuntime.jsx(button.Button, { variant: variant === "error" ? "outline" : "default", onClick: action.onClick, asChild: !!action.href, className: "mt-2", children: action.href ? (jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [action.icon, jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label })] })) }))] }) }) }));
63
59
  }
64
60
 
65
61
  function DataTablePagination({ table, config, className, }) {
66
62
  if (!config?.enabled)
67
63
  return null;
68
64
  const { showPageInfo = true, showPageSizeSelector = true, pageSizeOptions = [10, 20, 30, 50, 100], } = config;
69
- return (jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", className), children: [jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 ? (jsxRuntime.jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " von", " ", table.getFilteredRowModel().rows.length, " Zeile(n) ausgew\u00E4hlt"] })) : showPageInfo ? (jsxRuntime.jsxs("span", { children: [table.getFilteredRowModel().rows.length, " Eintr\u00E4ge"] })) : null }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6", children: [showPageSizeSelector && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zeilen pro Seite" }), jsxRuntime.jsxs(select.Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => table.setPageSize(Number(value)), children: [jsxRuntime.jsx(select.SelectTrigger, { className: "h-8 w-[70px]", children: jsxRuntime.jsx(select.SelectValue, { placeholder: table.getState().pagination.pageSize }) }), jsxRuntime.jsx(select.SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => (jsxRuntime.jsx(select.SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] })), showPageInfo && (jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["Seite ", table.getPageCount() > 0 ? table.getState().pagination.pageIndex + 1 : 0, " von", " ", Math.max(table.getPageCount(), 0)] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Erste Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Vorherige Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "N\u00E4chste Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: [jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Letzte Seite" })] })] })] })] }));
65
+ return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", className), children: [jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 ? (jsxRuntime.jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " von", " ", table.getFilteredRowModel().rows.length, " Zeile(n) ausgew\u00E4hlt"] })) : showPageInfo ? (jsxRuntime.jsxs("span", { children: [table.getFilteredRowModel().rows.length, " Eintr\u00E4ge"] })) : null }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6", children: [showPageSizeSelector && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zeilen pro Seite" }), jsxRuntime.jsxs(select.Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => table.setPageSize(Number(value)), children: [jsxRuntime.jsx(select.SelectTrigger, { className: "h-8 w-[70px]", children: jsxRuntime.jsx(select.SelectValue, { placeholder: table.getState().pagination.pageSize }) }), jsxRuntime.jsx(select.SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => (jsxRuntime.jsx(select.SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] })), showPageInfo && (jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["Seite", " ", table.getPageCount() > 0
66
+ ? table.getState().pagination.pageIndex + 1
67
+ : 0, " ", "von ", Math.max(table.getPageCount(), 0)] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Erste Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Vorherige Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "N\u00E4chste Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: [jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Letzte Seite" })] })] })] })] }));
70
68
  }
71
69
 
72
70
  /**
@@ -425,7 +423,7 @@ function DataTable({ columns, data, config = {}, className, isLoading = false, i
425
423
  };
426
424
  const selectedCount = table$1.getFilteredSelectedRowModel().rows.length;
427
425
  const hasRows = table$1.getRowModel().rows?.length > 0;
428
- return (jsxRuntime.jsxs("div", { className: 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: cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: 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
426
+ 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
429
427
  ? null
430
428
  : 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 }))] }));
431
429
  }
@@ -582,7 +580,7 @@ class AvatarGroupColumn extends BaseColumn {
582
580
  const { accessor, label, maxVisible, size, overlap, showTooltip, nameField, srcField, fallbackField, showNames, maxNames, } = config;
583
581
  return {
584
582
  accessorKey: accessor,
585
- header: () => (jsxRuntime.jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: label || String(accessor) })),
583
+ header: () => (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: label || String(accessor) })),
586
584
  cell: ({ getValue, row }) => {
587
585
  const rawValue = getValue();
588
586
  // Items aus den Daten extrahieren
@@ -615,7 +613,7 @@ class AvatarGroupColumn extends BaseColumn {
615
613
  }
616
614
  // Konvertiere zu Datenstruktur für AvatarList
617
615
  const contacts = this.toContactItems(items);
618
- return (jsxRuntime.jsx("div", { className: cn("flex items-center", this.config.cellClassName), children: jsxRuntime.jsx(AvatarList, { items: contacts.map((contact) => ({
616
+ return (jsxRuntime.jsx("div", { className: utils.cn("flex items-center", this.config.cellClassName), children: jsxRuntime.jsx(AvatarList, { items: contacts.map((contact) => ({
619
617
  id: contact.id,
620
618
  src: contact.src,
621
619
  alt: contact.alt,
@@ -663,9 +661,9 @@ class BadgeColumn extends BaseColumn {
663
661
  header: ({ column }) => {
664
662
  const displayLabel = label || String(accessor);
665
663
  if (!sortable) {
666
- return (jsxRuntime.jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
664
+ return (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
667
665
  }
668
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
666
+ 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" })] }));
669
667
  },
670
668
  cell: ({ getValue }) => {
671
669
  const value = String(getValue());
@@ -678,7 +676,7 @@ class BadgeColumn extends BaseColumn {
678
676
  variantConfig.variant === "info" ||
679
677
  variantConfig.variant === "muted"
680
678
  ? "default"
681
- : variantConfig.variant || "default", className: cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
679
+ : variantConfig.variant || "default", className: utils.cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
682
680
  },
683
681
  };
684
682
  }
@@ -790,9 +788,9 @@ class DateColumn extends BaseColumn {
790
788
  header: ({ column }) => {
791
789
  const displayLabel = label || String(accessor);
792
790
  if (!sortable) {
793
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
791
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
794
792
  }
795
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
793
+ 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" })] }));
796
794
  },
797
795
  cell: ({ getValue }) => {
798
796
  const value = getValue();
@@ -804,7 +802,7 @@ class DateColumn extends BaseColumn {
804
802
  return jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Ung\u00FCltiges Datum" });
805
803
  }
806
804
  const formatted = this.formatDate(date, format || 'short', locale || 'de-DE');
807
- return (jsxRuntime.jsxs("span", { className: cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [showIcon && jsxRuntime.jsx(lucideReact.Calendar, { className: "text-muted-foreground h-4 w-4" }), formatted] }));
805
+ return (jsxRuntime.jsxs("span", { className: utils.cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [showIcon && jsxRuntime.jsx(lucideReact.Calendar, { className: "text-muted-foreground h-4 w-4" }), formatted] }));
808
806
  },
809
807
  };
810
808
  }
@@ -1044,9 +1042,9 @@ class IconColumn extends BaseColumn {
1044
1042
  header: ({ column }) => {
1045
1043
  const displayLabel = label || String(accessor);
1046
1044
  if (!sortable) {
1047
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1045
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1048
1046
  }
1049
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1047
+ 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" })] }));
1050
1048
  },
1051
1049
  cell: ({ getValue }) => {
1052
1050
  const value = String(getValue());
@@ -1063,7 +1061,7 @@ class IconColumn extends BaseColumn {
1063
1061
  // Icon als Element rendern (falls LucideIcon übergeben wurde)
1064
1062
  const IconElement = typeof icon === 'function' ? icon : null;
1065
1063
  const renderedIcon = IconElement ? jsxRuntime.jsx(IconElement, { className: "h-full w-full" }) : icon;
1066
- const iconElement = (jsxRuntime.jsxs("div", { className: cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [withBackground ? (jsxRuntime.jsx("div", { className: cn('inline-flex items-center justify-center rounded-md', bgSizeClasses[size || 'md'], bgColor || 'bg-blue-50'), children: jsxRuntime.jsx("div", { className: cn(iconInBgSizeClasses[size || 'md'], color), children: renderedIcon }) })) : (jsxRuntime.jsx("div", { className: cn(sizeClasses[size || 'md'], color), children: renderedIcon })), showLabel && jsxRuntime.jsx("span", { className: cn('text-sm', color), children: stateLabel })] }));
1064
+ const iconElement = (jsxRuntime.jsxs("div", { className: utils.cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [withBackground ? (jsxRuntime.jsx("div", { className: utils.cn('inline-flex items-center justify-center rounded-md', bgSizeClasses[size || 'md'], bgColor || 'bg-blue-50'), children: jsxRuntime.jsx("div", { className: utils.cn(iconInBgSizeClasses[size || 'md'], color), children: renderedIcon }) })) : (jsxRuntime.jsx("div", { className: utils.cn(sizeClasses[size || 'md'], color), children: renderedIcon })), showLabel && jsxRuntime.jsx("span", { className: utils.cn('text-sm', color), children: stateLabel })] }));
1067
1065
  if (showTooltip) {
1068
1066
  return (jsxRuntime.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxs(tooltip.Tooltip, { children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: iconElement }), jsxRuntime.jsx(tooltip.TooltipContent, { children: jsxRuntime.jsx("p", { children: tooltip$1 }) })] }) }));
1069
1067
  }
@@ -1121,11 +1119,11 @@ class ImageColumn extends BaseColumn {
1121
1119
  };
1122
1120
  return {
1123
1121
  accessorKey: accessor,
1124
- header: () => jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
1122
+ header: () => jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
1125
1123
  cell: ({ getValue, row }) => {
1126
1124
  const src = getValue();
1127
1125
  const altText = alt ? alt(row.original) : 'Bild';
1128
- return (jsxRuntime.jsx("img", { src: src || fallback || '/placeholder.png', alt: altText, className: cn('object-cover', sizeClasses[size || 'md'], roundedClasses[rounded || 'md'], this.config.cellClassName), onError: (e) => {
1126
+ return (jsxRuntime.jsx("img", { src: src || fallback || '/placeholder.png', alt: altText, className: utils.cn('object-cover', sizeClasses[size || 'md'], roundedClasses[rounded || 'md'], this.config.cellClassName), onError: (e) => {
1129
1127
  if (fallback) {
1130
1128
  e.target.src = fallback;
1131
1129
  }
@@ -1215,9 +1213,9 @@ class LinkColumn extends BaseColumn {
1215
1213
  header: ({ column }) => {
1216
1214
  const displayLabel = label || String(accessor);
1217
1215
  if (!sortable) {
1218
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1216
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1219
1217
  }
1220
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1218
+ 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" })] }));
1221
1219
  },
1222
1220
  cell: ({ getValue, row }) => {
1223
1221
  const value = getValue();
@@ -1234,7 +1232,7 @@ class LinkColumn extends BaseColumn {
1234
1232
  };
1235
1233
  // Alignment ohne text-muted-foreground für Links
1236
1234
  const alignmentClass = this.config.align === 'center' ? 'text-center' : this.config.align === 'right' ? 'text-right' : 'text-left';
1237
- return (jsxRuntime.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, jsxRuntime.jsx("span", { children: value }), showExternalIcon && jsxRuntime.jsx(lucideReact.ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }));
1235
+ return (jsxRuntime.jsxs("a", { href: url, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, onClick: onClick ? handleClick : undefined, className: utils.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, jsxRuntime.jsx("span", { children: value }), showExternalIcon && jsxRuntime.jsx(lucideReact.ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }));
1238
1236
  },
1239
1237
  };
1240
1238
  }
@@ -1285,9 +1283,9 @@ class NumberColumn extends BaseColumn {
1285
1283
  header: ({ column }) => {
1286
1284
  const displayLabel = label || String(accessor);
1287
1285
  if (!sortable) {
1288
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1286
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1289
1287
  }
1290
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1288
+ 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" })] }));
1291
1289
  },
1292
1290
  cell: ({ getValue }) => {
1293
1291
  const value = getValue();
@@ -1317,7 +1315,7 @@ class NumberColumn extends BaseColumn {
1317
1315
  }).format(value);
1318
1316
  }
1319
1317
  const displayValue = `${prefix || ''}${formatted}${suffix || ''}`;
1320
- return jsxRuntime.jsx("span", { className: cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1318
+ return jsxRuntime.jsx("span", { className: utils.cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1321
1319
  },
1322
1320
  };
1323
1321
  }
@@ -1420,9 +1418,9 @@ class ProgressColumn extends BaseColumn {
1420
1418
  header: ({ column }) => {
1421
1419
  const displayLabel = label || String(accessor);
1422
1420
  if (!sortable) {
1423
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1421
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1424
1422
  }
1425
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1423
+ 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" })] }));
1426
1424
  },
1427
1425
  cell: ({ getValue }) => {
1428
1426
  const value = getValue();
@@ -1444,7 +1442,7 @@ class ProgressColumn extends BaseColumn {
1444
1442
  else if (showPercentage) {
1445
1443
  labelText = `${Math.round(percentage)}%`;
1446
1444
  }
1447
- return (jsxRuntime.jsxs("div", { className: cn('flex min-w-[120px] items-center gap-3', this.config.cellClassName), children: [jsxRuntime.jsx(progress.Progress, { value: percentage, className: cn('flex-1', sizeClasses[size || 'md'], colorClasses[currentColor]) }), labelText && jsxRuntime.jsx("span", { className: "text-muted-foreground min-w-[3rem] text-right text-sm tabular-nums", children: labelText })] }));
1445
+ return (jsxRuntime.jsxs("div", { className: utils.cn('flex min-w-[120px] items-center gap-3', this.config.cellClassName), children: [jsxRuntime.jsx(progress.Progress, { value: percentage, className: utils.cn('flex-1', sizeClasses[size || 'md'], colorClasses[currentColor]) }), labelText && jsxRuntime.jsx("span", { className: "text-muted-foreground min-w-[3rem] text-right text-sm tabular-nums", children: labelText })] }));
1448
1446
  },
1449
1447
  };
1450
1448
  }
@@ -1517,9 +1515,9 @@ class TextColumn extends BaseColumn {
1517
1515
  header: ({ column }) => {
1518
1516
  const displayLabel = label || String(accessor);
1519
1517
  if (!sortable) {
1520
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1518
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1521
1519
  }
1522
- return (jsxRuntime.jsxs(button.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, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1520
+ 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" })] }));
1523
1521
  },
1524
1522
  cell: ({ row, getValue }) => {
1525
1523
  let value = getValue();
@@ -1529,11 +1527,11 @@ class TextColumn extends BaseColumn {
1529
1527
  }
1530
1528
  // Placeholder wenn leer
1531
1529
  if (value === null || value === undefined || value === '') {
1532
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground', this.getAlignmentClass(), this.config.cellClassName), children: placeholder || '—' }));
1530
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground', this.getAlignmentClass(), this.config.cellClassName), children: placeholder || '—' }));
1533
1531
  }
1534
1532
  // Prefix/Suffix hinzufügen
1535
1533
  const displayValue = `${prefix || ''}${value}${suffix || ''}`;
1536
- return jsxRuntime.jsx("span", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1534
+ return jsxRuntime.jsx("span", { className: utils.cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1537
1535
  },
1538
1536
  };
1539
1537
  }
@@ -1594,7 +1592,7 @@ class ActionsColumn {
1594
1592
  const visibleActions = actions.filter((action) => !action.hidden || !action.hidden(data));
1595
1593
  if (visibleActions.length === 0)
1596
1594
  return null;
1597
- 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: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { disabled: action.disabled?.(data), className: cn(action.variant === 'destructive' && 'text-destructive focus:text-destructive'), onClick: () => {
1595
+ 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: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { disabled: action.disabled?.(data), className: utils.cn(action.variant === 'destructive' && 'text-destructive focus:text-destructive'), onClick: () => {
1598
1596
  if (action.href) {
1599
1597
  window.location.href = action.href(data);
1600
1598
  }