gbs-add-block 0.0.99 → 1.0.0

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.99)
+# GBS Building Blocks 2.0 (v1.0.0)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,12 @@ 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://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.99)
+## What's New 🎉 (Ver 1.0.0)
 
-- Updated for bug fixes.
+- Major Update with more stable features and Data Grid.
+- Deprecated Grid Component, Use New Data Grid instead.
+- More UI/UX Optimization.
+- Animation improvements. 
 
 ## Authors
 

package/index.cjs

@@ -11,7 +11,6 @@ const CONFIG = {
     "Card",
     "Select",
     "SideBar",
-    "Grid",
     "MultiSelect",
     "Button",
     "DatePicker",

package/package.json

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

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

@@ -1,73 +1,14 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-} from "react";
-import { getSourceData } from "../../utils";
+import React, { createContext, useContext } from "react";
+import type { GridContextType, GridProps } from "../type";
 import {
-  clearFilterHelper,
-  handleApplyFilterHelper,
-} from "@grampro/headless-helpers";
-import type { GridProps } from "../type";
-
-interface GridContextType {
-  workingDataSource: any[];
-  fallbackSourceData: any[];
-  workingColumns: any[];
-  currentPage: number;
-  pageStart: number;
-  pageEnd: number;
-  totalPages: number;
-  searchParam: string;
-  activeFilterArray: any[];
-  selectedRows: any[];
-  isFetching: boolean | undefined;
-
-  // Navigation methods
-  nextPage: () => void;
-  prevPage: () => void;
-  goToEndPage: () => void;
-  goToFirstPage: () => void;
-  goToPage: (page: number) => void;
-  lazy: boolean;
-
-  // Search methods
-  handleSearchInput: (e: any) => void;
-  handleSearch: (searchParam: string) => void;
-
-  // Filter methods
-  toggleFilterPopup: (index: number) => void;
-  handleApplyFilter: (event: any) => void;
-  clearFilter: (event: any) => void;
-  handleFilterAction: (action: any, colIndex: number) => void;
-
-  // Row selection methods
-  handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleSelect: (rowData: any) => void;
-  isRowSelected: (rowData: any) => boolean;
-
-  // Grid settings
-  columns: any[];
-  pageSettings: any;
-  enableSearch: boolean;
-  enableExcelExport: boolean;
-  enablePdfExport: boolean;
-  excelName: string;
-  pdfName: string;
-  pdfOptions: any;
-  gridButtonClass: string;
-  selectAll: boolean;
-  tableHeaderStyle: string;
-  gridContainerClass: string;
-  gridColumnStyleSelectAll: string;
-  gridColumnStyle: string;
-  rowChange: (rowData: any) => void;
-  showTotalPages?: boolean;
-  onSearch?: (searchParam: string) => void;
-  onToolbarButtonClick?: (action: string) => void;
-}
+  useDataSource,
+  useColumns,
+  usePagination,
+  useSearch,
+  useFiltering,
+  useRowSelection,
+  usePageStatus,
+} from "../hooks";
 
 const GridContext = createContext<GridContextType | undefined>(undefined);
 
@@ -103,279 +44,76 @@ export const GridProvider: React.FC<{
     onToolbarButtonClick = () => {},
   } = props;
 
-  // States Handling Grid
-  const [workingDataSource, setWorkingDataSource] = useState<any>([]);
-  const [fallbackSourceData, setFallbackSourceData] = useState([]);
-  const [workingColumns, setWorkingColumns] = useState<any>([]);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [pageStart, setPageStart] = useState(0);
-  const [pageEnd, setPageEnd] = useState(10);
-  const [totalPages, setTotalPages] = useState(0);
-  const [searchParam, setSearchParam] = useState("");
-  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
-
-  // This will returns the Page Navigation Status of Grid
-  useEffect(() => {
-    if (pageStatus) {
-      pageStatus({ currentPage: currentPage, totalPages: totalPages });
-    }
-  }, [pageStatus, currentPage, totalPages]);
-
-  // Function to handle API datasource
-  const getGridData = useCallback(async () => {
-    try {
-      const sourceData = await getSourceData(dataSource);
-      const gridData = sourceData.sourcedata;
-      setFallbackSourceData(gridData);
-      setWorkingDataSource(gridData);
-      const totalPages = Math.ceil(gridData.length / pageSettings.pageNumber);
-      setTotalPages(totalPages);
-      setPageEnd(Math.min(10, totalPages));
-    } catch (error) {
-      console.error("Error fetching grid source data:", error);
-    }
-  }, [dataSource, pageSettings.pageNumber]);
-
-  // Calculates total pages and determine dataSource type
-  useEffect(() => {
-    const handleDataSource = async () => {
-      if (Array.isArray(dataSource)) {
-        setWorkingDataSource(dataSource);
-
-        // if lazy is true, then totalPages will be taken from pageSettings
-        const totalPages =
-          lazy && pageSettings.totalCount
-            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
-            : Math.ceil(dataSource.length / pageSettings.pageNumber);
-
-        setTotalPages(totalPages);
-        if (!lazy) {
-          setPageEnd(Math.min(10, totalPages));
-        } else {
-          setPageEnd(Math.min(pageStart + 10, totalPages));
-        }
-      } else if (typeof dataSource === "string") {
-        await getGridData();
-      }
-    };
-
-    handleDataSource();
-  }, [dataSource, pageSettings, getGridData]);
-
-  // Adds Filter Column
-  useEffect(() => {
-    if (columns && columns.length > 0) {
-      const filteredColumns = columns.map((column) => ({
-        ...column,
-        showFilterPopup: false,
-        isFilterActive: false,
-      }));
-      setWorkingColumns(filteredColumns);
-    }
-  }, [columns]);
-
-  // Adds Search Column
-  useEffect(() => {
-    if (!columns || columns.length === 0) {
-      if (
-        workingDataSource.length > 0 &&
-        Object.keys(workingDataSource[0]).length > 0
-      ) {
-        const inferredColumns = Object.keys(workingDataSource[0]).map(
-          (key) => ({
-            field: key,
-            headerText: key.charAt(0).toUpperCase() + key.slice(1),
-            width: 150,
-          })
-        );
-        setWorkingColumns((prevColumns: any) => {
-          if (JSON.stringify(prevColumns) !== JSON.stringify(inferredColumns)) {
-            return inferredColumns;
-          }
-          return prevColumns;
-        });
-      }
-    }
-  }, [columns, workingDataSource]);
-
-  // *** Page Navigation Helper Methods
-  const updatePageRange = (page: number) => {
-    const start = Math.floor(page / 10) * 10;
-    setPageStart(start);
-    setPageEnd(Math.min(start + 10, totalPages));
-  };
-
-  const nextPage = () => {
-    setCurrentPage((prevPage) => {
-      if (prevPage < totalPages - 1) {
-        const newPage = prevPage + 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  };
-
-  const prevPage = () => {
-    setCurrentPage((prevPage) => {
-      if (prevPage > 0) {
-        const newPage = prevPage - 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  };
-
-  const goToEndPage = () => {
-    const lastPage = totalPages - 1;
-    setCurrentPage(lastPage);
-    updatePageRange(lastPage);
-  };
-
-  const goToFirstPage = () => {
-    setCurrentPage(0);
-    updatePageRange(0);
-  };
-
-  const goToPage = (page: number) => {
-    setCurrentPage(page);
-    updatePageRange(page);
-  };
-
-  // *** Search Functions
-  const handleSearchInput = (e: any) => {
-    const searchValue = e.target.value;
-    if (searchParamValue) searchParamValue(searchValue);
-    setSearchParam(searchValue);
-
-    if (searchValue === "") {
-      if (!lazy) {
-        setWorkingDataSource(
-          fallbackSourceData.length > 0 ? fallbackSourceData : dataSource
-        );
-        const fallback =
-          fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
-        const totalPages = Math.ceil(fallback.length / pageSettings.pageNumber);
-        setTotalPages(totalPages);
-        setPageEnd(Math.min(pageStart + 10, totalPages));
-      }
-    }
-  };
-
-  const handleSearch = (searchParam: string) => {
-    if (!lazy) {
-      const filteredData = workingDataSource.filter((item: any) =>
-        Object.values(item).some((val: any) => {
-          const trimmedVal = val.toString().toLowerCase().trim();
-          const trimmedSearchParam = searchParam.toLowerCase().trim();
-          return trimmedVal.includes(trimmedSearchParam);
-        })
-      );
-      setWorkingDataSource(filteredData);
-      resetPage(filteredData);
-    }
-  };
-
-  // *** Filter Functions
-  // Resetting pagination params for updating pagination
-  function resetPage(dataSource: any) {
-    const newTotalPages = Math.ceil(
-      dataSource.length / pageSettings.pageNumber
-    );
-
-    setTotalPages(newTotalPages);
-    setCurrentPage(0);
-    setPageStart(0);
-    setPageEnd(Math.min(10, newTotalPages));
-  }
-
-  const toggleFilterPopup = (index: number) => {
-    setWorkingColumns((prevColumns: any) =>
-      prevColumns.map((column: any, i: any) =>
-        i === index
-          ? { ...column, showFilterPopup: !column.showFilterPopup }
-          : column
-      )
-    );
-  };
-
-  function handleApplyFilter(event: any) {
-    const {
-      columns: updatedColumns,
-      workingDataSource: updatedFullDataSource,
-      activeFilterArray: updatedActiveFilterArray,
-    } = handleApplyFilterHelper(event, columns, workingDataSource);
-
-    setWorkingColumns(updatedColumns);
-    setWorkingDataSource(updatedFullDataSource);
-    setActiveFilterArray(updatedActiveFilterArray);
-    if (activeFilterArrayValue)
-      activeFilterArrayValue(updatedActiveFilterArray);
-    resetPage(updatedFullDataSource);
-  }
+  // Data source management
+  const {
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    totalPages,
+    setTotalPages,
+  } = useDataSource(dataSource, pageSettings, lazy);
 
-  function clearFilter(event: any) {
-    const clearDataSource = Array.isArray(dataSource)
-      ? dataSource
-      : fallbackSourceData;
-    const {
-      columns: updatedColumns,
-      workingDataSource: updatedDataSource,
-      activeFilterArray: updatedActiveFilterArray,
-    } = clearFilterHelper(event, workingColumns, clearDataSource);
+  // Column management
+  const { workingColumns, setWorkingColumns } = useColumns(
+    columns,
+    workingDataSource
+  );
 
-    setWorkingColumns(updatedColumns);
-    setWorkingDataSource(updatedDataSource);
-    setActiveFilterArray(updatedActiveFilterArray);
-    if (activeFilterArrayValue)
-      activeFilterArrayValue(updatedActiveFilterArray);
-    resetPage(updatedDataSource);
-  }
+  // Pagination management
+  const {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+  } = usePagination(totalPages, lazy);
 
-  const handleFilterAction = (action: any, colIndex: number) => {
-    switch (action.type) {
-      case "cancel":
-        toggleFilterPopup(colIndex);
-        break;
-      case "applyFilter":
-        handleApplyFilter(action);
-        break;
-      case "clearFilter":
-        clearFilter(action);
-        break;
-      default:
-        break;
-    }
-  };
+  // Search functionality
+  const { searchParam, handleSearchInput, handleSearch } = useSearch({
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    dataSource,
+    lazy,
+    pageSettings,
+    resetPage,
+    setTotalPages,
+    searchParamValue,
+  });
 
-  // *** Row Selection Functions
-  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selected = event.target.checked ? workingDataSource : [];
-    setSelectedRows(selected);
-    onSelectRow?.(selected);
-  };
+  // Filtering functionality
+  const {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  } = useFiltering({
+    columns,
+    workingColumns,
+    setWorkingColumns,
+    workingDataSource,
+    setWorkingDataSource,
+    dataSource,
+    fallbackSourceData,
+    resetPage,
+    setTotalPages,
+    pageSettings,
+    activeFilterArrayValue,
+  });
 
-  const handleSelect = (rowData: any) => {
-    setSelectedRows((prevData) => {
-      const isSelected = prevData.includes(rowData);
-      let updatedData;
-      if (isSelected) {
-        updatedData = prevData.filter((item) => item !== rowData);
-      } else {
-        updatedData = [...prevData, rowData];
-      }
-      if (onSelectRow) onSelectRow(updatedData);
-      return updatedData;
-    });
-  };
+  // Row selection functionality
+  const { selectedRows, handleSelectAll, handleSelect, isRowSelected } =
+    useRowSelection(workingDataSource, onSelectRow);
 
-  const isRowSelected = (rowData: any) => {
-    return selectedRows.includes(rowData);
-  };
+  // Page status reporting
+  usePageStatus(currentPage, totalPages, pageStatus);
 
-  // Provide context value
+  // Context value
   const contextValue: GridContextType = {
     // State
     workingDataSource,

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

@@ -0,0 +1,7 @@
+export { useDataSource } from "./useDataSource";
+export { useColumns } from "./useColumns";
+export { usePagination } from "./usePagination";
+export { useSearch } from "./useSearch";
+export { useFiltering } from "./useFiltering";
+export { useRowSelection } from "./useRowSelection";
+export { usePageStatus } from "./usePageStatus";

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

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+export const useColumns = (columns: any[], workingDataSource: any[]) => {
+  const [workingColumns, setWorkingColumns] = useState<any>([]);
+
+  useEffect(() => {
+    if (columns && columns.length > 0) {
+      const filteredColumns = columns.map((column) => ({
+        ...column,
+        showFilterPopup: false,
+        isFilterActive: false,
+      }));
+      setWorkingColumns(filteredColumns);
+    } else if (
+      workingDataSource.length > 0 &&
+      Object.keys(workingDataSource[0]).length > 0
+    ) {
+      const inferredColumns = Object.keys(workingDataSource[0]).map((key) => ({
+        field: key,
+        headerText: key.charAt(0).toUpperCase() + key.slice(1),
+        width: 150,
+      }));
+      setWorkingColumns((prevColumns: any) => {
+        if (JSON.stringify(prevColumns) !== JSON.stringify(inferredColumns)) {
+          return inferredColumns;
+        }
+        return prevColumns;
+      });
+    }
+  }, [columns, workingDataSource]);
+
+  return { workingColumns, setWorkingColumns };
+};

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

@@ -0,0 +1,54 @@
+import { useState, useCallback, useEffect } from "react";
+import { getSourceData } from "../../utils";
+
+export const useDataSource = (
+  dataSource: any,
+  pageSettings: any,
+  lazy: boolean
+) => {
+  const [workingDataSource, setWorkingDataSource] = useState<any>([]);
+  const [fallbackSourceData, setFallbackSourceData] = useState([]);
+  const [totalPages, setTotalPages] = useState(0);
+
+  const getGridData = useCallback(async () => {
+    try {
+      const sourceData = await getSourceData(dataSource);
+      const gridData = sourceData.sourcedata;
+      setFallbackSourceData(gridData);
+      setWorkingDataSource(gridData);
+      const totalPages = Math.ceil(gridData.length / pageSettings.pageNumber);
+      setTotalPages(totalPages);
+      return totalPages;
+    } catch (error) {
+      console.error("Error fetching grid source data:", error);
+      return 0;
+    }
+  }, [dataSource, pageSettings.pageNumber]);
+
+  useEffect(() => {
+    const handleDataSource = async () => {
+      if (Array.isArray(dataSource)) {
+        setWorkingDataSource(dataSource);
+
+        const totalPages =
+          lazy && pageSettings.totalCount
+            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
+            : Math.ceil(dataSource.length / pageSettings.pageNumber);
+
+        setTotalPages(totalPages);
+      } else if (typeof dataSource === "string") {
+        await getGridData();
+      }
+    };
+
+    handleDataSource();
+  }, [dataSource, pageSettings, lazy, getGridData]);
+
+  return {
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    totalPages,
+    setTotalPages,
+  };
+};

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

@@ -0,0 +1,135 @@
+import { useState, useCallback } from "react";
+import {
+  clearFilterHelper,
+  handleApplyFilterHelper,
+} from "@grampro/headless-helpers";
+
+interface UseFilteringProps {
+  columns: any[];
+  workingColumns: any[];
+  setWorkingColumns: (columns: any[]) => void;
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  dataSource: any;
+  fallbackSourceData: any[];
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  pageSettings: any;
+  activeFilterArrayValue?: (filters: any[]) => void;
+}
+
+export const useFiltering = ({
+  columns,
+  workingColumns,
+  setWorkingColumns,
+  workingDataSource,
+  setWorkingDataSource,
+  dataSource,
+  fallbackSourceData,
+  resetPage,
+  setTotalPages,
+  pageSettings,
+  activeFilterArrayValue,
+}: UseFilteringProps) => {
+  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
+
+  const toggleFilterPopup = useCallback(
+    (index: number) => {
+      setWorkingColumns(
+        workingColumns.map((column: any, i: any) =>
+          i === index
+            ? { ...column, showFilterPopup: !column.showFilterPopup }
+            : column
+        )
+      );
+    },
+    [workingColumns, setWorkingColumns]
+  );
+
+  const handleApplyFilter = useCallback(
+    (event: any) => {
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedFullDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = handleApplyFilterHelper(event, columns, workingDataSource);
+
+      setWorkingColumns(updatedColumns);
+      setWorkingDataSource(updatedFullDataSource);
+      setActiveFilterArray(updatedActiveFilterArray);
+      if (activeFilterArrayValue)
+        activeFilterArrayValue(updatedActiveFilterArray);
+      const totalPages = resetPage(updatedFullDataSource, pageSettings);
+      setTotalPages(totalPages);
+    },
+    [
+      columns,
+      workingDataSource,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const clearFilter = useCallback(
+    (event: any) => {
+      const clearDataSource = Array.isArray(dataSource)
+        ? dataSource
+        : fallbackSourceData;
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = clearFilterHelper(event, workingColumns, clearDataSource);
+
+      setWorkingColumns(updatedColumns);
+      setWorkingDataSource(updatedDataSource);
+      setActiveFilterArray(updatedActiveFilterArray);
+      if (activeFilterArrayValue)
+        activeFilterArrayValue(updatedActiveFilterArray);
+      const totalPages = resetPage(updatedDataSource, pageSettings);
+      setTotalPages(totalPages);
+    },
+    [
+      dataSource,
+      fallbackSourceData,
+      workingColumns,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const handleFilterAction = useCallback(
+    (action: any, colIndex: number) => {
+      switch (action.type) {
+        case "cancel":
+          toggleFilterPopup(colIndex);
+          break;
+        case "applyFilter":
+          handleApplyFilter(action);
+          break;
+        case "clearFilter":
+          clearFilter(action);
+          break;
+        default:
+          break;
+      }
+    },
+    [toggleFilterPopup, handleApplyFilter, clearFilter]
+  );
+
+  return {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  };
+};

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

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+export const usePageStatus = (
+  currentPage: number,
+  totalPages: number,
+  pageStatus?: (status: any) => void
+) => {
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage, totalPages });
+    }
+  }, [pageStatus, currentPage, totalPages]);
+};

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

@@ -0,0 +1,88 @@
+import { useState, useCallback, useEffect } from "react";
+
+export const usePagination = (totalPages: number, lazy: boolean) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageStart, setPageStart] = useState(0);
+  const [pageEnd, setPageEnd] = useState(10);
+
+  const updatePageRange = useCallback(
+    (page: number) => {
+      const start = Math.floor(page / 10) * 10;
+      setPageStart(start);
+      setPageEnd(Math.min(start + 10, totalPages));
+    },
+    [totalPages]
+  );
+
+  useEffect(() => {
+    if (!lazy) {
+      setPageEnd(Math.min(10, totalPages));
+    } else {
+      setPageEnd(Math.min(pageStart + 10, totalPages));
+    }
+  }, [totalPages, lazy, pageStart]);
+
+  const nextPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage < totalPages - 1) {
+        const newPage = prevPage + 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [totalPages, updatePageRange]);
+
+  const prevPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage > 0) {
+        const newPage = prevPage - 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [updatePageRange]);
+
+  const goToEndPage = useCallback(() => {
+    const lastPage = totalPages - 1;
+    setCurrentPage(lastPage);
+    updatePageRange(lastPage);
+  }, [totalPages, updatePageRange]);
+
+  const goToFirstPage = useCallback(() => {
+    setCurrentPage(0);
+    updatePageRange(0);
+  }, [updatePageRange]);
+
+  const goToPage = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      updatePageRange(page);
+    },
+    [updatePageRange]
+  );
+
+  const resetPage = useCallback((dataSource: any, pageSettings: any) => {
+    const newTotalPages = Math.ceil(
+      dataSource.length / pageSettings.pageNumber
+    );
+    setCurrentPage(0);
+    setPageStart(0);
+    setPageEnd(Math.min(10, newTotalPages));
+    return newTotalPages;
+  }, []);
+
+  return {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+    updatePageRange,
+  };
+};

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

@@ -0,0 +1,48 @@
+import { useState, useCallback } from "react";
+
+export const useRowSelection = (
+  workingDataSource: any[],
+  onSelectRow?: (rows: any[]) => void
+) => {
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+  const handleSelectAll = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = event.target.checked ? workingDataSource : [];
+      setSelectedRows(selected);
+      onSelectRow?.(selected);
+    },
+    [workingDataSource, onSelectRow]
+  );
+
+  const handleSelect = useCallback(
+    (rowData: any) => {
+      setSelectedRows((prevData) => {
+        const isSelected = prevData.includes(rowData);
+        let updatedData;
+        if (isSelected) {
+          updatedData = prevData.filter((item) => item !== rowData);
+        } else {
+          updatedData = [...prevData, rowData];
+        }
+        if (onSelectRow) onSelectRow(updatedData);
+        return updatedData;
+      });
+    },
+    [onSelectRow]
+  );
+
+  const isRowSelected = useCallback(
+    (rowData: any) => {
+      return selectedRows.includes(rowData);
+    },
+    [selectedRows]
+  );
+
+  return {
+    selectedRows,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+  };
+};

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

@@ -0,0 +1,86 @@
+import { useState, useCallback } from "react";
+
+interface UseSearchProps {
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  fallbackSourceData: any[];
+  dataSource: any;
+  lazy: boolean;
+  pageSettings: any;
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  searchParamValue?: (value: string) => void;
+}
+
+export const useSearch = ({
+  workingDataSource,
+  setWorkingDataSource,
+  fallbackSourceData,
+  dataSource,
+  lazy,
+  pageSettings,
+  resetPage,
+  setTotalPages,
+  searchParamValue,
+}: UseSearchProps) => {
+  const [searchParam, setSearchParam] = useState("");
+
+  const handleSearchInput = useCallback(
+    (e: any) => {
+      const searchValue = e.target.value;
+      if (searchParamValue) searchParamValue(searchValue);
+      setSearchParam(searchValue);
+
+      if (searchValue === "") {
+        if (!lazy) {
+          const fallback =
+            fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
+          setWorkingDataSource(fallback);
+          const totalPages = resetPage(fallback, pageSettings);
+          setTotalPages(totalPages);
+        }
+      }
+    },
+    [
+      searchParamValue,
+      lazy,
+      fallbackSourceData,
+      dataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const handleSearch = useCallback(
+    (searchParam: string) => {
+      if (!lazy) {
+        const filteredData = workingDataSource.filter((item: any) =>
+          Object.values(item).some((val: any) => {
+            const trimmedVal = val.toString().toLowerCase().trim();
+            const trimmedSearchParam = searchParam.toLowerCase().trim();
+            return trimmedVal.includes(trimmedSearchParam);
+          })
+        );
+        setWorkingDataSource(filteredData);
+        const totalPages = resetPage(filteredData, pageSettings);
+        setTotalPages(totalPages);
+      }
+    },
+    [
+      lazy,
+      workingDataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  return {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+  };
+};

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

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { act } from "react";
 import { useGridContext } from "../context/GridContext";
-import { useGridFilter, useGridRowSelection } from "../hooks/GridHooks";
 import FilterPopup from "./FilterPopup";
 import Icon from "../../icon/Icon";
 import { listFilter } from "../../icon/iconPaths";
@@ -18,6 +17,13 @@ const GridBody = () => {
     gridColumnStyleSelectAll,
     rowChange,
     lazy,
+    activeFilterArray,
+    toggleFilterPopup,
+    handleFilterAction,
+    selectAll,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
   } = useGridContext();
 
   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
@@ -47,11 +53,6 @@ const GridBody = () => {
     return cellValue;
   };
 
-  const { activeFilterArray, toggleFilterPopup, handleFilterAction } =
-    useGridFilter();
-  const { selectAll, handleSelectAll, handleSelect, isRowSelected } =
-    useGridRowSelection();
-
   const displayStart = currentPage * pageSettings.pageNumber;
   const displayEnd = displayStart + pageSettings.pageNumber;
   const displayData = lazy
@@ -91,12 +92,12 @@ const GridBody = () => {
                         <Icon
                           dimensions={{ width: "12", height: "12" }}
                           elements={listFilter}
-                          svgClass={`ml-2 fill-none dark:stroke-white ${
+                          svgClass={`ml-2 fill-none ${
                             activeFilterArray.some(
                               (filter) => filter.filterColumn === column.field
                             )
-                              ? "stroke-red-400"
-                              : "stroke-black"
+                              ? "stroke-red-400 dark:stroke-red-400"
+                              : "stroke-black dark:stroke-white"
                           }`}
                         />
                       </button>

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { useGridPagination } from "../hooks/GridHooks";
 import Icon from "../../icon/Icon";
 import {
   leftArrow,
@@ -7,6 +6,7 @@ import {
   rightArrow,
   rightArrows,
 } from "../../icon/iconPaths";
+import { useGridContext } from "../context/GridContext";
 
 const Pagination = () => {
   const {
@@ -23,7 +23,7 @@ const Pagination = () => {
     lazy,
     pageSettings,
     showTotalPages,
-  } = useGridPagination();
+  } = useGridContext();
 
   return (
     <div className="w-full flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">

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

@@ -1,11 +1,11 @@
-import React, { lazy } from "react";
-import { useGridExport, useGridSearch } from "../hooks/GridHooks";
+import React from "react";
 import {
   exportToExcelHelper,
   exportToPDFHelper,
 } from "@grampro/headless-helpers";
 import Icon from "../../icon/Icon";
 import { search } from "../../icon/iconPaths";
+import { useGridContext } from "../context/GridContext";
 
 const GridToolbar = () => {
   const {
@@ -14,9 +14,6 @@ const GridToolbar = () => {
     handleSearch,
     enableSearch,
     onSearch,
-  } = useGridSearch();
-
-  const {
     enableExcelExport,
     enablePdfExport,
     workingDataSource,
@@ -26,7 +23,8 @@ const GridToolbar = () => {
     pdfOptions,
     gridButtonClass,
     onToolbarButtonClick,
-  } = useGridExport();
+    lazy,
+  } = useGridContext();
 
   if (!enableSearch && !enableExcelExport && !enablePdfExport) {
     return null;
@@ -71,6 +69,7 @@ const GridToolbar = () => {
             <button
               className={gridButtonClass}
               onClick={() => {
+                console.log("clicked", lazy.toString());
                 if (!lazy) {
                   exportToExcelHelper(workingDataSource, columns, excelName);
                 }

package/source/components/datagrid/type.ts

@@ -121,3 +121,60 @@ export type GridBodyProps = {
   gridColumnStyle: string;
   rowChange?: (changes: any) => void;
 };
+
+export interface GridContextType {
+  workingDataSource: any[];
+  fallbackSourceData: any[];
+  workingColumns: any[];
+  currentPage: number;
+  pageStart: number;
+  pageEnd: number;
+  totalPages: number;
+  searchParam: string;
+  activeFilterArray: any[];
+  selectedRows: any[];
+  isFetching: boolean | undefined;
+
+  // Navigation methods
+  nextPage: () => void;
+  prevPage: () => void;
+  goToEndPage: () => void;
+  goToFirstPage: () => void;
+  goToPage: (page: number) => void;
+  lazy: boolean;
+
+  // Search methods
+  handleSearchInput: (e: any) => void;
+  handleSearch: (searchParam: string) => void;
+
+  // Filter methods
+  toggleFilterPopup: (index: number) => void;
+  handleApplyFilter: (event: any) => void;
+  clearFilter: (event: any) => void;
+  handleFilterAction: (action: any, colIndex: number) => void;
+
+  // Row selection methods
+  handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSelect: (rowData: any) => void;
+  isRowSelected: (rowData: any) => boolean;
+
+  // Grid settings
+  columns: any[];
+  pageSettings: any;
+  enableSearch: boolean;
+  enableExcelExport: boolean;
+  enablePdfExport: boolean;
+  excelName: string;
+  pdfName: string;
+  pdfOptions: any;
+  gridButtonClass: string;
+  selectAll: boolean;
+  tableHeaderStyle: string;
+  gridContainerClass: string;
+  gridColumnStyleSelectAll: string;
+  gridColumnStyle: string;
+  rowChange: (rowData: any) => void;
+  showTotalPages?: boolean;
+  onSearch?: (searchParam: string) => void;
+  onToolbarButtonClick?: (action: string) => void;
+}

package/source/components/datagrid/hooks/GridHooks.tsx

@@ -1,114 +0,0 @@
-import { useGridContext } from "../context/GridContext";
-
-// Hook for pagination functionality
-export const useGridPagination = () => {
-  const {
-    currentPage,
-    pageStart,
-    pageEnd,
-    totalPages,
-    goToFirstPage,
-    prevPage,
-    goToPage,
-    nextPage,
-    goToEndPage,
-    workingDataSource,
-    lazy,
-    pageSettings,
-    showTotalPages,
-  } = useGridContext();
-
-  return {
-    currentPage,
-    pageStart,
-    pageEnd,
-    totalPages,
-    goToFirstPage,
-    prevPage,
-    goToPage,
-    nextPage,
-    goToEndPage,
-    workingDataSource,
-    lazy,
-    pageSettings,
-    showTotalPages,
-  };
-};
-
-// Hook for grid search functionality
-export const useGridSearch = () => {
-  const {
-    searchParam,
-    handleSearchInput,
-    handleSearch,
-    enableSearch,
-    onSearch,
-  } = useGridContext();
-
-  return {
-    searchParam,
-    handleSearchInput,
-    handleSearch,
-    enableSearch,
-    onSearch,
-  };
-};
-
-// Hook for grid filter functionality
-export const useGridFilter = () => {
-  const {
-    workingColumns,
-    activeFilterArray,
-    toggleFilterPopup,
-    handleFilterAction,
-  } = useGridContext();
-
-  return {
-    workingColumns,
-    activeFilterArray,
-    toggleFilterPopup,
-    handleFilterAction,
-  };
-};
-
-// Hook for row selection
-export const useGridRowSelection = () => {
-  const { selectAll, handleSelectAll, handleSelect, isRowSelected } =
-    useGridContext();
-
-  return {
-    selectAll,
-    handleSelectAll,
-    handleSelect,
-    isRowSelected,
-  };
-};
-
-// Hook for export functionality
-export const useGridExport = () => {
-  const {
-    enableExcelExport,
-    enablePdfExport,
-    workingDataSource,
-    columns,
-    excelName,
-    pdfName,
-    pdfOptions,
-    gridButtonClass,
-    onToolbarButtonClick,
-    lazy,
-  } = useGridContext();
-
-  return {
-    enableExcelExport,
-    enablePdfExport,
-    workingDataSource,
-    columns,
-    excelName,
-    pdfName,
-    pdfOptions,
-    gridButtonClass,
-    onToolbarButtonClick,
-    lazy,
-  };
-};