ikoncomponents 1.7.7 → 1.8.1

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

@@ -7,9 +7,11 @@ export function DataTablePageSize() {
     const searchParams = useSearchParams();
     const currentSize = searchParams.get("size") || "10";
     const handleSizeChange = (e) => {
+        // Create a new URLSearchParams instance from the current ones
         const params = new URLSearchParams(searchParams.toString());
         params.set("size", e.target.value);
         params.set("page", "1");
+        // Next.js navigation
         router.push(`${pathname}?${params.toString()}`);
     };
     return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }), _jsxs("select", { className: "h-9 rounded-md border border-border bg-background text-foreground px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary", value: currentSize, onChange: handleSizeChange, children: [_jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "20", children: "20" }), _jsx("option", { value: "50", children: "50" }), _jsx("option", { value: "100", children: "100" })] })] }));

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

@@ -1,6 +1,6 @@
 interface PaginationProps {
-    totalPages: number;
+    totalPages: number | undefined;
     currentPage: number;
 }
-export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react").JSX.Element;
 export {};

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

@@ -6,9 +6,11 @@ export function DataTablePagination({ totalPages, currentPage }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const handlePageChange = (newPage) => {
+        // Create a new URLSearchParams instance from the current ones
         const params = new URLSearchParams(searchParams.toString());
         params.set("page", newPage.toString());
+        // Next.js navigation
         router.push(`${pathname}?${params.toString()}`);
     };
-    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages, 1) })] }), _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
+    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { type: "button", onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages !== null && totalPages !== void 0 ? totalPages : 1, 1) })] }), _jsx("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), disabled: totalPages === undefined ? undefined : currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
 }

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

@@ -1 +1 @@
-export declare function DataTableSearch(): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableSearch(): import("react").JSX.Element;

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

@@ -1,27 +1,39 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useDebounce } from "use-debounce";
 import { Search } from "lucide-react";
 export function DataTableSearch() {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
+    // 1. Initialize local state from the URL 'search' param
     const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
+    // 2. Debounce the local state (500ms delay)
     const [debouncedSearch] = useDebounce(searchTerm, 500);
+    // 3. Update the URL whenever the debounced value changes
     useEffect(() => {
         const params = new URLSearchParams(searchParams.toString());
         if (debouncedSearch) {
             params.set("search", debouncedSearch);
+            // Update the global filter in the parent component
         }
         else {
             params.delete("search");
         }
+        // Only navigate if the param actually changed (prevents redundant history entries)
         if (params.get("search") !== searchParams.get("search")) {
-            params.set("page", "1");
-            router.push(`${pathname}?${params.toString()}`);
+            params.set("page", "1"); // Reset to page 1 on new search
+            router.replace(`${pathname}?${params.toString()}`);
         }
     }, [debouncedSearch, pathname, router, searchParams]);
-    return (_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
+    // 4. Sync local state if the URL is changed externally (e.g., browser back button)
+    useEffect(() => {
+        const urlSearch = searchParams.get("search") || "";
+        if (urlSearch !== searchTerm) {
+            setSearchTerm(urlSearch);
+        }
+    }, [searchParams]);
+    return (_jsxs("div", { className: "relative  max-w-sm  min-w-[10%]", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
 }

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

@@ -1,2 +1,2 @@
-import { DataTableLayoutProps } from "./type";
-export declare function DataTableLayout<T>({ data, columns, extraTools, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;
+import type { DataTableLayoutProps } from "./type";
+export declare function DataTableLayout<T>({ data, columns, extraTools, }: DataTableLayoutProps<T>): import("react").JSX.Element;

package/dist/ikoncomponents/table/index.js

@@ -1,165 +1,5 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { DataTable } from "./DataTable";
-import { DataTableSearch } from "./DataTableSearch";
-import { DataTablePagination } from "./DataTablePagination";
-import { DataTablePageSize } from "./DataTablePageSize";
-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");
-    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 })] }))] }));
+    return (_jsx(DataTable, { data: data, columns: columns, extraTools: extraTools }));
 }

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

@@ -1,34 +1,93 @@
-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;
-}
+import type { ColumnDef, PaginationState } from "@tanstack/react-table";
+import type { ActionMenuProps } from "../action-menu/type";
 export interface DataTableLayoutProps<T> {
     data: T[];
-    columns: ColumnDef<T>[];
+    columns: ColumnsProps<T, unknown>[];
     extraTools?: ExtraPrams<T>;
 }
 export type ExtraPrams<T> = {
-    keyExtractor: (row: T) => string | number;
-    totalPages: number;
-    currentPage: number;
-    filterComponent?: React.ReactNode;
+    /** Total page count. When omitted, it's derived from `data.length / pageSize` (10/page default). */
+    totalPages?: number;
+    /**
+     * Server-side (pageable) pagination. When true, the table renders `data` as-is
+     * (already paged by your API) and emits `onPaginationChange` so the parent can
+     * fetch the next page. When false/undefined (default) the table receives the
+     * full `data` and paginates client-side — i.e. "call all data" mode.
+     */
+    manualPagination?: boolean;
+    /** Initial page index (0-based). Defaults to 0. */
+    pageIndex?: number;
+    /** Initial / current page size. Defaults to 10. */
+    pageSize?: number;
+    /** Fired whenever the page index or size changes — use it to fetch from your API. */
+    onPaginationChange?: (state: PaginationState) => void;
+    toggleViewMode?: boolean;
+    hiddenColumns?: string[];
     actionNode?: React.ReactNode;
-    onRowClick?: (row: T) => void;
+    actionMenu?: TableActionMenuProps;
+    groupActionMenu?: TableActionMenuProps;
     gridComponent?: (data: T[]) => React.ReactNode;
     isLoading?: boolean;
     onReload?: () => void;
-    themeColor?: string;
-    onLoadMore?: () => void;
-    hasMore?: boolean;
-    onFilterChange?: (filters: Record<string, string[]>) => void;
-    unfilteredData?: T[];
+    /** Enable default grouping. When true, the table is grouped by `groupedValue` on first render. */
+    grouping?: boolean;
+    /** Column id(s) to group by initially (used when `grouping` is true). */
+    groupedValue?: string[];
+    showFooter?: boolean;
+    footerLabel?: string;
+    /** Max height of the scrollable content (shared by list & grid view), e.g. "500px" or "60vh". */
+    tableHeight?: string;
+    /**
+     * Dynamic footer definition. Each entry is one footer row, so the footer can
+     * show multiple labels / summary rows. When provided (non-empty) it takes
+     * precedence over the column-level `footer` definitions used by `showFooter`.
+     */
+    footerRows?: FooterRowConfig<T>[];
+    fileName?: string;
+};
+/** Built-in single-column aggregations available to a footer cell. */
+export type FooterAggregate = "sum" | "avg" | "min" | "max" | "count";
+/** Arithmetic operations for combining several columns in a footer cell. */
+export type FooterOperation = "add" | "subtract" | "multiply" | "divide";
+/**
+ * Definition of a single footer cell. Use a plain string for a static label,
+ * or an object to aggregate one column / combine several columns arithmetically.
+ */
+export type FooterCellConfig<T> = string | {
+    /** Aggregate a single column's numeric values. */
+    aggregate?: FooterAggregate;
+    /** Column key to aggregate (defaults to the column this cell sits under). */
+    column?: string;
+    /** Combine the sums of multiple columns with an arithmetic operation. */
+    operation?: FooterOperation;
+    /** Column keys used by `operation`, combined left-to-right. */
+    columns?: string[];
+    /** Decimal places for numeric output (defaults to locale formatting). */
+    decimals?: number;
+    /** Text rendered before the value. */
+    prefix?: string;
+    /** Text rendered after the value. */
+    suffix?: string;
+    /** Full custom renderer; receives the filtered row data. Overrides the above. */
+    render?: (rows: T[]) => React.ReactNode;
+    /** Extra class names applied to the footer cell. */
+    className?: string;
+};
+/** Definition of one footer row, with cells keyed by column id / accessorKey. */
+export type FooterRowConfig<T> = {
+    /** Cell definitions keyed by column id / accessorKey. */
+    cells: Record<string, FooterCellConfig<T>>;
+    /** Extra class names applied to the footer row. */
+    className?: string;
+};
+export type ColumnsProps<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
+    header: string | (() => React.ReactNode);
+    footer?: (row: TData) => React.ReactNode;
+    filterFns?: string | "multiSelect";
+    draggable?: boolean | undefined;
+    headerClassName?: string;
+};
+export type TableActionMenuProps = {
+    items: ActionMenuProps[];
+    extraArguments?: any[];
 };

package/dist/ikoncomponents/table/type.js

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

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

@@ -1,2 +1,3 @@
 import { TabProps } from "./type";
-export declare function CustomTabs({ children, tabArray, pathName, tabListClass, tabListInnerClass, tabListButtonClass, tabContentClass, headerEndComponent, onTabChange, isSeperatePage, }: TabProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function CustomTabs({ children, tabArray, pathName, tabListClass, tabListInnerClass, tabListButtonClass, tabContentClass, headerEndComponent, onTabChange, isSeperatePage, }: TabProps): React.JSX.Element;

package/dist/ikoncomponents/theme-toggle-btn/index.d.ts

@@ -1 +1 @@
-export declare function ThemeToggleBtn(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ThemeToggleBtn(): import("react").JSX.Element | null;

package/dist/ikoncomponents/title-progress/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 interface Props {
     title: string;
     value: number;
@@ -8,5 +9,5 @@ interface Props {
     valueClassName?: string;
     progressClassName?: string;
 }
-export declare function TitleProgress({ title, value, valueText, isPercent, className, titleClassName, valueClassName, progressClassName }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function TitleProgress({ title, value, valueText, isPercent, className, titleClassName, valueClassName, progressClassName }: Props): React.JSX.Element;
 export {};

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

@@ -2,4 +2,4 @@ import * as React from "react";
 export declare function TooltipComponent({ tooltipContent, children }: {
     tooltipContent: string | React.ReactNode;
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/twolevel-dropdown/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export interface FrameworkEntry {
     id: string;
     index: string;
@@ -27,5 +28,5 @@ interface FrameworkItemDropdownProps {
     searchPlaceholder?: string;
     className?: string;
 }
-export declare function FrameworkItemDropdown({ processedData, value, onChange, placeholder, searchPlaceholder, className, }: FrameworkItemDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function FrameworkItemDropdown({ processedData, value, onChange, placeholder, searchPlaceholder, className, }: FrameworkItemDropdownProps): React.JSX.Element;
 export {};

package/dist/ikoncomponents/upload-tab/index.d.ts

@@ -1 +1 @@
-export declare function UploadTab(): import("react/jsx-runtime").JSX.Element;
+export declare function UploadTab(): import("react").JSX.Element;

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

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { WidgetsFunctionProps } from "./type";
-export declare function Widgets({ widgetData }: WidgetsFunctionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Widgets({ widgetData }: WidgetsFunctionProps): React.JSX.Element;

package/dist/ikoncomponents/work-in-progress/index.d.ts

@@ -1 +1,2 @@
-export declare function WorkInProgress(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function WorkInProgress(): React.JSX.Element;

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
 export { DataTable } from "./ikoncomponents/data-table";
 export type { DataTableProps, DTColumnsProps, DTExtraParamsProps, DTActionMenuProps, DataTableViewOptionsProps, DTToolBarProps, DataTableFilterProps, DataTableFacetedFilterProps, DataTablePaginationProps, DragDropHeaderProp, } from "./ikoncomponents/data-table/type";
 export { DataTableLayout } from "./ikoncomponents/table";
-export type { DataTableLayoutProps, ColumnDef } from "./ikoncomponents/table/type";
+export type { DataTableLayoutProps, ExtraPrams, ColumnsProps } from "./ikoncomponents/table/type";
 export { Reload } from "./ikoncomponents/reload-component";
 export { EChart } from "./ikoncomponents/e-chart";
 export { FileInput } from "./ikoncomponents/file-input";

package/dist/shadcn/accordion.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/shadcn/alert-dialog.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 declare const AlertDialog: {
-    (props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    (props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
     displayName: string;
 };
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogPortal: {
-    (props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+    (props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
     displayName: string;
 };
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/shadcn/alert.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
-declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 export { Alert, AlertTitle, AlertDescription };

package/dist/shadcn/aspect-ratio.d.ts

@@ -1,3 +1,3 @@
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react").JSX.Element;
 export { AspectRatio };

package/dist/shadcn/avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback };

package/dist/shadcn/badge.d.ts

@@ -5,5 +5,5 @@ declare const badgeVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { Badge, badgeVariants };

package/dist/shadcn/breadcrumb.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
-declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
 declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
     asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/shadcn/button.d.ts

@@ -6,5 +6,5 @@ declare const buttonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { Button, buttonVariants };

package/dist/shadcn/calendar.d.ts

@@ -3,6 +3,6 @@ import { DayButton, DayPicker } from "react-day-picker";
 import { Button } from "./button";
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}): import("react/jsx-runtime").JSX.Element;
-declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
 export { Calendar, CalendarDayButton };