added onCell click event

src/components/collections/PmGridCollection.jsx

@@ -12,6 +12,9 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
       className: "text-start",
       groupable: true,
       enableAdvancedFilter: false,
+      onCellClick: (row, column) => {
+        console.log("Clicked cell:", row, column);
+      },
     },
     {
       key: "title",
@@ -123,7 +126,7 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
           {
             label: "Edit",
             icon: "bx-edit ",
-            onClick: (row) => console.log("Edit", row),
+            onClick: (row) => console.log("Edit", row, col),
           },
           {
             label: "Delete",

src/services/pmsGrid/BasicTable.jsx

@@ -216,7 +216,8 @@ const boqData = [
     id: 18,
     category: "Waterproofing Works",
     itemCode: "W-002",
-    description: "Polyurethane Waterproofing Membrane Polyurethane Waterproofing Membrane",
+    description:
+      "Polyurethane Waterproofing Membrane Polyurethane Waterproofing Membrane",
     unit: "Sqm",
     quantity: 200,
     rate: 850,
@@ -610,7 +611,6 @@ const boqData = [
   },
 ];
 
-
 /**
  * COLUMN DEFINITIONS
  */
@@ -718,30 +718,24 @@ export default function DemoBOQGrid() {
     return () => ps.destroy();
   }, []);
 
-
-
   const container = document.getElementById("mainContainer");
-const trigger = document.getElementById("dropdownBtn");
+  const trigger = document.getElementById("dropdownBtn");
-const dropdown = document.getElementById("dropdownMenu");
+  const dropdown = document.getElementById("dropdownMenu");
-
-trigger.addEventListener("click", () => {
-  dropdown.classList.toggle("show");
-  autoPositionInsideContainer(trigger, dropdown, container);
-});
 
   return (
     <div className="container-fluid py-3">
       <div className="card p-3">
         <div id="mainContainer" class="container-box">
-  <button id="dropdownBtn" class="btn">Open Dropdown</button>
+          <button id="dropdownBtn" class="btn">
-
+            Open Dropdown
-  <div id="dropdownMenu" class="dropdown-menu">
+          </button>
-    <div>Option 1</div>
-    <div>Option 2</div>
-    <div>Option 3</div>
-  </div>
-</div>
 
+          <div id="dropdownMenu" class="dropdown-menu">
+            <div>Option 1</div>
+            <div>Option 2</div>
+            <div>Option 3</div>
+          </div>
+        </div>
 
         <PmsGrid
           data={boqData.map((r) => ({
@@ -767,14 +761,13 @@ trigger.addEventListener("click", () => {
               {
                 label: "Edit",
                 icon: "bx-edit ",
-                onClick: (row) => console.log("Edit", row),
+                onClick: (row,ind,column) => console.log("Edit", row,ind,column),
               },
               {
                 label: "Delete",
                 icon: "bx-trash text-danger",
                 onClick: (row) => console.log("Delete", row),
               },
-           
             ],
           }}
           renderExpanded={(row) => (

src/services/pmsGrid/PmsGrid.jsx

@@ -24,6 +24,7 @@ export default function PmsGrid({
   renderExpanded,
 }) {
   const [isFullScreen, setFullScreen] = useState(false);
+  const [activeCell, setActiveCell] = useState(null);
   const grid = useGridCore({
     data,
     serverMode,
@@ -380,11 +381,14 @@ export default function PmsGrid({
                     >
                       <div className=" d-flex justify-content-center align-items-center vh-50">
                         <div>
-                        {loading ? (<p>Loading...</p>):(<img
+                          {loading ? (
-                            src="/img/illustrations/NoSearchResult.svg"
+                            <p>Loading...</p>
-                            alt="Image"
+                          ) : (
-                          />) }  
+                            <img
-                        
+                              src="/img/illustrations/NoSearchResult.svg"
+                              alt="Image"
+                            />
+                          )}
                         </div>
                       </div>
                     </td>
@@ -523,11 +527,19 @@ export default function PmsGrid({
               <td
                 key={col.key}
                 style={style}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setActiveCell({
+                    rowId: row[rowKey],
+                    columnKey: col.key,
+                  });
+                  col.onCellClick && col.onCellClick(row, col);
+                }}
                 className={`${col.className ?? ""} ${
                   col.pinned
                     ? "pinned-left px-3 bg-white pms-grid td pinned"
                     : "px-3"
-                }`}
+                }  ${activeCell?.rowId == row.id && activeCell.columnKey === col.key ? "grid-cell-active" : ""} cursor-pointer`}
               >
                 {col.render ? col.render(row) : row[col.key] ?? ""}
               </td>

src/services/pmsGrid/pms-grid.css

@@ -215,6 +215,12 @@
   
 
 }
+.grid-cell-active {
+  outline: 1px solid #696cff;   /* Sneat primary */
+  outline-offset: -2px;
+  background-color: #f5f6ff;
+}
+