@nccirtu/tablefy 0.7.3 → 0.7.5

package/dist/columns/tablefy/data-table-header.d.ts

@@ -9,7 +9,9 @@ interface DataTableHeaderProps<TData> {
     onSearchChange?: (value: string) => void;
     table?: TanstackTable<TData>;
     selectedCount?: number;
+    enableColumnVisibility?: boolean;
+    columnVisibilityLabel?: string;
     className?: string;
 }
-export declare function DataTableHeader<TData>({ title, description, actions, search, searchValue, onSearchChange, table, selectedCount, className, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableHeader<TData>({ title, description, actions, search, searchValue, onSearchChange, table, selectedCount, enableColumnVisibility, columnVisibilityLabel, className, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/columns/types/table.d.ts

@@ -34,6 +34,7 @@ export interface DataTableConfig<TData> {
         desc: boolean;
     };
     enableColumnVisibility?: boolean;
+    columnVisibilityLabel?: string;
     density?: "compact" | "default" | "comfortable";
     bordered?: boolean;
     striped?: boolean;

package/dist/columns/types.d.ts

@@ -6,6 +6,8 @@ export interface BaseColumnConfig<TData> {
     sortable?: boolean;
     searchable?: boolean;
     hidden?: boolean;
+    visibleByDefault?: boolean;
+    visibilityLabel?: string;
     align?: "left" | "center" | "right";
     width?: string | number;
     className?: string;

package/dist/confirm/types.d.ts

@@ -4,5 +4,7 @@ export interface ConfirmOptions {
     confirmLabel?: string;
     cancelLabel?: string;
     variant?: "destructive" | "default";
+    icon?: React.ReactNode;
+    image?: string;
 }
 export type ConfirmHandler = (options: ConfirmOptions) => Promise<boolean>;

package/dist/index.esm.js

@@ -5,16 +5,16 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Search, X, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink } from 'lucide-react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Search, X, Columns, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink } from 'lucide-react';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { Progress } from '@/components/ui/progress';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-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;
@@ -48,7 +48,14 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
         return null;
     }
     return (jsxs("div", { className: cn("flex flex-col gap-4", className), children: [(title || description) && (jsxs("div", { className: "space-y-1", children: [title && (jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxs("div", { className: "relative max-w-sm flex-1", children: [jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsx(Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsx(X, { className: "h-4 w-4" }) }))] })), jsxs("div", { className: "flex items-center gap-2", children: [showBulkActions && (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 && (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "outline", size: "default", children: [jsx(Columns, { className: "h-4 w-4" }), jsx("span", { className: "ml-2", children: columnVisibilityLabel }), jsx(ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxs(DropdownMenuContent, { align: "end", className: "w-[200px]", children: [jsx(DropdownMenuLabel, { children: columnVisibilityLabel }), jsx(DropdownMenuSeparator, {}), table
+                                                .getAllColumns()
+                                                .filter((column) => column.getCanHide())
+                                                .map((column) => {
+                                                const meta = column.columnDef.meta;
+                                                const label = meta?.visibilityLabel || column.id;
+                                                return (jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: label }, column.id));
+                                            })] })] })), normalActions.length > 0 &&
                                 normalActions.map((action, index) => renderAction(action, index))] })] }))] }));
 }
 
@@ -374,7 +381,16 @@ class EmptyStateBuilder {
 function DataTable({ columns, data, config = {}, className, isLoading = false, isError = false, onRetry, }) {
     const [sorting, setSorting] = useState(config.defaultSort ? [config.defaultSort] : []);
     const [columnFilters, setColumnFilters] = useState([]);
-    const [columnVisibility, setColumnVisibility] = useState({});
+    // Initialize column visibility based on visibleByDefault
+    const [columnVisibility, setColumnVisibility] = useState(() => {
+        const initialVisibility = {};
+        columns.forEach((column) => {
+            if (column.meta?.visibleByDefault === false) {
+                initialVisibility[column.accessorKey || column.id] = false;
+            }
+        });
+        return initialVisibility;
+    });
     const [rowSelection, setRowSelection] = useState({});
     const [globalFilter, setGlobalFilter] = useState("");
     const table = useReactTable({
@@ -422,7 +438,7 @@ function DataTable({ columns, data, config = {}, className, isLoading = false, i
     };
     const selectedCount = table.getFilteredSelectedRowModel().rows.length;
     const hasRows = table.getRowModel().rows?.length > 0;
-    return (jsxs("div", { className: cn("flex flex-col", className), children: [jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table, selectedCount: selectedCount }), jsx("div", { className: cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxs(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: [jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (jsx(TableRow, { children: headerGroup.headers.map((header) => (jsx(TableHead, { children: header.isPlaceholder
+    return (jsxs("div", { className: cn("flex flex-col", className), children: [jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table, selectedCount: selectedCount, enableColumnVisibility: config.enableColumnVisibility, columnVisibilityLabel: config.columnVisibilityLabel }), jsx("div", { className: cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxs(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: [jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (jsx(TableRow, { children: headerGroup.headers.map((header) => (jsx(TableHead, { children: header.isPlaceholder
                                         ? null
                                         : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), jsx(TableBody, { children: isLoading ? (jsx("tr", { children: jsx("td", { colSpan: columns.length, className: "h-[400px]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "flex flex-col items-center gap-4", children: [jsxs("svg", { className: "animate-spin h-8 w-8 text-muted-foreground", viewBox: "0 0 24 24", children: [jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), jsx("span", { className: "text-sm text-muted-foreground", children: "Laden..." })] }) }) }) })) : hasRows ? (table.getRowModel().rows.map((row) => (jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsx(DataTableEmpty, { config: getEmptyState(), colSpan: columns.length })) })] }) }), config.pagination?.enabled && hasRows && (jsx(DataTablePagination, { table: table, config: config.pagination }))] }));
 }
@@ -464,6 +480,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;
@@ -1726,7 +1750,10 @@ function ConfirmProvider({ children }) {
             setQueue((q) => q.slice(1));
         }
     };
-    return (jsxs(Fragment, { children: [children, jsx(Dialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(DialogContent, { children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: currentRequest?.options?.title || "Bestätigung erforderlich" }), currentRequest?.options?.description && (jsx(DialogDescription, { children: currentRequest.options.description }))] }), jsxs(DialogFooter, { children: [jsx(Button, { variant: "outline", onClick: handleCancel, children: currentRequest?.options.cancelLabel || "Abbrechen" }), jsx(Button, { variant: currentRequest?.options.variant || "default", onClick: handleConfirm, children: currentRequest?.options.confirmLabel || "Bestätigen" })] })] }) })] }));
+    const { title, description, confirmLabel, cancelLabel, variant, icon, image, } = currentRequest?.options || {};
+    return (jsxs(Fragment, { children: [children, jsx(AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(AlertDialogContent, { className: "max-w-md", children: [jsxs(AlertDialogHeader, { children: [image && (jsx("div", { className: "mb-4 flex justify-center", children: jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsx("div", { className: "mb-4 flex justify-center text-6xl", children: icon })), jsx(AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsx(AlertDialogDescription, { className: "text-center", children: description }))] }), jsxs(AlertDialogFooter, { className: "sm:justify-center", children: [jsx(AlertDialogCancel, { onClick: handleCancel, children: cancelLabel || "Abbrechen" }), jsx(AlertDialogAction, { onClick: handleConfirm, className: variant === "destructive"
+                                        ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                        : "", children: confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
 export { AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, EnumColumn, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TableSchema, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, EnumColumn as enumColumn, IconColumn as iconColumn, InputColumn as inputColumn };