added basic column agg. feature

src/services/pmsGrid/BasicTable.jsx

@@ -717,10 +717,31 @@ export default function DemoBOQGrid() {
     });
     return () => ps.destroy();
   }, []);
+
+
+
+  const container = document.getElementById("mainContainer");
+const trigger = document.getElementById("dropdownBtn");
+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>
+
+  <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) => ({

src/services/pmsGrid/pms-grid.css

@@ -255,3 +255,35 @@
 }
 
 
+.container-box {
+  width: 400px;       /* your container */
+  border: 1px solid #ccc;
+  padding: 20px;
+  position: relative; /* IMPORTANT */
+}
+
+.btn {
+  padding: 8px 12px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 40px;
+  min-width: 150px;
+  background: white;
+  border: 1px solid #ccc;
+  display: none;
+  padding: 10px;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-menu.open-right {
+  left: 0;
+}
+
+.dropdown-menu.open-left {
+  right: 0;
+}

src/services/pmsGrid/utils.js

@@ -17,3 +17,27 @@ export function exportToCSV(rows = [], columns = [], filename = "export.csv") {
   link.click();
   document.body.removeChild(link);
 }
+
+function autoPositionInsideContainer(triggerEl, dropdownEl, containerEl) {
+  const triggerRect = triggerEl.getBoundingClientRect();
+  const dropdownWidth = dropdownEl.offsetWidth;
+  const containerRect = containerEl.getBoundingClientRect();
+
+  const spaceRight = containerRect.right - triggerRect.right;
+  const spaceLeft = triggerRect.left - containerRect.left;
+
+  if (spaceRight < dropdownWidth && spaceLeft > dropdownWidth) {
+    // Open to LEFT
+    dropdownEl.style.left = "";
+    dropdownEl.style.right = "0px";
+    dropdownEl.classList.add("open-left");
+    dropdownEl.classList.remove("open-right");
+  } else {
+    // Open to RIGHT
+    dropdownEl.style.right = "";
+    dropdownEl.style.left = "0px";
+    dropdownEl.classList.add("open-right");
+    dropdownEl.classList.remove("open-left");
+  }
+}
+