fixed client side searching

src/components/collections/PmGridCollection.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo,useEffect } from "react";
+import React, { useMemo, useEffect } from "react";
 import { PmsGrid, useGridCore } from "../../services/pmsGrid";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { formatFigure } from "../../utils/appUtils";
@@ -50,57 +50,6 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
     { key: "isActive", title: "Status", enableAdvancedFilter: false },
   ];
 
-  // const fetcher = async ({ page, pageSize, search, filter }) => {
-  //   const response = await CollectionRepository.getCollections(
-  //     selectedProject,
-  //     search || "",
-  //     fromDate,
-  //     toDate,
-  //     pageSize,
-  //     page,
-  //     true, // isActive
-  //     isPending,
-  //     filter
-  //   );
-
-  //   const api = response.data;
-
-  //   return {
-      // rows: api.data.map((item) => ({
-      //   id: item.id,
-      //   invoiceNumber: item.invoiceNumber,
-      //   title: item.title,
-
-      //   clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate),
-      //   exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate),
-
-      //   totalAmount: formatFigure(item.basicAmount + item.taxAmount, {
-      //     type: "currency",
-      //     currency: "INR",
-      //   }),
-
-      //   balanceAmount: formatFigure(item.balanceAmount, {
-      //     type: "currency",
-      //     currency: "INR",
-      //   }),
-
-      //   isActive: item.isActive ? (
-      //     <span className="badge bg-label-primary">
-      //       <span className="badge badge-dot bg-primary me-1"></span>
-      //       Active
-      //     </span>
-      //   ) : (
-      //     <span className="badge bg-label-danger">
-      //       <span className="badge badge-dot bg-danger me-1"></span>
-      //       In-Active
-      //     </span>
-      //   ),
-      // })),
-
-      // total: api.totalEntities,
-  //   };
-  // };
-
   function useGridCollectionQuery({
     projectId,
     fromDate,
@@ -141,38 +90,38 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         const api = res.data;
 
         return {
-        rows: api.data.map((item) => ({
+          rows: api.data.map((item) => ({
-        id: item.id,
+            id: item.id,
-        invoiceNumber: item.invoiceNumber,
+            invoiceNumber: item.invoiceNumber,
-        title: item.title,
+            title: item.title,
 
-        clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate),
+            clientSubmitedDate: formatUTCToLocalTime(item.clientSubmitedDate),
-        exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate),
+            exceptedPaymentDate: formatUTCToLocalTime(item.exceptedPaymentDate),
 
-        totalAmount: formatFigure(item.basicAmount + item.taxAmount, {
+            totalAmount: formatFigure(item.basicAmount + item.taxAmount, {
-          type: "currency",
+              type: "currency",
-          currency: "INR",
+              currency: "INR",
-        }),
+            }),
 
-        balanceAmount: formatFigure(item.balanceAmount, {
+            balanceAmount: formatFigure(item.balanceAmount, {
-          type: "currency",
+              type: "currency",
-          currency: "INR",
+              currency: "INR",
-        }),
+            }),
 
-        isActive: item.isActive ? (
+            isActive: item.isActive ? (
-          <span className="badge bg-label-primary">
+              <span className="badge bg-label-primary">
-            <span className="badge badge-dot bg-primary me-1"></span>
+                <span className="badge badge-dot bg-primary me-1"></span>
-            Active
+                Active
-          </span>
+              </span>
-        ) : (
+            ) : (
-          <span className="badge bg-label-danger">
+              <span className="badge bg-label-danger">
-            <span className="badge badge-dot bg-danger me-1"></span>
+                <span className="badge badge-dot bg-danger me-1"></span>
-            In-Active
+                In-Active
-          </span>
+              </span>
-        ),
+            ),
-      })),
+          })),
 
-      total: api.totalEntities,
+          total: api.totalEntities,
         };
       },
       keepPreviousData: true,
@@ -181,7 +130,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
   const grid = useGridCore({
     columns,
     serverMode: true,
-    initialPageSize: 25,
+    initialPageSize: 10,
   });
 
   const filterPayload = useMemo(() => {
@@ -210,6 +159,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
     toDate,
     isPending,
   });
+
   useEffect(() => {
     if (data) {
       grid.setRows(data.rows);
@@ -218,42 +168,6 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
   }, [data]);
 
   return (
-    // <PmsGrid
-    //   columns={columns}
-    //   serverMode
-    //   fetcher={fetcher}
-    //   rowKey="id"
-    //   features={{
-    //     search: true,
-    //     pagination: true,
-    //     pinning: true,
-    //     resizing: true,
-    //     selection: false,
-    //     reorder: true,
-    //     columnVisibility: true,
-    //     pageSizeSelector: true,
-
-    //     grouping: true,
-    //     groupByKey: "clientSubmitedDate",
-
-    //     aggregation: true,
-    //     IsNumbering: true,
-
-    //     actions: [
-    //       {
-    //         label: "Edit",
-    //         icon: "bx-edit ",
-    //         onClick: (row) => console.log("Edit", row, col),
-    //       },
-    //       {
-    //         label: "Delete",
-    //         icon: "bx-trash text-danger",
-    //         onClick: (row) => console.log("Delete", row),
-    //       },
-    //     ],
-    //   }}
-    // />
-
     <PmsGrid
       columns={columns}
       grid={grid}
@@ -268,6 +182,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         columnVisibility: true,
         pageSizeSelector: true,
         IsNumbering: true,
+        expand: false,
         actions: [
           {
             label: "Edit",
@@ -281,6 +196,11 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
           },
         ],
       }}
+      renderExpanded={(row) => (
+        <div className="p-3 bg-white ">
+          <h6 className="fw-semibold mb-2">Item Details</h6>
+        </div>
+      )}
     />
   );
 };

src/services/pmsGrid/BasicTable.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { PmsGrid } from "./index";
+import { PmsGrid, useGrid, useGridCore } from "./index";
 import { initPopover } from "./GridService";
 import PmsHeaderOption from "./PmsHeaderOption";
 
@@ -705,22 +705,27 @@ const boqColumns = [
  * DEMO COMPONENT
  */
 export default function DemoBOQGrid() {
-  useEffect(() => {
+  const grid = useGridCore({
-    initPopover();
+    columns: boqColumns,
-  }, []);
+    serverMode: false,
-  const wrapperRef = useRef();
+    initialPageSize: 12,
-  useEffect(() => {
+    data: boqData.map((r) => ({
-    if (!wrapperRef.current) return;
+        ...r,
-    const ps = new PerfectScrollbar(wrapperRef.current, {
+        amount: r.quantity * r.rate,
-      wheelPropagation: false,
+      }))
-      suppressScrollX: false,
+  });
-    });
-    return () => ps.destroy();
-  }, []);
 
-  const container = document.getElementById("mainContainer");
+  useEffect(() => {
-  const trigger = document.getElementById("dropdownBtn");
+    if (!boqData || boqData.length === 0) return;
-  const dropdown = document.getElementById("dropdownMenu");
+    grid.setRows(
+      boqData.map((r) => ({
+        ...r,
+        amount: r.quantity * r.rate,
+      }))
+    );
+
+    grid.setTotalRows(boqData.length);
+  }, [boqData]);
 
   return (
     <div className="container-fluid py-3">
@@ -738,10 +743,7 @@ export default function DemoBOQGrid() {
         </div>
 
         <PmsGrid
-          data={boqData.map((r) => ({
+          grid={grid}
-            ...r,
-            amount: r.quantity * r.rate,
-          }))}
           columns={boqColumns}
           features={{
             search: true,
@@ -761,7 +763,8 @@ export default function DemoBOQGrid() {
               {
                 label: "Edit",
                 icon: "bx-edit ",
-                onClick: (row,ind,column) => console.log("Edit", row,ind,column),
+                onClick: (row, ind, column) =>
+                  console.log("Edit", row, ind, column),
               },
               {
                 label: "Delete",

src/services/pmsGrid/PmsGrid.jsx

@@ -147,7 +147,7 @@ export default function PmsGrid({
         isFullScreen ? "card card-action card-fullscreen p-4" : ""
       }`}
     >
-      <div className="row  px-4">
+      <div className="row ">
         <div className="col-8">
           <div className="d-flex flex-row gap-2 gap-2 ">
             <div>

src/services/pmsGrid/useGridCore.js

@@ -43,6 +43,35 @@ export function useGridCore({
     }))
   );
 
+  /* ---------------- SELECTION ---------------- */
+  const toggleSelect = useCallback((id) => {
+    setSelected((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
+  }, []);
+  const selectAllOnPage = useCallback(
+    (rows) => {
+      setSelected((prev) => {
+        const s = new Set(prev);
+        rows.forEach((r) => s.add(r[rowKey]));
+        return s;
+      });
+    },
+    [rowKey]
+  );
+  const deselectAllOnPage = useCallback(
+    (rows) => {
+      setSelected((prev) => {
+        const s = new Set(prev);
+        rows.forEach((r) => s.delete(r[rowKey]));
+        return s;
+      });
+    },
+    [rowKey]
+  );
+
   /* ---------------- SEARCH (DEBOUNCE) ---------------- */
   useEffect(() => {
     const t = setTimeout(() => {
@@ -53,40 +82,46 @@ export function useGridCore({
   }, [search]);
 
   /* ---------------- CLIENT MODE ---------------- */
-  const clientRows = useMemo(() => {
+const filteredData = useMemo(() => {
-    if (serverMode) return [];
+  if (serverMode) return [];
+  let filtered = data;
 
-    let filtered = data;
+  if (search) {
+    const q = search.toLowerCase();
+    filtered = filtered.filter((r) =>
+      Object.values(r).some((v) =>
+        String(v ?? "").toLowerCase().includes(q)
+      )
+    );
+  }
 
-    if (search) {
+  if (sortBy.key) {
-      const q = search.toLowerCase();
+    const dir = sortBy.dir === "asc" ? 1 : -1;
-      filtered = filtered.filter((r) =>
+    filtered = [...filtered].sort(
-        Object.values(r).some((v) =>
+      (a, b) =>
-          String(v ?? "")
+        String(a[sortBy.key] ?? "").localeCompare(
-            .toLowerCase()
+          String(b[sortBy.key] ?? "")
-            .includes(q)
+        ) * dir
-        )
+    );
-      );
+  }
-    }
 
-    if (sortBy.key) {
+  return filtered;
-      const dir = sortBy.dir === "asc" ? 1 : -1;
+}, [data, search, sortBy, serverMode]);
-      filtered = [...filtered].sort(
-        (a, b) =>
-          String(a[sortBy.key] ?? "").localeCompare(
-            String(b[sortBy.key] ?? "")
-          ) * dir
-      );
-    }
 
-    setTotalRows(filtered.length);
-    const start = (page - 1) * pageSize;
-    return filtered.slice(start, start + pageSize);
-  }, [data, search, sortBy, page, pageSize, serverMode]);
 
-  useEffect(() => {
+
-    if (!serverMode) setRows(clientRows);
+const pagedRows = useMemo(() => {
-  }, [clientRows, serverMode]);
+  const start = (page - 1) * pageSize;
+  return filteredData.slice(start, start + pageSize);
+}, [filteredData, page, pageSize]);
+
+useEffect(() => {
+  if (!serverMode) {
+    setRows(pagedRows);
+    setTotalRows(filteredData.length);
+  }
+}, [serverMode, page, pageSize, filteredData.length]);
+
 
   /* ---------------- ADVANCED FILTER ---------------- */
   const setColumnAdvanceFilter = useCallback((column, filter) => {
@@ -148,35 +183,41 @@ export function useGridCore({
     setSearch,
     debouncedSearch,
 
-    /* sorting */
+    /* ----------sorting------ */
     sortBy,
     changeSort,
 
-    /* grouping */
+    /* --------------grouping---------------- */
     groupBy,
     setGroupBy,
 
-    /* advanced filter */
+    /* --------------advanced filter----------------- */
     advanceFilters,
     setColumnAdvanceFilter,
 
-    /* selection */
+    /*--------- selection ---------------------- */
     selected,
     setSelected,
+    toggleSelect,
+    selectAllOnPage,
+    deselectAllOnPage,
+
+    // *------------- Expanding Row --------------*/
     expanded,
     setExpanded,
 
-    /* columns */
+    /* --------------columns--------------------- */
     colState,
     visibleColumns,
     updateColumn,
     setColState,
     toggleExpand,
-    /* data */
+
+    /* ---------------data---------------------- */
     rows,
     setRows,
     setTotalRows,
-
+    /*------------Key and grid-mode-------------*/
     serverMode,
     rowKey,
   };