@reactorui/datagrid 1.2.0 → 1.2.1

package/dist/hooks/useDataGrid.d.ts

@@ -21,7 +21,7 @@ interface UseDataGridProps<T> {
     onClearFilters?: () => void;
     onFilterChange?: (filters: ActiveFilter[]) => void;
 }
-export declare const useDataGrid: <T extends BaseRowData>({ data, pageSize: initialPageSize, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading, filterMode, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }: UseDataGridProps<T>) => {
+export declare const useDataGrid: <T extends BaseRowData>({ data, pageSize, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading, filterMode, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }: UseDataGridProps<T>) => {
     data: T[];
     processedData: T[];
     paginatedData: T[];

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

@@ -1 +1 @@
-{"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;IAElB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;IAGnD,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,+QAehD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;0BA2GX,MAAM;sBASJ,MAAM;2BAaR,MAAM;+BAQN,MAAM;;;wBAsBJ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAoB5B,MAAM;;uBA4BsB,MAAM,YAAY,OAAO;0BASlD,OAAO;;;;;;oBA1LZ,CAAC,KAAG,MAAM;;CA0PnB,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;IAElB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;IAGnD,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,8PAehD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;0BAkHX,MAAM;sBASJ,MAAM;2BAaR,MAAM;+BAQN,MAAM;;;wBAsBJ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAoB5B,MAAM;;uBA4BsB,MAAM,YAAY,OAAO;0BASlD,OAAO;;;;;;oBA3LZ,CAAC,KAAG,MAAM;;CA2PnB,CAAC"}

package/dist/hooks/useDataGrid.js

@@ -1,17 +1,22 @@
 // File: src/hooks/useDataGrid.ts
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { compareValues, sortData } from '../utils';
 // ============================================================================
 // Hook Implementation
 // ============================================================================
-export const useDataGrid = ({ data, pageSize: initialPageSize = 10, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading = false, filterMode = 'client', onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }) => {
+export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading = false, filterMode = 'client', 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());
     const [internalPage, setInternalPage] = useState(1);
-    const [currentPageSize, setCurrentPageSizeState] = useState(initialPageSize);
+    const [currentPageSize, setCurrentPageSizeState] = useState(pageSize);
+    // ===== Sync pageSize prop with internal state =====
+    // This ensures the component responds to prop changes from parent
+    useEffect(() => {
+        setCurrentPageSizeState(pageSize);
+    }, [pageSize]);
     // Determine if we're in controlled mode (server-side) or uncontrolled (client-side)
     const isControlled = externalTotalRecords !== undefined;
     const currentPage = externalCurrentPage ?? internalPage;
@@ -68,9 +73,10 @@ export const useDataGrid = ({ data, pageSize: initialPageSize = 10, totalRecords
         const start = (currentPage - 1) * currentPageSize;
         return processedData.slice(start, start + currentPageSize);
     }, [processedData, currentPage, currentPageSize, isControlled, data]);
+    // ===== Pagination Info =====
     const paginationInfo = useMemo(() => {
         const total = isControlled ? (externalTotalRecords ?? 0) : processedData.length;
-        const totalPages = Math.ceil(total / currentPageSize);
+        const totalPages = Math.ceil(total / currentPageSize) || 1;
         const start = total === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
         const end = Math.min(currentPage * currentPageSize, total);
         return {
@@ -83,7 +89,7 @@ export const useDataGrid = ({ data, pageSize: initialPageSize = 10, totalRecords
             hasNext: currentPage < totalPages,
             hasPrevious: currentPage > 1,
         };
-    }, [processedData.length, currentPage, currentPageSize, isControlled, externalTotalRecords]);
+    }, [processedData, currentPage, currentPageSize, isControlled, externalTotalRecords]);
     // ===== Selection =====
     const selectedData = useMemo(() => {
         return data.filter((row) => selectedRows.has(getRowId(row)));
@@ -113,7 +119,7 @@ export const useDataGrid = ({ data, pageSize: initialPageSize = 10, totalRecords
     const setCurrentPageSize = useCallback((size) => {
         setCurrentPageSizeState(size);
         if (!isControlled)
-            setInternalPage(1);
+            setInternalPage(1); // Reset to page 1 when page size changes
         onPageSizeChange?.(size);
     }, [isControlled, onPageSizeChange]);
     const navigateNext = useCallback(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactorui/datagrid",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A flexible, high-performance React data grid component with TypeScript support, advanced filtering, pagination, sorting, and customizable theming",
   "main": "dist/index.js",
   "module": "dist/index.js",