@reactorui/datagrid 1.0.20 → 1.0.21

package/dist/components/DataGrid/DataGrid.d.ts

@@ -1,5 +1,5 @@
 import { DataGridProps } from '../../types';
 export declare const DataGrid: <T extends {
     [key: string]: any;
-} = any>({ data, endpoint, columns: columnsProp, enableSearch, enableSorting, enableFilters, enableSelection, enableDelete, deleteConfirmation, pageSize, serverPageSize, pageSizeOptions, httpConfig, variant, size, className, enableRefresh, onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, onTableRefresh, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, onBulkDelete, ...rest }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+} = any>({ data, columns: columnsProp, loading: simpleLoading, loadingState: externalLoadingState, totalRecords: externalTotalRecords, error: externalError, currentPage: externalCurrentPage, enableSearch, enableSorting, enableFilters, enableSelection, enableDelete, enableRefresh, deleteConfirmation, maxHeight, stickyHeader, pageSize, pageSizeOptions, variant, size, className, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, onTableRefresh, onBulkDelete, ...rest }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataGrid.d.ts.map

package/dist/components/DataGrid/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAU,MAAM,aAAa,CAAC;AAOpD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,mfAsC9D,aAAa,CAAC,CAAC,CAAC,4CAiUlB,CAAC"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAgClE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,8nBA+D9D,aAAa,CAAC,CAAC,CAAC,4CAyVlB,CAAC"}

package/dist/components/DataGrid/DataGrid.js

@@ -1,37 +1,85 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// File: src/components/DataGrid/DataGrid.tsx
 import React, { useMemo, useCallback } from 'react';
 import { useDataGrid } from '../../hooks';
 import { SearchInput } from '../Search';
 import { FilterControls } from '../Filter';
 import { TableHeader, TableBody } from '../Table';
 import { getTheme } from '../../themes';
-export const DataGrid = ({ data, endpoint, columns: columnsProp = [], enableSearch = true, enableSorting = true, enableFilters = true, enableSelection = true, enableDelete = false, deleteConfirmation = false, pageSize = 10, serverPageSize = 100, pageSizeOptions = [5, 10, 25, 50, 100], httpConfig, variant = 'default', size = 'md', className = '', enableRefresh = false, 
-// Event callbacks
-onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, onTableRefresh, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, onBulkDelete, ...rest }) => {
+import { inferDataType } from '../../utils';
+// ============================================================================
+// Spinner Component (reusable)
+// ============================================================================
+const Spinner = ({ className = 'w-4 h-4' }) => (_jsxs("svg", { className: `animate-spin ${className}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
+// ============================================================================
+// Main Component
+// ============================================================================
+export const DataGrid = ({ 
+// Data
+data, columns: columnsProp = [], 
+// Loading states
+loading: simpleLoading = false, loadingState: externalLoadingState, 
+// External state (controlled mode)
+totalRecords: externalTotalRecords, error: externalError, currentPage: externalCurrentPage, 
+// Features
+enableSearch = true, enableSorting = true, enableFilters = true, enableSelection = true, enableDelete = false, enableRefresh = false, deleteConfirmation = false, 
+// Layout
+maxHeight, stickyHeader = false, 
+// Pagination
+pageSize = 10, pageSizeOptions = [5, 10, 25, 50, 100], 
+// Styling
+variant = 'default', size = 'md', className = '', 
+// Pagination Events
+onPageChange, onPageSizeChange, 
+// Sort & Search Events
+onSortChange, onSearchChange, 
+// Filter Events
+onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, 
+// Row & Cell Events
+onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, 
+// Action Events
+onTableRefresh, onBulkDelete, ...rest }) => {
     const theme = getTheme(variant);
+    // ===== Normalize Loading State =====
+    // If simple `loading` is passed, convert to loadingState.data
+    // If loadingState is passed, use it directly
+    const loadingState = useMemo(() => {
+        if (externalLoadingState)
+            return externalLoadingState;
+        if (simpleLoading)
+            return { data: true };
+        return {};
+    }, [externalLoadingState, simpleLoading]);
+    // Destructure for convenience
+    const isDataLoading = loadingState.data ?? false;
+    const isFilterLoading = loadingState.filter ?? false;
+    const isSearchLoading = loadingState.search ?? false;
+    const isRefreshLoading = loadingState.refresh ?? false;
+    const isDeleteLoading = loadingState.delete ?? false;
+    // Any loading state disables controls
+    const isAnyLoading = isDataLoading || isFilterLoading || isSearchLoading || isRefreshLoading || isDeleteLoading;
     // Use the data grid hook
-    const { data: sourceData, processedData, paginatedData, loading, error, searchTerm, activeFilters, sortConfig, selectedRows, currentPage, currentPageSize, setSearchTerm, setSort, setCurrentPageSize, navigateNext, navigatePrevious, addFilter, removeFilter, clearFilters, selectRow, selectAll, paginationInfo, selectedData, refresh, getRowId, // Get the stable ID generator
-     } = useDataGrid({
+    const { processedData, paginatedData, searchTerm, activeFilters, sortConfig, selectedRows, currentPage, currentPageSize, setSearchTerm, setSort, setCurrentPage, setCurrentPageSize, navigateNext, navigatePrevious, addFilter, removeFilter, clearFilters, selectRow, selectAll, paginationInfo, selectedData, refresh, getRowId, } = useDataGrid({
         data,
-        endpoint,
-        httpConfig,
         pageSize,
-        serverPageSize,
-        onDataLoad,
-        onDataError,
-        onLoadingStateChange,
+        totalRecords: externalTotalRecords,
+        currentPage: externalCurrentPage,
+        loading: isDataLoading,
         onPageChange,
         onPageSizeChange,
         onSortChange,
-        onFilterChange,
         onSearchChange,
+        onApplyFilter,
+        onRemoveFilter,
+        onClearFilters,
+        onFilterChange,
     });
     // Auto-detect columns if not provided
     const columns = useMemo(() => {
         if (columnsProp.length > 0)
             return columnsProp;
-        if (sourceData.length > 0) {
-            const firstRow = sourceData[0];
+        if (data.length > 0) {
+            const firstRow = data[0];
             return Object.keys(firstRow).map((key) => ({
                 key,
                 label: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
@@ -41,32 +89,27 @@ onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, o
             }));
         }
         return [];
-    }, [columnsProp, sourceData]);
-    // Memoize the selection change handler
-    const handleSelectionChange = useCallback((newSelectedData) => {
-        onSelectionChange?.(newSelectedData);
-    }, [onSelectionChange]);
-    // Use a ref to track previous selectedData to avoid unnecessary calls
+    }, [columnsProp, data]);
+    // Selection change effect
     const previousSelectedData = React.useRef([]);
-    // Only call onSelectionChange when selectedData actually changes
     React.useLayoutEffect(() => {
         const hasChanged = selectedData.length !== previousSelectedData.current.length ||
             selectedData.some((item, index) => item !== previousSelectedData.current[index]);
         if (hasChanged && onSelectionChange) {
             previousSelectedData.current = selectedData;
-            handleSelectionChange(selectedData);
+            onSelectionChange(selectedData);
         }
-    }, [selectedData, handleSelectionChange]);
+    }, [selectedData, onSelectionChange]);
     // Handle row selection with callback
     const handleRowSelect = useCallback((rowId, selected) => {
         selectRow(rowId, selected);
         if (onRowSelect) {
-            const row = sourceData.find((r) => getRowId(r) === rowId);
+            const row = data.find((r) => getRowId(r) === rowId);
             if (row) {
                 onRowSelect(row, selected);
             }
         }
-    }, [selectRow, onRowSelect, sourceData, getRowId]);
+    }, [selectRow, onRowSelect, data, getRowId]);
     // Handle delete action
     const handleDelete = useCallback(() => {
         if (selectedRows.size === 0)
@@ -92,29 +135,19 @@ onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, o
         refresh();
         onTableRefresh?.();
     }, [refresh, onTableRefresh]);
-    if (error) {
-        return (_jsx("div", { className: `${theme.container} ${className}`, ...rest, children: _jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-red-600 dark:text-red-400 mb-2", children: "Error loading data" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: error }), _jsx("button", { onClick: handleRefresh, className: theme.button, children: "Try Again" })] }) }));
+    // Determine if fixed layout is enabled
+    const hasFixedLayout = maxHeight !== undefined || stickyHeader;
+    // Error state
+    if (externalError) {
+        return (_jsx("div", { className: `${theme.container} ${className}`, ...rest, children: _jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-red-600 dark:text-red-400 mb-2", children: "Error loading data" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: externalError }), _jsx("button", { onClick: handleRefresh, className: theme.button, children: "Try Again" })] }) }));
     }
-    return (_jsxs("div", { className: `${theme.container} ${className}`, ...rest, children: [enableFilters && (_jsx("div", { className: "p-4 pb-2", children: _jsx("div", { className: "flex justify-between items-start gap-4", children: _jsx("div", { className: "flex-1", children: _jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onAddFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) }) }) })), _jsx("div", { className: "px-4 pb-4", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), className: "px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "entries" })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [enableSearch && (_jsx("div", { className: "w-64", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: loading, className: theme.searchInput }) })), enableRefresh && (_jsx("button", { onClick: handleRefresh, disabled: loading, title: loading ? 'Loading...' : 'Refresh data', className: "px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-150 flex items-center justify-center", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })), enableDelete && enableSelection && (_jsxs("button", { onClick: handleDelete, disabled: selectedRows.size === 0, title: selectedRows.size === 0
+    return (_jsxs("div", { className: `${theme.container} ${className} ${hasFixedLayout ? 'flex flex-col' : ''}`, style: hasFixedLayout && maxHeight ? { height: maxHeight } : undefined, ...rest, children: [enableFilters && (_jsx("div", { className: "p-4 pb-2 flex-shrink-0", children: _jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onApplyFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters, disabled: isDataLoading, filterLoading: isFilterLoading }) })), _jsx("div", { className: "px-4 pb-4 flex-shrink-0", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), disabled: isAnyLoading, className: "px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "entries" })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [enableSearch && (_jsxs("div", { className: "w-64 relative", children: [_jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: isAnyLoading, className: theme.searchInput }), isSearchLoading && (_jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: _jsx(Spinner, { className: "w-4 h-4 text-gray-400" }) }))] })), enableRefresh && (_jsx("button", { onClick: handleRefresh, disabled: isAnyLoading, title: isRefreshLoading ? 'Refreshing...' : 'Refresh data', className: "px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors duration-150 flex items-center justify-center", children: _jsx("svg", { className: `w-4 h-4 ${isRefreshLoading ? 'animate-spin' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })), enableDelete && enableSelection && (_jsxs("button", { onClick: handleDelete, disabled: selectedRows.size === 0 || isAnyLoading, title: selectedRows.size === 0
                                         ? 'Select rows to delete'
-                                        : `Delete ${selectedRows.size} selected item${selectedRows.size === 1 ? '' : 's'}`, className: `px-3 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-150 flex items-center gap-1 ${selectedRows.size === 0
+                                        : isDeleteLoading
+                                            ? 'Deleting...'
+                                            : `Delete ${selectedRows.size} selected item${selectedRows.size === 1 ? '' : 's'}`, className: `px-3 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-150 flex items-center gap-1 ${selectedRows.size === 0 || isAnyLoading
                                         ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
-                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer'}`, children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }), selectedRows.size > 0 && (_jsxs("span", { className: "text-sm", children: ["(", selectedRows.size, " selected)"] }))] }))] })] }) }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: theme.table, children: [_jsx(TableHeader, { columns: columns, sortConfig: sortConfig, onSort: enableSorting ? setSort : undefined, enableSelection: enableSelection, selectedCount: selectedRows.size, totalCount: paginatedData.length, onSelectAll: enableSelection ? selectAll : undefined, theme: theme }), _jsx(TableBody, { columns: columns, data: paginatedData, selectedRows: selectedRows, onSelectRow: enableSelection ? handleRowSelect : undefined, onRowClick: onTableRowClick, onRowDoubleClick: onTableRowDoubleClick, onRowHover: onTableRowHover, onCellClick: onCellClick, enableSelection: enableSelection, loading: loading, theme: theme, getRowId: getRowId })] }) }), _jsxs("div", { className: theme.pagination, children: [_jsxs("div", { className: "text-sm text-gray-700 dark:text-gray-300 flex-shrink-0", children: ["Showing ", paginationInfo.start, "-", paginationInfo.end, " of", ' ', paginationInfo.totalRecords.toLocaleString(), " records"] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("button", { onClick: navigatePrevious, disabled: !paginationInfo.hasPrevious, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300 px-2", children: ["Page ", currentPage, " ", paginationInfo.totalPages > 0 && `of ${paginationInfo.totalPages}`] }), _jsx("button", { onClick: navigateNext, disabled: !paginationInfo.hasNext, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Next" })] })] })] }));
+                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer'}`, children: [isDeleteLoading ? (_jsx(Spinner, { className: "w-4 h-4" })) : (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })), selectedRows.size > 0 && (_jsx("span", { className: "text-sm", children: isDeleteLoading ? 'Deleting...' : `(${selectedRows.size} selected)` }))] }))] })] }) }), _jsx("div", { className: `
+          ${hasFixedLayout ? 'flex-1 overflow-auto min-h-0' : 'overflow-x-auto'}
+        `, children: _jsxs("table", { className: theme.table, children: [_jsx(TableHeader, { columns: columns, sortConfig: sortConfig, onSort: enableSorting ? setSort : undefined, enableSelection: enableSelection, selectedCount: selectedRows.size, totalCount: paginatedData.length, onSelectAll: enableSelection ? selectAll : undefined, theme: theme, sticky: hasFixedLayout }), _jsx(TableBody, { columns: columns, data: paginatedData, selectedRows: selectedRows, onSelectRow: enableSelection ? handleRowSelect : undefined, onRowClick: onTableRowClick, onRowDoubleClick: onTableRowDoubleClick, onRowHover: onTableRowHover, onCellClick: onCellClick, enableSelection: enableSelection, loading: isDataLoading, theme: theme, getRowId: getRowId })] }) }), _jsxs("div", { className: `${theme.pagination} flex-shrink-0`, children: [_jsxs("div", { className: "text-sm text-gray-700 dark:text-gray-300 flex-shrink-0", children: ["Showing ", paginationInfo.start, "-", paginationInfo.end, " of", ' ', paginationInfo.totalRecords.toLocaleString(), " records"] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("button", { onClick: navigatePrevious, disabled: !paginationInfo.hasPrevious || isAnyLoading, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Previous" }), _jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300 px-2", children: ["Page ", currentPage, " ", paginationInfo.totalPages > 0 && `of ${paginationInfo.totalPages}`] }), _jsx("button", { onClick: navigateNext, disabled: !paginationInfo.hasNext || isAnyLoading, className: "px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150", children: "Next" })] })] })] }));
 };
-// Helper function to infer data type
-function inferDataType(value) {
-    if (value == null)
-        return 'string';
-    if (typeof value === 'boolean')
-        return 'boolean';
-    if (typeof value === 'number')
-        return 'number';
-    if (typeof value === 'string') {
-        // Try to detect dates
-        const dateValue = new Date(value);
-        if (!isNaN(dateValue.getTime()) && dateValue.getFullYear() > 1900) {
-            return value.includes('T') || value.includes(' ') ? 'datetime' : 'date';
-        }
-    }
-    return 'string';
-}

package/dist/components/Filter/FilterControls.d.ts

@@ -2,10 +2,14 @@ import { Column, ActiveFilter } from '../../types';
 interface FilterControlsProps<T> {
     columns: Column<T>[];
     activeFilters: ActiveFilter[];
-    onAddFilter: (filter: Omit<ActiveFilter, 'label'>) => void;
+    onApplyFilter: (filter: Omit<ActiveFilter, 'label'>) => void;
     onRemoveFilter: (index: number) => void;
     onClearFilters: () => void;
+    /** Disables all controls (e.g., when data is loading) */
+    disabled?: boolean;
+    /** Shows spinner specifically on Apply Filter button */
+    filterLoading?: boolean;
 }
-export declare const FilterControls: <T>({ columns, activeFilters, onAddFilter, onRemoveFilter, onClearFilters, }: FilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterControls: <T>({ columns, activeFilters, onApplyFilter, onRemoveFilter, onClearFilters, disabled, filterLoading, }: FilterControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterControls.d.ts.map

package/dist/components/Filter/FilterControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterControls.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/FilterControls.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,UAAU,mBAAmB,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,WAAW,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,0EAMhC,mBAAmB,CAAC,CAAC,CAAC,4CAgMxB,CAAC"}
+{"version":3,"file":"FilterControls.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/FilterControls.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAkB,MAAM,aAAa,CAAC;AAMnE,UAAU,mBAAmB,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC7D,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA4FD,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,qGAQhC,mBAAmB,CAAC,CAAC,CAAC,4CAiMxB,CAAC"}

package/dist/components/Filter/FilterControls.js

@@ -1,81 +1,133 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-export const FilterControls = ({ columns, activeFilters, onAddFilter, onRemoveFilter, onClearFilters, }) => {
+// File: src/components/Filter/FilterControls.tsx
+import { useState, useCallback, useMemo } from 'react';
+// ============================================================================
+// Operator Configuration
+// ============================================================================
+const OPERATORS = {
+    string: [
+        { value: 'eq', label: 'equals' },
+        { value: 'neq', label: 'not equals' },
+        { value: 'contains', label: 'contains' },
+        { value: 'startsWith', label: 'starts with' },
+        { value: 'endsWith', label: 'ends with' },
+    ],
+    number: [
+        { value: 'eq', label: 'equals' },
+        { value: 'neq', label: 'not equals' },
+        { value: 'gt', label: 'greater than' },
+        { value: 'gte', label: 'greater or equal' },
+        { value: 'lt', label: 'less than' },
+        { value: 'lte', label: 'less or equal' },
+    ],
+    date: [
+        { value: 'eq', label: 'equals' },
+        { value: 'gt', label: 'after' },
+        { value: 'gte', label: 'on or after' },
+        { value: 'lt', label: 'before' },
+        { value: 'lte', label: 'on or before' },
+    ],
+    datetime: [
+        { value: 'eq', label: 'equals' },
+        { value: 'gt', label: 'after' },
+        { value: 'gte', label: 'on or after' },
+        { value: 'lt', label: 'before' },
+        { value: 'lte', label: 'on or before' },
+    ],
+    boolean: [{ value: 'eq', label: 'equals' }],
+};
+const DEFAULT_OPERATORS = [{ value: 'eq', label: 'equals' }];
+// ============================================================================
+// Spinner Component
+// ============================================================================
+const Spinner = ({ className = 'w-4 h-4' }) => (_jsxs("svg", { className: `animate-spin ${className}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
+// ============================================================================
+// Styles (centralized for DRY)
+// ============================================================================
+const styles = {
+    select: 'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:bg-gray-50 dark:disabled:bg-gray-700 disabled:text-gray-500 dark:disabled:text-gray-400 disabled:cursor-not-allowed',
+    input: 'px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:bg-gray-50 dark:disabled:bg-gray-700 disabled:cursor-not-allowed',
+    inputDisabled: 'px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed',
+    buttonPrimary: 'px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white text-sm rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:text-gray-500 dark:disabled:text-gray-400 disabled:cursor-not-allowed transition-colors duration-150 inline-flex items-center gap-2',
+    buttonSecondary: 'px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150',
+    filterTag: 'inline-flex items-center gap-1 px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-full text-sm',
+    filterTagRemove: 'ml-1 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 focus:outline-none transition-colors duration-150',
+    label: 'block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1',
+};
+// ============================================================================
+// Component
+// ============================================================================
+export const FilterControls = ({ columns, activeFilters, onApplyFilter, onRemoveFilter, onClearFilters, disabled = false, filterLoading = false, }) => {
+    // Form state
     const [filterColumn, setFilterColumn] = useState('');
     const [filterOperator, setFilterOperator] = useState('eq');
     const [filterValue, setFilterValue] = useState('');
-    const filterableColumns = columns.filter((col) => col.filterable !== false);
-    const selectedColumn = filterableColumns.find((col) => col.key === filterColumn);
-    const getOperatorOptions = () => {
-        if (!selectedColumn)
-            return [{ value: 'eq', label: 'equals' }];
-        switch (selectedColumn.dataType) {
-            case 'number':
-            case 'date':
-            case 'datetime':
-                return [
-                    { value: 'eq', label: 'equals' },
-                    { value: 'gt', label: 'greater than' },
-                    { value: 'gte', label: 'greater than or equal' },
-                    { value: 'lt', label: 'less than' },
-                    { value: 'lte', label: 'less than or equal' },
-                ];
-            case 'string':
-                return [
-                    { value: 'eq', label: 'equals' },
-                    { value: 'contains', label: 'contains' },
-                    { value: 'startsWith', label: 'starts with' },
-                    { value: 'endsWith', label: 'ends with' },
-                ];
-            case 'boolean':
-                return [{ value: 'eq', label: 'equals' }];
-            default:
-                return [{ value: 'eq', label: 'equals' }];
+    // Combined disabled state - disabled OR filterLoading
+    const isDisabled = disabled || filterLoading;
+    // Derived state
+    const filterableColumns = useMemo(() => columns.filter((col) => col.filterable !== false), [columns]);
+    const selectedColumn = useMemo(() => filterableColumns.find((col) => col.key === filterColumn), [filterableColumns, filterColumn]);
+    const operatorOptions = useMemo(() => OPERATORS[selectedColumn?.dataType ?? 'string'] ?? DEFAULT_OPERATORS, [selectedColumn]);
+    const canApply = filterColumn && filterValue.trim();
+    // Handlers
+    const handleColumnChange = useCallback((columnKey) => {
+        setFilterColumn(columnKey);
+        setFilterOperator('eq');
+        setFilterValue('');
+    }, []);
+    const handleApply = useCallback(() => {
+        if (!canApply || !selectedColumn || isDisabled)
+            return;
+        onApplyFilter({
+            column: filterColumn,
+            operator: filterOperator,
+            value: filterValue.trim(),
+            dataType: selectedColumn.dataType ?? 'string',
+        });
+    }, [
+        canApply,
+        filterColumn,
+        filterOperator,
+        filterValue,
+        selectedColumn,
+        onApplyFilter,
+        isDisabled,
+    ]);
+    const handleClear = useCallback(() => {
+        setFilterColumn('');
+        setFilterOperator('eq');
+        setFilterValue('');
+        onClearFilters();
+    }, [onClearFilters]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && canApply && !isDisabled) {
+            handleApply();
         }
-    };
-    const renderFilterInput = () => {
+    }, [canApply, handleApply, isDisabled]);
+    // Render value input based on data type
+    const renderValueInput = () => {
         if (!selectedColumn) {
-            return (_jsx("input", { type: "text", disabled: true, placeholder: "Select column first", className: "px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed" }));
+            return (_jsx("input", { type: "text", disabled: true, placeholder: "Select column first", className: styles.inputDisabled }));
         }
-        const baseProps = {
+        const commonProps = {
             value: filterValue,
             onChange: (e) => setFilterValue(e.target.value),
-            className: 'px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400',
+            onKeyDown: handleKeyDown,
+            disabled: isDisabled,
+            className: styles.input,
         };
         switch (selectedColumn.dataType) {
             case 'boolean':
-                return (_jsxs("select", { ...baseProps, children: [_jsx("option", { value: "", children: "Select value" }), _jsx("option", { value: "true", children: "True" }), _jsx("option", { value: "false", children: "False" })] }));
+                return (_jsxs("select", { ...commonProps, className: styles.select, children: [_jsx("option", { value: "", children: "Select value" }), _jsx("option", { value: "true", children: "True" }), _jsx("option", { value: "false", children: "False" })] }));
             case 'date':
-                return _jsx("input", { ...baseProps, type: "date" });
+                return _jsx("input", { ...commonProps, type: "date" });
             case 'datetime':
-                return _jsx("input", { ...baseProps, type: "datetime-local" });
+                return _jsx("input", { ...commonProps, type: "datetime-local" });
             case 'number':
-                return _jsx("input", { ...baseProps, type: "number", placeholder: "Enter number" });
+                return _jsx("input", { ...commonProps, type: "number", placeholder: "Enter number" });
             default:
-                return _jsx("input", { ...baseProps, type: "text", placeholder: "Enter value" });
+                return _jsx("input", { ...commonProps, type: "text", placeholder: "Enter value" });
         }
     };
-    const handleApplyFilter = () => {
-        if (!filterColumn || !filterValue.trim())
-            return;
-        onAddFilter({
-            column: filterColumn,
-            operator: filterOperator,
-            value: filterValue.trim(),
-            dataType: selectedColumn?.dataType || 'string',
-        });
-        // DON'T reset the form - keep the values so user can modify and reapply
-    };
-    const handleClearfilter = () => {
-        setFilterColumn('');
-        setFilterOperator('eq');
-        setFilterValue('');
-        onClearFilters();
-    };
-    const canApplyFilter = filterColumn && filterValue.trim();
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [_jsxs("div", { className: "min-w-40", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Column" }), _jsxs("select", { value: filterColumn, onChange: (e) => {
-                                    setFilterColumn(e.target.value);
-                                    setFilterOperator('eq');
-                                    setFilterValue('');
-                                }, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400", children: [_jsx("option", { value: "", children: "Select Column" }), filterableColumns.map((col) => (_jsx("option", { value: String(col.key), children: col.label }, String(col.key))))] })] }), _jsxs("div", { className: "min-w-32", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Operator" }), _jsx("select", { value: filterOperator, onChange: (e) => setFilterOperator(e.target.value), disabled: !filterColumn, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:bg-gray-50 dark:disabled:bg-gray-700 disabled:text-gray-500 dark:disabled:text-gray-400 disabled:cursor-not-allowed", children: getOperatorOptions().map((op) => (_jsx("option", { value: op.value, children: op.label }, op.value))) })] }), _jsxs("div", { className: "min-w-40", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Value" }), renderFilterInput()] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: handleApplyFilter, disabled: !canApplyFilter, className: "px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white text-sm rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:text-gray-500 dark:disabled:text-gray-400 disabled:cursor-not-allowed transition-colors duration-150", children: "Apply Filter" }), _jsx("button", { onClick: handleClearfilter, className: "px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-150", children: "Clear All" })] })] }), activeFilters.length > 0 && (_jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [_jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Active filters:" }), activeFilters.map((filter, index) => (_jsxs("span", { className: "inline-flex items-center gap-1 px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-full text-sm", children: [filter.label, _jsx("button", { onClick: () => onRemoveFilter(index), className: "ml-1 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 focus:outline-none transition-colors duration-150", children: "\u00D7" })] }, index)))] }))] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [_jsxs("div", { className: "min-w-40", children: [_jsx("label", { className: styles.label, children: "Column" }), _jsxs("select", { value: filterColumn, onChange: (e) => handleColumnChange(e.target.value), disabled: isDisabled, className: styles.select, children: [_jsx("option", { value: "", children: "Select Column" }), filterableColumns.map((col) => (_jsx("option", { value: String(col.key), children: col.label }, String(col.key))))] })] }), _jsxs("div", { className: "min-w-32", children: [_jsx("label", { className: styles.label, children: "Operator" }), _jsx("select", { value: filterOperator, onChange: (e) => setFilterOperator(e.target.value), disabled: isDisabled || !filterColumn, className: styles.select, children: operatorOptions.map((op) => (_jsx("option", { value: op.value, children: op.label }, op.value))) })] }), _jsxs("div", { className: "min-w-40", children: [_jsx("label", { className: styles.label, children: "Value" }), renderValueInput()] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { onClick: handleApply, disabled: isDisabled || !canApply, className: styles.buttonPrimary, children: [filterLoading && _jsx(Spinner, { className: "w-4 h-4" }), filterLoading ? 'Applying...' : 'Apply Filter'] }), _jsx("button", { onClick: handleClear, disabled: isDisabled, className: styles.buttonSecondary, children: "Clear All" })] })] }), activeFilters.length > 0 && (_jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [_jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Active filters:" }), activeFilters.map((filter, index) => (_jsxs("span", { className: styles.filterTag, children: [filter.label, _jsx("button", { onClick: () => onRemoveFilter(index), disabled: isDisabled, className: styles.filterTagRemove, "aria-label": `Remove filter: ${filter.label}`, children: "\u00D7" })] }, `${filter.column}-${index}`)))] }))] }));
 };

package/dist/components/Table/TableHeader.d.ts

@@ -9,7 +9,8 @@ interface TableHeaderProps<T> {
     totalCount: number;
     onSelectAll?: (selected: boolean) => void;
     theme: Theme;
+    sticky?: boolean;
 }
-export declare const TableHeader: <T>({ columns, sortConfig, onSort, enableSelection, selectedCount, totalCount, onSelectAll, theme, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T>({ columns, sortConfig, onSort, enableSelection, selectedCount, totalCount, onSelectAll, theme, sticky, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TableHeader.d.ts.map

package/dist/components/Table/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,UAAU,gBAAgB,CAAC,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,kGAS7B,gBAAgB,CAAC,CAAC,CAAC,4CAsGrB,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,UAAU,gBAAgB,CAAC,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,0GAU7B,gBAAgB,CAAC,CAAC,CAAC,4CAyGrB,CAAC"}

package/dist/components/Table/TableHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TableHeader = ({ columns, sortConfig, onSort, enableSelection, selectedCount, totalCount, onSelectAll, theme, }) => {
+export const TableHeader = ({ columns, sortConfig, onSort, enableSelection, selectedCount, totalCount, onSelectAll, theme, sticky = false, }) => {
     const getSortIcon = (columnKey) => {
         if (sortConfig.column !== columnKey) {
             return (_jsx("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) }));
@@ -9,7 +9,9 @@ export const TableHeader = ({ columns, sortConfig, onSort, enableSelection, sele
         }
         return (_jsx("svg", { className: "w-4 h-4 text-blue-500 dark:text-blue-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }));
     };
-    return (_jsx("thead", { className: theme.header, children: _jsxs("tr", { children: [enableSelection && (_jsx("th", { className: `w-12 ${theme.headerCell}`, role: "columnheader", "aria-label": "Select all rows", children: _jsx("input", { type: "checkbox", checked: selectedCount > 0 && selectedCount === totalCount, ref: (el) => {
+    // Sticky styles
+    const stickyClass = sticky ? 'sticky top-0 z-10' : '';
+    return (_jsx("thead", { className: `${theme.header} ${stickyClass}`, children: _jsxs("tr", { children: [enableSelection && (_jsx("th", { className: `w-12 ${theme.headerCell}`, role: "columnheader", "aria-label": "Select all rows", children: _jsx("input", { type: "checkbox", checked: selectedCount > 0 && selectedCount === totalCount, ref: (el) => {
                             if (el) {
                                 el.indeterminate = selectedCount > 0 && selectedCount < totalCount;
                             }

package/dist/hooks/useDataGrid.d.ts

@@ -1,38 +1,34 @@
-import { BaseRowData, ServerResponse, ActiveFilter, SortConfig, HttpConfig, PaginationInfo } from '../types';
+import { BaseRowData, ActiveFilter, SortConfig, PaginationInfo } from '../types';
 interface UseDataGridProps<T> {
-    data?: T[];
-    endpoint?: string;
-    httpConfig?: HttpConfig;
+    data: T[];
     pageSize?: number;
-    serverPageSize?: number;
-    onDataLoad?: (data: ServerResponse<T>) => void;
-    onDataError?: (error: Error, context: string) => void;
-    onLoadingStateChange?: (loading: boolean, context: string) => void;
-    onPageChange?: (page: number, paginationInfo: PaginationInfo) => void;
-    onPageSizeChange?: (pageSize: number, paginationInfo: PaginationInfo) => void;
-    onSortChange?: (sortConfig: SortConfig) => void;
+    totalRecords?: number;
+    currentPage?: number;
+    loading?: boolean;
+    onPageChange?: (page: number, info: PaginationInfo) => void;
+    onPageSizeChange?: (size: number) => void;
+    onSortChange?: (config: SortConfig) => void;
+    onSearchChange?: (term: string) => void;
+    onApplyFilter?: (filter: ActiveFilter, all: ActiveFilter[]) => void;
+    onRemoveFilter?: (removed: ActiveFilter, remaining: ActiveFilter[]) => void;
+    onClearFilters?: () => void;
     onFilterChange?: (filters: ActiveFilter[]) => void;
-    onSearchChange?: (searchTerm: string) => void;
 }
-export declare const useDataGrid: <T extends BaseRowData>({ data: staticData, endpoint, httpConfig, pageSize, serverPageSize, onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, }: UseDataGridProps<T>) => {
+export declare const useDataGrid: <T extends BaseRowData>({ data, pageSize: initialPageSize, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }: UseDataGridProps<T>) => {
     data: T[];
     processedData: T[];
     paginatedData: T[];
     loading: boolean;
-    error: string | null;
     searchTerm: string;
     activeFilters: ActiveFilter[];
     sortConfig: SortConfig;
     selectedRows: Set<string>;
     currentPage: number;
     currentPageSize: number;
-    totalRecords: number;
-    hasMore: boolean;
-    continuationToken: string | undefined;
     setSearchTerm: (term: string) => void;
     setSort: (column: string) => void;
     setCurrentPage: (page: number) => void;
-    setCurrentPageSize: (newPageSize: number) => void;
+    setCurrentPageSize: (size: number) => void;
     navigateNext: () => void;
     navigatePrevious: () => void;
     addFilter: (filter: Omit<ActiveFilter, "label">) => void;
@@ -40,11 +36,13 @@ export declare const useDataGrid: <T extends BaseRowData>({ data: staticData, en
     clearFilters: () => void;
     selectRow: (rowId: string, selected: boolean) => void;
     selectAll: (selected: boolean) => void;
+    clearSelection: () => void;
     refresh: () => void;
     paginationInfo: PaginationInfo;
     selectedData: T[];
     hasSelection: boolean;
     getRowId: (row: T) => string;
+    isControlled: boolean;
 };
 export {};
 //# sourceMappingURL=useDataGrid.d.ts.map

package/dist/hooks/useDataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EAEX,cAAc,EACd,YAAY,EACZ,UAAU,EACV,UAAU,EACV,cAAc,EACf,MAAM,UAAU,CAAC;AAGlB,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9E,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,oMAchD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;0BAoUX,MAAM;sBArFJ,MAAM;2BAkBR,MAAM;sCA2CC,MAAM;;;wBAuCX,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAqB5B,MAAM;;uBA2BsB,MAAM,YAAY,OAAO;0BAalD,OAAO;;;;;oBA1WZ,CAAC,KAAG,MAAM;CAwanB,CAAC"}
+{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAOjF,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACpD;AAMD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,mQAchD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;0BAsGX,MAAM;sBASJ,MAAM;2BAaR,MAAM;+BAQN,MAAM;;;wBAsBJ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAkB5B,MAAM;;uBAwBsB,MAAM,YAAY,OAAO;0BASlD,OAAO;;;;;;oBA/KZ,CAAC,KAAG,MAAM;;CA+OnB,CAAC"}