@reactorui/datagrid 1.0.19 → 1.0.21

package/dist/hooks/useDataGrid.js

@@ -1,354 +1,194 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { createApiRequest, compareValues, sortData } from '../utils';
-export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize = 10, serverPageSize = 100, onDataLoad, onDataError, onLoadingStateChange, onPageChange, onPageSizeChange, onSortChange, onFilterChange, onSearchChange, }) => {
-    // Core state
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [serverData, setServerData] = useState([]);
-    const [lastServerResponse, setLastServerResponse] = useState(null);
-    // UI state
-    const [searchTerm, setSearchTerm] = useState('');
+// File: src/hooks/useDataGrid.ts
+import { useState, useCallback, useMemo } from 'react';
+import { compareValues, sortData } from '../utils';
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+export const useDataGrid = ({ data, pageSize: initialPageSize = 10, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading = false, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }) => {
+    // ===== Internal State =====
+    const [searchTerm, setSearchTermState] = useState('');
     const [activeFilters, setActiveFilters] = useState([]);
     const [sortConfig, setSortConfig] = useState({ column: '', direction: 'asc' });
     const [selectedRows, setSelectedRows] = useState(new Set());
-    // Pagination state
-    const [currentPage, setCurrentPage] = useState(1);
-    const [currentPageSize, setCurrentPageSize] = useState(pageSize);
-    const [continuationToken, setContinuationToken] = useState();
-    const [tokenHistory, setTokenHistory] = useState([]);
-    // Determine data source
-    const sourceData = staticData || serverData;
-    // Generate stable unique IDs for rows - always generate, never use existing fields
+    const [internalPage, setInternalPage] = useState(1);
+    const [currentPageSize, setCurrentPageSizeState] = useState(initialPageSize);
+    // Determine if we're in controlled mode (server-side) or uncontrolled (client-side)
+    const isControlled = externalTotalRecords !== undefined;
+    const currentPage = externalCurrentPage ?? internalPage;
+    // ===== Row ID Generation =====
     const rowIdMap = useMemo(() => {
         const map = new Map();
-        sourceData.forEach((row, index) => {
-            // Always generate a stable ID based on index and content hash
-            const contentHash = JSON.stringify(row)
-                .slice(0, 50)
-                .replace(/[^a-zA-Z0-9]/g, '');
-            const stableId = `row-${index}-${contentHash}`;
-            map.set(row, stableId);
+        data.forEach((row, index) => {
+            // Use existing id if available, otherwise generate stable ID
+            const id = row.id !== undefined
+                ? String(row.id)
+                : `row-${index}-${JSON.stringify(row)
+                    .slice(0, 30)
+                    .replace(/[^a-zA-Z0-9]/g, '')}`;
+            map.set(row, id);
         });
         return map;
-    }, [sourceData]);
-    // Helper function to get row ID - always uses generated IDs
+    }, [data]);
     const getRowId = useCallback((row) => {
         return rowIdMap.get(row) || `fallback-${Math.random().toString(36).substr(2, 9)}`;
     }, [rowIdMap]);
-    // Internal loading state handler
-    const handleLoadingChange = useCallback((newLoading, context) => {
-        setLoading(newLoading);
-        onLoadingStateChange?.(newLoading, context);
-    }, [onLoadingStateChange]);
-    // Internal error handler
-    const handleError = useCallback((err, context) => {
-        const errorMessage = err.message || 'An unknown error occurred';
-        setError(errorMessage);
-        onDataError?.(err, context);
-    }, [onDataError]);
-    // Process data (search, filter, sort) - sorting is ALWAYS client-side
+    // ===== Data Processing (Client-side only) =====
     const processedData = useMemo(() => {
-        let processed = [...sourceData];
-        // Apply search (client-side for static data)
-        if (searchTerm && staticData) {
-            processed = processed.filter((row) => Object.values(row).some((value) => value?.toString().toLowerCase().includes(searchTerm.toLowerCase())));
-        }
-        // Apply filters (client-side for static data)
-        if (staticData) {
-            activeFilters.forEach((filter) => {
-                processed = processed.filter((row) => {
-                    const value = row[filter.column];
-                    return compareValues(value, filter.value, filter.operator, filter.dataType);
-                });
+        if (isControlled) {
+            // In controlled mode, parent handles filtering - just sort
+            return sortConfig.column ? sortData(data, sortConfig.column, sortConfig.direction) : data;
+        }
+        let result = [...data];
+        // Search
+        if (searchTerm) {
+            const term = searchTerm.toLowerCase();
+            result = result.filter((row) => Object.values(row).some((value) => value?.toString().toLowerCase().includes(term)));
+        }
+        // Filters
+        activeFilters.forEach((filter) => {
+            result = result.filter((row) => {
+                const value = row[filter.column];
+                return compareValues(value, filter.value, filter.operator, filter.dataType);
             });
-        }
-        // Apply sorting (ALWAYS client-side)
+        });
+        // Sort
         if (sortConfig.column) {
-            processed = sortData(processed, sortConfig.column, sortConfig.direction);
+            result = sortData(result, sortConfig.column, sortConfig.direction);
         }
-        return processed;
-    }, [sourceData, searchTerm, activeFilters, sortConfig, staticData]);
-    // Paginate data - only for client-side data
+        return result;
+    }, [data, searchTerm, activeFilters, sortConfig, isControlled]);
+    // ===== Pagination =====
     const paginatedData = useMemo(() => {
-        if (!staticData)
-            return sourceData; // For server-side, return as-is
+        if (isControlled)
+            return data; // Parent handles pagination
         const start = (currentPage - 1) * currentPageSize;
-        const end = start + currentPageSize;
-        return processedData.slice(start, end);
-    }, [processedData, currentPage, currentPageSize, staticData, sourceData]);
-    // Memoize selectedData with proper dependencies and stable ID handling
-    const selectedData = useMemo(() => {
-        return sourceData.filter((row) => {
-            const rowId = getRowId(row);
-            return selectedRows.has(rowId);
-        });
-    }, [sourceData, selectedRows, getRowId]);
-    // Pagination info
+        return processedData.slice(start, start + currentPageSize);
+    }, [processedData, currentPage, currentPageSize, isControlled, data]);
     const paginationInfo = useMemo(() => {
-        if (!staticData && lastServerResponse) {
-            // Server-side pagination info
-            const displayedCount = sourceData.length;
-            const start = displayedCount === 0 ? 0 : 1;
-            const end = displayedCount;
-            return {
-                currentPage,
-                totalPages: 1, // Not meaningful with continuation tokens
-                pageSize: currentPageSize,
-                totalRecords: lastServerResponse.Count,
-                start,
-                end,
-                hasNext: lastServerResponse.HasMore,
-                hasPrevious: tokenHistory.length > 0,
-                continuationToken: lastServerResponse.ContinuationToken,
-            };
-        }
-        // Client-side pagination info
-        const totalPages = Math.ceil(processedData.length / currentPageSize);
-        const start = processedData.length === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
-        const end = Math.min(currentPage * currentPageSize, processedData.length);
+        const total = isControlled ? (externalTotalRecords ?? 0) : processedData.length;
+        const totalPages = Math.ceil(total / currentPageSize);
+        const start = total === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
+        const end = Math.min(currentPage * currentPageSize, total);
         return {
             currentPage,
             totalPages,
             pageSize: currentPageSize,
-            totalRecords: processedData.length,
+            totalRecords: total,
             start,
             end,
             hasNext: currentPage < totalPages,
             hasPrevious: currentPage > 1,
         };
-    }, [
-        processedData.length,
-        currentPage,
-        currentPageSize,
-        staticData,
-        sourceData,
-        lastServerResponse,
-        tokenHistory.length,
-    ]);
-    // Load server data
-    const loadServerData = useCallback(async (resetPagination = false, navigationDirection) => {
-        if (!endpoint || staticData)
-            return;
-        handleLoadingChange(true, 'data-load');
-        setError(null);
-        try {
-            let requestToken = continuationToken;
-            // Handle navigation
-            if (resetPagination) {
-                requestToken = undefined;
-                setContinuationToken(undefined);
-                setTokenHistory([]);
-                setCurrentPage(1);
-            }
-            else if (navigationDirection === 'previous' && tokenHistory.length > 0) {
-                // Go back to previous token
-                const newHistory = [...tokenHistory];
-                requestToken = newHistory.pop();
-                setTokenHistory(newHistory);
-                setContinuationToken(requestToken);
-            }
-            const request = {
-                page: currentPage,
-                pageSize: serverPageSize,
-                search: searchTerm,
-                filters: activeFilters,
-                continuationToken: requestToken,
-            };
-            const response = await createApiRequest(endpoint, request, httpConfig);
-            // Handle response
-            setServerData(response.Items);
-            setLastServerResponse(response);
-            // Update token for next navigation
-            if (navigationDirection === 'next' && continuationToken) {
-                // Save current token to history
-                setTokenHistory((prev) => [...prev, continuationToken]);
-            }
-            if (response.ContinuationToken) {
-                setContinuationToken(response.ContinuationToken);
-            }
-            onDataLoad?.(response);
-        }
-        catch (err) {
-            handleError(err instanceof Error ? err : new Error('Failed to load data'), 'data-load');
-        }
-        finally {
-            handleLoadingChange(false, 'data-load');
-        }
-    }, [
-        endpoint,
-        staticData,
-        currentPage,
-        serverPageSize,
-        searchTerm,
-        sortConfig,
-        activeFilters,
-        continuationToken,
-        tokenHistory,
-        httpConfig,
-        onDataLoad,
-        handleLoadingChange,
-        handleError,
-    ]);
-    // Load data on mount and when dependencies change (no sorting here - that's client-side)
-    useEffect(() => {
-        if (!staticData) {
-            loadServerData(true); // Reset pagination on mount
-        }
-    }, [staticData, searchTerm, activeFilters]); // Note: sortConfig removed - sorting is client-side only
-    // Actions
+    }, [processedData.length, currentPage, currentPageSize, isControlled, externalTotalRecords]);
+    // ===== Selection =====
+    const selectedData = useMemo(() => {
+        return data.filter((row) => selectedRows.has(getRowId(row)));
+    }, [data, selectedRows, getRowId]);
+    // ===== Actions =====
+    const setSearchTerm = useCallback((term) => {
+        setSearchTermState(term);
+        if (!isControlled)
+            setInternalPage(1);
+        onSearchChange?.(term);
+    }, [isControlled, onSearchChange]);
     const setSort = useCallback((column) => {
-        const newSortConfig = {
+        const newConfig = {
             column,
             direction: sortConfig.column === column && sortConfig.direction === 'asc' ? 'desc' : 'asc',
         };
-        setSortConfig(newSortConfig);
-        onSortChange?.(newSortConfig);
-        // No server reload needed - sorting is client-side only
-        if (staticData) {
-            setCurrentPage(1);
-        }
-    }, [sortConfig, onSortChange, staticData]);
-    const setPage = useCallback((page) => {
-        if (staticData) {
-            // Client-side pagination
-            setCurrentPage(page);
-            onPageChange?.(page, {
-                ...paginationInfo,
-                currentPage: page,
-            });
-        }
-        else {
-            // Server-side with continuation tokens doesn't support arbitrary page jumps
-            console.warn('Direct page navigation not supported with continuation tokens. Use navigateNext/navigatePrevious instead.');
-        }
-    }, [staticData, paginationInfo, onPageChange]);
+        setSortConfig(newConfig);
+        if (!isControlled)
+            setInternalPage(1);
+        onSortChange?.(newConfig);
+    }, [sortConfig, isControlled, onSortChange]);
+    const setCurrentPage = useCallback((page) => {
+        if (!isControlled)
+            setInternalPage(page);
+        onPageChange?.(page, { ...paginationInfo, currentPage: page });
+    }, [isControlled, paginationInfo, onPageChange]);
+    const setCurrentPageSize = useCallback((size) => {
+        setCurrentPageSizeState(size);
+        if (!isControlled)
+            setInternalPage(1);
+        onPageSizeChange?.(size);
+    }, [isControlled, onPageSizeChange]);
     const navigateNext = useCallback(() => {
-        if (!paginationInfo.hasNext)
-            return;
-        if (!staticData) {
-            // Server-side navigation
-            loadServerData(false, 'next');
-        }
-        else {
-            // Client-side navigation
-            setPage(currentPage + 1);
+        if (paginationInfo.hasNext) {
+            setCurrentPage(currentPage + 1);
         }
-    }, [paginationInfo.hasNext, staticData, loadServerData, setPage, currentPage]);
+    }, [paginationInfo.hasNext, currentPage, setCurrentPage]);
     const navigatePrevious = useCallback(() => {
-        if (!paginationInfo.hasPrevious)
-            return;
-        if (!staticData) {
-            // Server-side navigation
-            loadServerData(false, 'previous');
-        }
-        else {
-            // Client-side navigation
-            setPage(currentPage - 1);
-        }
-    }, [paginationInfo.hasPrevious, staticData, loadServerData, setPage, currentPage]);
-    const setPageSize = useCallback((newPageSize) => {
-        setCurrentPageSize(newPageSize);
-        setCurrentPage(1);
-        const newPaginationInfo = {
-            ...paginationInfo,
-            pageSize: newPageSize,
-            currentPage: 1,
-            totalPages: staticData ? Math.ceil(processedData.length / newPageSize) : 1,
-        };
-        onPageSizeChange?.(newPageSize, newPaginationInfo);
-        // Reset pagination for server-side
-        if (!staticData) {
-            setContinuationToken(undefined);
-            setTokenHistory([]);
-            loadServerData(true);
-        }
-    }, [paginationInfo, staticData, processedData.length, onPageSizeChange, loadServerData]);
-    const updateSearchTerm = useCallback((term) => {
-        setSearchTerm(term);
-        onSearchChange?.(term);
-        // Reset pagination when search changes
-        setCurrentPage(1);
-        if (!staticData) {
-            setContinuationToken(undefined);
-            setTokenHistory([]);
+        if (paginationInfo.hasPrevious) {
+            setCurrentPage(currentPage - 1);
         }
-    }, [onSearchChange, staticData]);
+    }, [paginationInfo.hasPrevious, currentPage, setCurrentPage]);
+    // ===== Filter Actions (Enhanced) =====
     const addFilter = useCallback((filter) => {
         const label = `${filter.column} ${filter.operator} "${filter.value}"`;
-        const newFilters = [
-            ...activeFilters.filter((f) => f.column !== filter.column),
-            { ...filter, label },
-        ];
+        const fullFilter = { ...filter, label };
+        // Replace existing filter on same column or add new
+        const newFilters = [...activeFilters.filter((f) => f.column !== filter.column), fullFilter];
         setActiveFilters(newFilters);
+        if (!isControlled)
+            setInternalPage(1);
+        // Fire callbacks
+        onApplyFilter?.(fullFilter, newFilters);
         onFilterChange?.(newFilters);
-        // Reset pagination when filters change
-        setCurrentPage(1);
-        if (!staticData) {
-            setContinuationToken(undefined);
-            setTokenHistory([]);
-        }
-    }, [activeFilters, onFilterChange, staticData]);
+    }, [activeFilters, isControlled, onApplyFilter, onFilterChange]);
     const removeFilter = useCallback((index) => {
+        const removed = activeFilters[index];
         const newFilters = activeFilters.filter((_, i) => i !== index);
         setActiveFilters(newFilters);
+        if (!isControlled)
+            setInternalPage(1);
+        // Fire callbacks
+        if (removed)
+            onRemoveFilter?.(removed, newFilters);
         onFilterChange?.(newFilters);
-        // Reset pagination when filters change
-        setCurrentPage(1);
-        if (!staticData) {
-            setContinuationToken(undefined);
-            setTokenHistory([]);
-        }
-    }, [activeFilters, onFilterChange, staticData]);
+    }, [activeFilters, isControlled, onRemoveFilter, onFilterChange]);
     const clearFilters = useCallback(() => {
         setActiveFilters([]);
+        if (!isControlled)
+            setInternalPage(1);
+        // Fire callbacks
+        onClearFilters?.();
         onFilterChange?.([]);
-        // Reset pagination when filters change
-        setCurrentPage(1);
-        if (!staticData) {
-            setContinuationToken(undefined);
-            setTokenHistory([]);
-        }
-    }, [onFilterChange, staticData]);
+    }, [isControlled, onClearFilters, onFilterChange]);
+    // ===== Selection Actions =====
     const selectRow = useCallback((rowId, selected) => {
         setSelectedRows((prev) => {
-            const newSet = new Set(prev);
-            if (selected) {
-                newSet.add(rowId);
-            }
-            else {
-                newSet.delete(rowId);
-            }
-            return newSet;
+            const next = new Set(prev);
+            selected ? next.add(rowId) : next.delete(rowId);
+            return next;
         });
     }, []);
     const selectAll = useCallback((selected) => {
         if (selected) {
-            const currentPageData = staticData ? paginatedData : sourceData;
-            const allIds = currentPageData.map(getRowId);
-            setSelectedRows(new Set(allIds));
+            const ids = paginatedData.map(getRowId);
+            setSelectedRows(new Set(ids));
         }
         else {
             setSelectedRows(new Set());
         }
-    }, [staticData, paginatedData, sourceData, getRowId]);
+    }, [paginatedData, getRowId]);
+    const clearSelection = useCallback(() => {
+        setSelectedRows(new Set());
+    }, []);
+    // ===== Refresh (just resets internal state) =====
     const refresh = useCallback(() => {
-        if (staticData) {
-            setSearchTerm('');
-            setActiveFilters([]);
-            setSortConfig({ column: '', direction: 'asc' });
-            setCurrentPage(1);
-        }
-        else {
-            loadServerData(true);
-        }
-    }, [staticData, loadServerData]);
+        setSearchTermState('');
+        setActiveFilters([]);
+        setSortConfig({ column: '', direction: 'asc' });
+        setInternalPage(1);
+        setSelectedRows(new Set());
+    }, []);
+    // ===== Return Value =====
     return {
         // Data
-        data: sourceData,
+        data,
         processedData,
-        paginatedData: staticData ? paginatedData : sourceData,
-        loading,
-        error,
+        paginatedData,
+        loading: externalLoading,
         // State
         searchTerm,
         activeFilters,
@@ -356,14 +196,11 @@ export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize =
         selectedRows,
         currentPage,
         currentPageSize,
-        totalRecords: paginationInfo.totalRecords,
-        hasMore: paginationInfo.hasNext,
-        continuationToken: paginationInfo.continuationToken,
         // Actions
-        setSearchTerm: updateSearchTerm,
+        setSearchTerm,
         setSort,
-        setCurrentPage: setPage,
-        setCurrentPageSize: setPageSize,
+        setCurrentPage,
+        setCurrentPageSize,
         navigateNext,
         navigatePrevious,
         addFilter,
@@ -371,11 +208,14 @@ export const useDataGrid = ({ data: staticData, endpoint, httpConfig, pageSize =
         clearFilters,
         selectRow,
         selectAll,
+        clearSelection,
         refresh,
         // Computed
         paginationInfo,
         selectedData,
         hasSelection: selectedRows.size > 0,
-        getRowId, // Export the helper function
+        getRowId,
+        // Mode
+        isControlled,
     };
 };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { DataGrid } from './components/DataGrid';
 export { useDataGrid } from './hooks';
-export type { BaseRowData, Column, DataGridProps, ActiveFilter, SortConfig, PaginationInfo, ServerRequest, ServerResponse, HttpConfig, OnDataLoadCallback, OnDataErrorCallback, OnLoadingStateChangeCallback, OnPageChangeCallback, OnPageSizeChangeCallback, OnSortChangeCallback, OnFilterChangeCallback, OnSearchChangeCallback, OnTableRowClickCallback, OnTableRowDoubleClickCallback, OnRowSelectCallback, OnSelectionChangeCallback, OnTableRowHoverCallback, OnCellClickCallback, OnTableRefreshCallback, } from './types';
+export type { BaseRowData, Column, DataGridProps, ActiveFilter, SortConfig, PaginationInfo, LoadingState, DataGridRequest, DataGridResponse, OnPageChangeCallback, OnPageSizeChangeCallback, OnSortChangeCallback, OnFilterChangeCallback, OnSearchChangeCallback, OnTableRowClickCallback, OnTableRowDoubleClickCallback, OnRowSelectCallback, OnSelectionChangeCallback, OnTableRowHoverCallback, OnCellClickCallback, OnTableRefreshCallback, OnBulkDeleteCallback, OnApplyFilterCallback, OnRemoveFilterCallback, OnClearFiltersCallback, } from './types';
 export { getTheme, themes } from './themes';
 export type { Theme } from './themes';
-export { formatters, compareValues, createApiRequest } from './utils';
+export { formatters, compareValues } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,YAAY,EACV,WAAW,EACX,MAAM,EACN,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,aAAa,EACb,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,6BAA6B,EAC7B,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EACvB,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,YAAY,EAEV,WAAW,EACX,MAAM,EACN,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EAGZ,eAAe,EACf,gBAAgB,EAGhB,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,6BAA6B,EAC7B,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EACvB,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EAGpB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -5,4 +5,4 @@ export { useDataGrid } from './hooks';
 // Themes
 export { getTheme, themes } from './themes';
 // Utilities
-export { formatters, compareValues, createApiRequest } from './utils';
+export { formatters, compareValues } from './utils';