ikoncomponents 1.7.1 → 1.7.3

package/dist/ikoncomponents/fileUpload/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef } from "react";
 import { UploadCloud, FileUp, Upload, X } from "lucide-react";
 import { v4 as uuidv4 } from "uuid";
-import { Input } from "@/shadcn/input";
+import { Input } from "../../shadcn/input";
 import { IconButtonWithTooltip } from "../buttons";
 /* ----------------------------------------------------
    SAFE Base64 Converter

package/dist/ikoncomponents/fileUploadApi/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useImperativeHandle, forwardRef } from "react";
 import { UploadCloud, FileUp, Upload } from "lucide-react";
 import { v4 as uuidv4 } from "uuid";
-import { Input } from "@/shadcn/input";
+import { Input } from "../../shadcn/input";
 import { IconButtonWithTooltip } from "../buttons";
 import { uploadFilePublic } from "../../utils/api/file-upload copy";
 /* ----------------------------------------------------

package/dist/ikoncomponents/table/DataTable/index.d.ts

@@ -1,2 +1,2 @@
 import { DataTableProps } from "../type";
-export declare function DataTable<T>({ data, columns, keyExtractor, onRowClick }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T>({ data, columns, keyExtractor, onRowClick, groupedColumns, onToggleGroup }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/DataTable/index.js

@@ -1,9 +1,68 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../shadcn/table";
-export function DataTable({ data, columns, keyExtractor, onRowClick }) {
-    return (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "bg-muted border-b border-border", children: columns.map((col, index) => (_jsx(TableHead, { className: "font-semibold text-muted-foreground", children: typeof col.header === "function" ? col.header() : col.header }, index))) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (data.map((row) => (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(row), className: `hover:bg-muted/50 transition-colors border-b border-border ${onRowClick ? "cursor-pointer" : ""}`, children: columns.map((col, colIndex) => (_jsx(TableCell, { className: colIndex === 0 ? "font-medium" : "", children: col.cell
-                                ? col.cell(row)
-                                : col.accessorKey
-                                    ? String(row[col.accessorKey] || "N/A")
-                                    : null }, colIndex))) }, keyExtractor(onRowClick ? row : row))))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
+import React, { useState } from "react";
+import { ChevronRight, ChevronDown, GripVertical } from "lucide-react";
+import { Badge } from "../../../shadcn/badge";
+export function DataTable({ data, columns, keyExtractor, onRowClick, groupedColumns = [], onToggleGroup }) {
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const toggleGroup = (groupId) => {
+        const next = new Set(expandedGroups);
+        if (next.has(groupId)) {
+            next.delete(groupId);
+        }
+        else {
+            next.add(groupId);
+        }
+        setExpandedGroups(next);
+    };
+    // Helper to get accessor key from column header string
+    const getAccessor = (headerStr) => {
+        const col = columns.find(c => (typeof c.header === 'string' ? c.header : '') === headerStr);
+        return col === null || col === void 0 ? void 0 : col.accessorKey;
+    };
+    // Group data recursively
+    const getGroupedData = (items, groupIndices) => {
+        if (groupIndices.length === 0)
+            return items;
+        const [currentGroupHeader, ...remainingGroups] = groupIndices;
+        const accessor = getAccessor(currentGroupHeader);
+        if (!accessor)
+            return items;
+        const groups = new Map();
+        items.forEach(item => {
+            var _a;
+            const val = (_a = item[accessor]) !== null && _a !== void 0 ? _a : "None";
+            if (!groups.has(val))
+                groups.set(val, []);
+            groups.get(val).push(item);
+        });
+        return Array.from(groups.entries()).map(([value, groupItems]) => ({
+            isGroup: true,
+            header: currentGroupHeader,
+            value,
+            id: `${currentGroupHeader}:${value}`,
+            children: getGroupedData(groupItems, remainingGroups),
+            count: groupItems.length
+        }));
+    };
+    const groupedData = getGroupedData(data, groupedColumns);
+    const renderRows = (items, level = 0) => {
+        return items.map((item, index) => {
+            if (item.isGroup) {
+                const isExpanded = expandedGroups.has(item.id);
+                return (_jsxs(React.Fragment, { children: [_jsx(TableRow, { className: "bg-muted/40 hover:bg-muted/60 cursor-pointer border-l-4 border-l-primary/50", onClick: () => toggleGroup(item.id), children: _jsx(TableCell, { colSpan: columns.length, className: "py-2", style: { paddingLeft: `${level * 24 + 12}px` }, children: _jsxs("div", { className: "flex items-center gap-2", children: [isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronRight, { className: "w-4 h-4" }), _jsxs("span", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: [item.header, ":"] }), _jsx("span", { className: "font-semibold", children: String(item.value) }), _jsxs(Badge, { variant: "outline", className: "ml-2 text-[10px] py-0 h-4", children: [item.count, " items"] })] }) }) }), isExpanded && renderRows(item.children, level + 1)] }, item.id));
+            }
+            return (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(item), className: `hover:bg-muted/50 transition-colors border-b border-border ${onRowClick ? "cursor-pointer" : ""}`, children: columns.map((col, colIndex) => (_jsx(TableCell, { className: colIndex === 0 ? "font-medium" : "", style: { paddingLeft: colIndex === 0 ? `${level * 24 + 16}px` : undefined }, children: col.cell
+                        ? col.cell(item)
+                        : col.accessorKey
+                            ? String(item[col.accessorKey] || "N/A")
+                            : null }, colIndex))) }, keyExtractor(item)));
+        });
+    };
+    return (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "bg-muted border-b border-border", children: columns.map((col, index) => {
+                            const headerText = typeof col.header === "string" ? col.header : "";
+                            return (_jsx(TableHead, { className: "font-semibold text-muted-foreground group relative", children: _jsxs("div", { className: "flex items-center gap-2", children: [headerText && (_jsx("div", { className: "cursor-grab active:cursor-grabbing p-1 hover:bg-background/50 rounded transition-colors", draggable: true, onDragStart: (e) => {
+                                                e.dataTransfer.setData("columnHeader", headerText);
+                                            }, children: _jsx(GripVertical, { className: "w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" }) })), typeof col.header === "function" ? col.header() : col.header] }) }, index));
+                        }) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (renderRows(groupedData)) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
 }

package/dist/ikoncomponents/table/index.d.ts

@@ -1,2 +1,2 @@
 import { DataTableLayoutProps } from "./type";
-export declare function DataTableLayout<T>({ data, columns, keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableLayout<T>({ data, columns, extraTools, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/index.js

@@ -1,12 +1,165 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { LayoutGrid, List } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { LayoutGrid, List, ChevronDown, X, GripVertical, Settings2, Check, Download, RotateCcw, Search, ListFilter } from "lucide-react";
+import { Badge } from "../../shadcn/badge";
 import { Reload } from "../reload-component";
 import { DataTable } from "./DataTable";
 import { DataTableSearch } from "./DataTableSearch";
 import { DataTablePagination } from "./DataTablePagination";
 import { DataTablePageSize } from "./DataTablePageSize";
-export function DataTableLayout({ data, columns, keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading = false, onReload, }) {
+import { Button } from "../../shadcn/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
+export function DataTableLayout({ data, columns, extraTools, }) {
+    const { keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, themeColor, onLoadMore, hasMore, onFilterChange, unfilteredData, } = extraTools !== null && extraTools !== void 0 ? extraTools : {};
     const [viewMode, setViewMode] = useState("list");
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DataTableSearch, {}), filterComponent && filterComponent] }), _jsxs("div", { className: "flex items-center gap-2", children: [actionNode && actionNode, _jsxs("div", { className: "flex items-center border border-border rounded-md bg-background overflow-hidden h-9", children: [_jsx("button", { onClick: () => setViewMode("list"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "List View", children: _jsx(List, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => setViewMode("grid"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "Grid View", children: _jsx(LayoutGrid, { className: "w-4 h-4" }) })] })] })] }), _jsxs("div", { className: "relative min-h-[300px]", children: [_jsx(Reload, { isLoading: isLoading, onReload: onReload || (() => window.location.reload()) }), _jsx("div", { className: `transition-all duration-300 ${isLoading ? 'opacity-50 pointer-events-none' : ''}`, children: viewMode === "list" ? (_jsx(DataTable, { data: data, columns: columns, keyExtractor: keyExtractor, onRowClick: onRowClick })) : ((gridComponent ? gridComponent(data) : (_jsx("div", { className: "p-12 text-center text-muted-foreground border border-border border-dashed rounded-md bg-muted/20", children: "Grid view not implemented for this component yet." })))) })] }), _jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border mt-4", children: [_jsx(DataTablePageSize, {}), _jsx(DataTablePagination, { totalPages: totalPages, currentPage: currentPage })] })] }));
+    const observerTarget = useRef(null);
+    useEffect(() => {
+        if (viewMode !== "grid" || !onLoadMore || !hasMore)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                onLoadMore();
+            }
+        }, { threshold: 0.1 });
+        if (observerTarget.current) {
+            observer.observe(observerTarget.current);
+        }
+        return () => observer.disconnect();
+    }, [viewMode, onLoadMore, hasMore]);
+    const [groupedColumns, setGroupedColumns] = useState([]);
+    const [tableFilters, setTableFilters] = useState({});
+    const [activeFilterColumns, setActiveFilterColumns] = useState([]);
+    const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
+    const [pendingFilterColumns, setPendingFilterColumns] = useState([]);
+    const [filterSearchQuery, setFilterSearchQuery] = useState("");
+    const [columnSearchQueries, setColumnSearchQueries] = useState({});
+    const [visibleColumns, setVisibleColumns] = useState(columns.map(col => typeof col.header === "string" ? col.header : ""));
+    const toggleColumn = (header) => {
+        setVisibleColumns(prev => prev.includes(header) ? prev.filter(h => h !== header) : [...prev, header]);
+    };
+    const handleToggleFilterValue = (column, value) => {
+        const currentValues = tableFilters[column] || [];
+        const nextValues = currentValues.includes(value)
+            ? currentValues.filter(v => v !== value)
+            : [...currentValues, value];
+        const nextFilters = Object.assign({}, tableFilters);
+        if (nextValues.length === 0) {
+            delete nextFilters[column];
+        }
+        else {
+            nextFilters[column] = nextValues;
+        }
+        setTableFilters(nextFilters);
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
+    };
+    const removeActiveFilterColumn = (column) => {
+        const nextActiveColumns = activeFilterColumns.filter(c => c !== column);
+        const nextFilters = Object.assign({}, tableFilters);
+        delete nextFilters[column];
+        setActiveFilterColumns(nextActiveColumns);
+        setTableFilters(nextFilters);
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
+    };
+    const handleTogglePendingFilterColumn = (column) => {
+        setPendingFilterColumns(prev => prev.includes(column) ? prev.filter(c => c !== column) : [...prev, column]);
+    };
+    const getUniqueValuesForColumn = (header) => {
+        const col = columns.find(c => c.header === header);
+        if (!col || !col.accessorKey)
+            return [];
+        const sourceData = unfilteredData || data;
+        const values = sourceData.map(row => String(row[col.accessorKey] || ""));
+        return Array.from(new Set(values)).filter(Boolean).sort();
+    };
+    const handleToggleGroup = (columnHeader) => {
+        setGroupedColumns(prev => prev.includes(columnHeader)
+            ? prev.filter(c => c !== columnHeader)
+            : [...prev, columnHeader]);
+    };
+    const exportToCSV = () => {
+        if (!data || data.length === 0)
+            return;
+        const headers = columns
+            .filter(col => typeof col.header === "string")
+            .map(col => col.header);
+        const csvRows = data.map(row => columns
+            .filter(col => typeof col.header === "string")
+            .map(col => {
+            const val = col.accessorKey ? row[col.accessorKey] : "";
+            return `"${String(val).replace(/"/g, '""')}"`;
+        })
+            .join(","));
+        const csvContent = [headers.join(","), ...csvRows].join("\n");
+        const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+        const link = document.createElement("a");
+        const url = URL.createObjectURL(blob);
+        link.setAttribute("href", url);
+        link.setAttribute("download", `table-export-${new Date().toISOString().split('T')[0]}.csv`);
+        link.style.visibility = "hidden";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    // data is the current page from the backend — render it directly, no client-side filtering.
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full", children: [_jsx("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:max-w-[200px] shrink-0", children: _jsx(DataTableSearch, {}) }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap shrink-0", children: [actionNode && actionNode, filterComponent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter"] }) }), _jsx(DropdownMenuContent, { align: "end", className: "p-4 min-w-[200px]", children: filterComponent })] })), _jsxs(DropdownMenu, { open: isFilterDropdownOpen, onOpenChange: (open) => {
+                                    setIsFilterDropdownOpen(open);
+                                    if (open) {
+                                        setPendingFilterColumns(activeFilterColumns);
+                                    }
+                                }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background relative", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter", activeFilterColumns.length > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 w-4 h-4 bg-foreground text-background text-[10px] rounded-full flex items-center justify-center font-bold", children: activeFilterColumns.length }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 space-y-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Filter" }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search columns...", value: filterSearchQuery, onChange: (e) => setFilterSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsx("div", { className: "space-y-1 max-h-[300px] overflow-y-auto pr-1", children: columns
+                                                    .filter(col => {
+                                                    const headerText = typeof col.header === "string" ? col.header : "";
+                                                    return headerText && col.accessorKey && headerText.toLowerCase().includes(filterSearchQuery.toLowerCase());
+                                                })
+                                                    .map((col, idx) => {
+                                                    const headerText = typeof col.header === "string" ? col.header : "";
+                                                    const isSelected = pendingFilterColumns.includes(headerText);
+                                                    return (_jsxs("button", { onClick: () => handleTogglePendingFilterColumn(headerText), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate", children: headerText })] }, idx));
+                                                }) }), _jsxs("div", { className: "px-2 pt-2 mt-1 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "flex-1 text-xs font-medium bg-foreground text-background hover:bg-foreground/90", onClick: () => {
+                                                            setActiveFilterColumns(pendingFilterColumns);
+                                                            const removedColumns = activeFilterColumns.filter(c => !pendingFilterColumns.includes(c));
+                                                            const nextFilters = Object.assign({}, tableFilters);
+                                                            removedColumns.forEach(c => delete nextFilters[c]);
+                                                            setTableFilters(nextFilters);
+                                                            setIsFilterDropdownOpen(false);
+                                                            // Notify parent so it can re-fetch from the backend
+                                                            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
+                                                        }, children: "Apply" }), _jsxs(Button, { variant: "secondary", size: "sm", className: "flex-1 text-xs font-medium bg-secondary hover:bg-secondary/80 text-secondary-foreground", onClick: () => {
+                                                            setPendingFilterColumns([]);
+                                                            setActiveFilterColumns([]);
+                                                            setTableFilters({});
+                                                            setIsFilterDropdownOpen(false);
+                                                            // Notify parent so it can re-fetch all data without filters
+                                                            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({});
+                                                        }, children: [_jsx(RotateCcw, { className: "w-3.5 h-3.5 mr-2 inline" }), " Reset"] })] })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(Settings2, { className: "w-4 h-4" }), "Columns"] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48 p-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Toggle Columns" }), columns.map((col, idx) => {
+                                                const headerText = typeof col.header === "string" ? col.header : `Column ${idx + 1}`;
+                                                const isVisible = visibleColumns.includes(headerText);
+                                                return (_jsxs("button", { onClick: () => toggleColumn(headerText), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border border-primary ${isVisible ? 'bg-primary text-primary-foreground' : 'bg-transparent'}`, children: isVisible && _jsx(Check, { className: "h-3 w-3" }) }), headerText] }, idx));
+                                            })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", onClick: exportToCSV, children: _jsx(Download, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex items-center border border-border rounded-md bg-background overflow-hidden h-9", children: [_jsx("button", { onClick: () => setViewMode("list"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "List View", children: _jsx(List, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => setViewMode("grid"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "Grid View", children: _jsx(LayoutGrid, { className: "w-4 h-4" }) })] })] })] }), activeFilterColumns.length > 0 && (_jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0 overflow-x-auto", style: { scrollbarWidth: 'none', msOverflowStyle: 'none' }, children: activeFilterColumns.map(colHeader => {
+                    const selectedCount = (tableFilters[colHeader] || []).length;
+                    const searchQuery = columnSearchQueries[colHeader] || "";
+                    const uniqueValues = getUniqueValuesForColumn(colHeader);
+                    const filteredValues = uniqueValues.filter(v => v.toLowerCase().includes(searchQuery.toLowerCase()));
+                    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 h-9 bg-muted/50 border border-border rounded-full text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors flex-1 shrink min-w-[140px] max-w-fit [&::-webkit-scrollbar]:hidden", title: `${colHeader}: ${selectedCount} Selected`, children: [_jsxs("span", { className: "uppercase truncate shrink font-semibold", children: [colHeader, ":"] }), _jsxs("span", { className: "text-muted-foreground whitespace-nowrap shrink-0", children: [selectedCount, " Selected"] }), _jsx(ChevronDown, { className: "w-3.5 h-3.5 ml-1 opacity-50 shrink-0" }), _jsx("div", { className: "p-0.5 ml-1 rounded-full hover:bg-background/80 shrink-0", onClick: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                removeActiveFilterColumn(colHeader);
+                                            }, onPointerDown: (e) => {
+                                                e.stopPropagation();
+                                            }, children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56 p-2 space-y-2", children: [_jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: ["Filter ", colHeader] }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search items...", value: searchQuery, onChange: (e) => setColumnSearchQueries(prev => (Object.assign(Object.assign({}, prev), { [colHeader]: e.target.value }))), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsxs("div", { className: "space-y-1 max-h-[200px] overflow-y-auto pr-1", children: [filteredValues.map(val => {
+                                                const isSelected = (tableFilters[colHeader] || []).includes(val);
+                                                return (_jsxs("button", { onClick: () => handleToggleFilterValue(colHeader, val), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate text-left", children: val })] }, val));
+                                            }), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), (tableFilters[colHeader] || []).length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => {
+                                                const nextFilters = Object.assign({}, tableFilters);
+                                                delete nextFilters[colHeader];
+                                                setTableFilters(nextFilters);
+                                                onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
+                                            }, children: "Clear Selections" }) }))] })] }, colHeader));
+                }) })), _jsxs("div", { className: "w-full flex items-center gap-2 p-2 border border-dashed border-border rounded-lg bg-muted/20 min-h-[48px] transition-all hover:bg-muted/40 group shadow-sm", onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
+                    e.preventDefault();
+                    const columnHeader = e.dataTransfer.getData("columnHeader");
+                    if (columnHeader && !groupedColumns.includes(columnHeader)) {
+                        handleToggleGroup(columnHeader);
+                    }
+                }, children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs px-2 select-none border-r pr-4 mr-2 border-border/50", children: [_jsx(GripVertical, { className: "w-4 h-4 opacity-40" }), _jsx("span", { className: "font-semibold uppercase tracking-wider opacity-70", children: "Grouping" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: groupedColumns.length === 0 ? (_jsx("div", { className: "flex items-center gap-2 text-muted-foreground/60 text-sm italic py-1", children: _jsx("span", { children: "Drag column headers here to group your data..." }) })) : (groupedColumns.map(col => (_jsxs(Badge, { variant: "secondary", className: "gap-2 pl-3 pr-1.5 h-8 text-xs font-semibold bg-background border shadow-sm animate-in fade-in zoom-in duration-200", children: [col, _jsx("button", { onClick: () => handleToggleGroup(col), className: "hover:bg-muted rounded-full p-0.5 transition-colors", children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }, col)))) })] }), _jsxs("div", { className: "relative min-h-[300px] mt-2", children: [_jsx(Reload, { isLoading: isLoading !== null && isLoading !== void 0 ? isLoading : false, onReload: onReload || (() => window.location.reload()) }), _jsx("div", { className: `transition-all duration-300 ${isLoading ? 'opacity-50 pointer-events-none' : ''}`, children: viewMode === "list" ? (_jsx(DataTable, { data: data, columns: columns.filter(col => typeof col.header === "string" ? visibleColumns.includes(col.header) : true), keyExtractor: keyExtractor !== null && keyExtractor !== void 0 ? keyExtractor : (() => ""), onRowClick: onRowClick, groupedColumns: groupedColumns, onToggleGroup: handleToggleGroup })) : (_jsxs(_Fragment, { children: [gridComponent ? gridComponent(data) : (_jsx("div", { className: "p-12 text-center text-muted-foreground border border-border border-dashed rounded-md bg-muted/20", children: "Grid view not implemented for this component yet." })), viewMode === "grid" && hasMore && (_jsx("div", { ref: observerTarget, className: "flex justify-center p-6 w-full", children: _jsx("div", { className: "w-6 h-6 border-2 rounded-full animate-spin border-foreground border-t-transparent" }) }))] })) })] }), viewMode === "list" && (_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border mt-4", children: [_jsx(DataTablePageSize, {}), _jsx(DataTablePagination, { totalPages: totalPages !== null && totalPages !== void 0 ? totalPages : 0, currentPage: currentPage !== null && currentPage !== void 0 ? currentPage : 0 })] }))] }));
 }

package/dist/ikoncomponents/table/type.d.ts

@@ -1,6 +1,22 @@
+export interface ColumnDef<T> {
+    header: string | (() => React.ReactNode);
+    accessorKey?: keyof T;
+    cell?: (row: T) => React.ReactNode;
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    keyExtractor: (row: T) => string | number;
+    onRowClick?: (row: T) => void;
+    groupedColumns?: string[];
+    onToggleGroup?: (columnHeader: string) => void;
+}
 export interface DataTableLayoutProps<T> {
     data: T[];
     columns: ColumnDef<T>[];
+    extraTools?: ExtraPrams<T>;
+}
+export type ExtraPrams<T> = {
     keyExtractor: (row: T) => string | number;
     totalPages: number;
     currentPage: number;
@@ -10,15 +26,9 @@ export interface DataTableLayoutProps<T> {
     gridComponent?: (data: T[]) => React.ReactNode;
     isLoading?: boolean;
     onReload?: () => void;
-}
-export interface ColumnDef<T> {
-    header: string | (() => React.ReactNode);
-    accessorKey?: keyof T;
-    cell?: (row: T) => React.ReactNode;
-}
-export interface DataTableProps<T> {
-    data: T[];
-    columns: ColumnDef<T>[];
-    keyExtractor: (row: T) => string | number;
-    onRowClick?: (row: T) => void;
-}
+    themeColor?: string;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    onFilterChange?: (filters: Record<string, string[]>) => void;
+    unfilteredData?: T[];
+};

package/dist/ikoncomponents/table/type.js

@@ -1 +1,8 @@
+// export interface DataTableLayoutProps<T> {
+//   data: T[];
+//   columns: ColumnDef<T>[];
+//   keyExtractor: (row: T) => string | number;
+//   totalPages: number;
+//   currentPage: number;
+;
 export {};