gbs-add-block 1.2.3 → 1.2.4

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.3)
+# GBS Building Blocks 2.0 (v1.2.4)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,9 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.3)
+## What's New 🎉 (Ver 1.2.4)
 
-- Bug Fix
+- Bug Fix For Server Side Pagination in Data Grid Component
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/datagrid/context/GridContext.tsx

@@ -41,6 +41,8 @@ export const GridProvider: React.FC<{
     showTotalPages = false,
     onSearch = () => {},
     onToolbarButtonClick = () => {},
+    initialFilters = [],
+    initialSearchParam = "",
   } = props;
 
   // Data source management
@@ -88,6 +90,7 @@ export const GridProvider: React.FC<{
     resetPage,
     setTotalPages,
     searchParamValue,
+    initialSearchParam,
   });
 
   // Filtering functionality
@@ -109,6 +112,8 @@ export const GridProvider: React.FC<{
     setTotalPages,
     pageSettings,
     activeFilterArrayValue,
+    lazy,
+    initialFilters,
   });
 
   // Row selection functionality

package/source/components/datagrid/hooks/useColumns.ts

@@ -27,7 +27,7 @@ export const useColumns = (columns: any[], workingDataSource: any[]) => {
         return prevColumns;
       });
     }
-  }, [columns, workingDataSource]);
+  }, [columns]); // Remove workingDataSource from dependencies to prevent reset on data fetch
 
   return { workingColumns, setWorkingColumns };
 };

package/source/components/datagrid/hooks/useFiltering.ts

@@ -17,6 +17,8 @@ interface UseFilteringProps {
   setTotalPages: (pages: number) => void;
   pageSettings: any;
   activeFilterArrayValue?: (filters: ActiveFilterArrayValue[]) => void;
+  lazy: boolean;
+  initialFilters?: any[];
 }
 
 export const useFiltering = ({
@@ -31,8 +33,10 @@ export const useFiltering = ({
   setTotalPages,
   pageSettings,
   activeFilterArrayValue,
+  lazy,
+  initialFilters = [],
 }: UseFilteringProps) => {
-  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
+  const [activeFilterArray, setActiveFilterArray] = useState<any>(initialFilters);
 
   const toggleFilterPopup = useCallback(
     (index: number) => {
@@ -56,13 +60,21 @@ export const useFiltering = ({
       } = handleApplyFilterHelper(event, columns, workingDataSource);
 
       setWorkingColumns(updatedColumns);
-      setWorkingDataSource(updatedFullDataSource);
-      setActiveFilterArray(updatedActiveFilterArray);
-      if (activeFilterArrayValue)
-        activeFilterArrayValue?.(updatedActiveFilterArray);
+      
+      const newActiveFilters = updatedActiveFilterArray;
+      setActiveFilterArray(newActiveFilters);
 
-      const totalPages = resetPage(updatedFullDataSource, pageSettings);
-      setTotalPages(totalPages);
+      if (!lazy) {
+        setWorkingDataSource(updatedFullDataSource);
+        const totalPages = resetPage(updatedFullDataSource, pageSettings);
+        setTotalPages(totalPages);
+      } else {
+        // In lazy mode, we reset page to 0 but keep totalPages from pageSettings
+        resetPage(workingDataSource, pageSettings);
+      }
+      
+      if (activeFilterArrayValue)
+        activeFilterArrayValue?.(newActiveFilters);
     },
     [
       columns,
@@ -73,6 +85,8 @@ export const useFiltering = ({
       resetPage,
       pageSettings,
       setTotalPages,
+      lazy,
+      activeFilterArray,
     ]
   );
 
@@ -88,13 +102,28 @@ export const useFiltering = ({
       } = clearFilterHelper(event, workingColumns, clearDataSource);
 
       setWorkingColumns(updatedColumns);
-      setWorkingDataSource(updatedDataSource);
-      setActiveFilterArray(updatedActiveFilterArray);
-      if (activeFilterArrayValue)
-        activeFilterArrayValue?.(updatedActiveFilterArray);
 
-      const totalPages = resetPage(updatedDataSource, pageSettings);
-      setTotalPages(totalPages);
+      // Manual fallback: ensure the filter is removed from the active array
+      let newActiveFilters = updatedActiveFilterArray;
+      if (event.type === "clearFilter" && event.columnHeader) {
+        newActiveFilters = activeFilterArray.filter(
+          (f: any) => f.filterColumn !== event.columnHeader
+        );
+      }
+      
+      setActiveFilterArray(newActiveFilters);
+
+      if (!lazy) {
+        setWorkingDataSource(updatedDataSource);
+        const totalPages = resetPage(updatedDataSource, pageSettings);
+        setTotalPages(totalPages);
+      } else {
+        // In lazy mode, we reset page to 0 but keep totalPages from pageSettings
+        resetPage(workingDataSource, pageSettings);
+      }
+
+      if (activeFilterArrayValue)
+        activeFilterArrayValue?.(newActiveFilters);
     },
     [
       dataSource,
@@ -106,6 +135,8 @@ export const useFiltering = ({
       resetPage,
       pageSettings,
       setTotalPages,
+      lazy,
+      activeFilterArray,
     ]
   );
 

package/source/components/datagrid/hooks/usePagination.ts

@@ -41,33 +41,16 @@ export const usePagination = (
   // This will handle the case when dataSource changes
   // and adjust the current page accordingly in managed workflow
   useEffect(() => {
-    if (lazy && dataSource && prevDataLength > 0) {
-      const currentDataLength = dataSource.length;
-
-      if (currentDataLength > prevDataLength) {
-        const lastPage = totalPages - 1;
-        setCurrentPage(lastPage);
-        updatePageRange(lastPage);
-      } else if (currentDataLength < prevDataLength) {
-        const rowsPerPage = lazy ? 1 : pageSettings?.pageNumber || 10;
-        const startIndex = currentPage * rowsPerPage;
+    setPrevDataLength(dataSource?.length || 0);
+  }, [dataSource?.length]);
 
-        if (startIndex >= currentDataLength && currentPage > 0) {
-          const newPage = currentPage - 1;
-          setCurrentPage(newPage);
-          updatePageRange(newPage);
-        }
-      }
+  // Defensive check: if current page is out of bounds due to totalPages shrinking, reset to 0
+  useEffect(() => {
+    if (totalPages > 0 && currentPage >= totalPages) {
+      setCurrentPage(0);
+      updatePageRange(0);
     }
-    setPrevDataLength(dataSource?.length || 0);
-  }, [
-    dataSource?.length,
-    totalPages,
-    updatePageRange,
-    prevDataLength,
-    currentPage,
-    lazy,
-  ]);
+  }, [totalPages, currentPage, updatePageRange]);
 
   const nextPage = useCallback(() => {
     setCurrentPage((prevPage) => {
@@ -111,14 +94,16 @@ export const usePagination = (
   );
 
   const resetPage = useCallback((dataSource: any, pageSettings: any) => {
-    const newTotalPages = Math.ceil(
-      dataSource.length / pageSettings.pageNumber
-    );
+    const newTotalPages =
+      lazy && pageSettings?.totalCount
+        ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
+        : Math.ceil((dataSource?.length || 0) / (pageSettings?.pageNumber || 10));
+
     setCurrentPage(0);
     setPageStart(0);
     setPageEnd(Math.min(10, newTotalPages));
     return newTotalPages;
-  }, []);
+  }, [lazy]);
 
   return {
     currentPage,

package/source/components/datagrid/hooks/useSearch.ts

@@ -10,6 +10,7 @@ interface UseSearchProps {
   resetPage: (data: any[], settings: any) => number;
   setTotalPages: (pages: number) => void;
   searchParamValue?: (value: string) => void;
+  initialSearchParam?: string;
 }
 
 export const useSearch = ({
@@ -22,8 +23,9 @@ export const useSearch = ({
   resetPage,
   setTotalPages,
   searchParamValue,
+  initialSearchParam = "",
 }: UseSearchProps) => {
-  const [searchParam, setSearchParam] = useState("");
+  const [searchParam, setSearchParam] = useState(initialSearchParam);
 
   const handleSearchInput = useCallback(
     (e: any) => {
@@ -66,6 +68,8 @@ export const useSearch = ({
         setWorkingDataSource(filteredData);
         const totalPages = resetPage(filteredData, pageSettings);
         setTotalPages(totalPages);
+      } else {
+        resetPage(workingDataSource, pageSettings);
       }
     },
     [

package/source/components/datagrid/layout/FilterPopup.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 import { useState } from "react";
 
-export default function FilterPopup({ show, columnHeader, filterAction }: any) {
-  const [filterValue, setFilterValue] = useState("");
-  const [filterType, setFilterType] = useState("contains");
-  const [isFilterActive, setIsFilterActive] = useState(false);
+export default function FilterPopup({
+  show,
+  columnHeader,
+  filterAction,
+  activeFilter,
+}: any) {
+  const [filterValue, setFilterValue] = useState(activeFilter?.filterValue || "");
+  const [filterType, setFilterType] = useState(
+    activeFilter?.filterCondition || activeFilter?.filterType || "contains"
+  );
+  const [isFilterActive, setIsFilterActive] = useState(!!activeFilter);
 
   const handleFilterInput = (e: any) => {
     const filterKeyword = e.target.value;

package/source/components/datagrid/layout/GridBody.tsx

@@ -104,6 +104,9 @@ const GridBody = () => {
                       <FilterPopup
                         show={column.showFilterPopup ?? false}
                         columnHeader={column.field}
+                        activeFilter={activeFilterArray.find(
+                          (f) => f.filterColumn === column.field
+                        )}
                         filterAction={(action: any) =>
                           handleFilterAction(action, colIndex)
                         }

package/source/components/datagrid/type.ts

@@ -41,6 +41,8 @@ export type GridProps = {
   showTotalPages?: boolean;
   onSearch?: (value: string) => void;
   onToolbarButtonClick?: (action: string) => void;
+  initialFilters?: ActiveFilterArrayValue[];
+  initialSearchParam?: string;
 };
 
 interface GridColumn {