added serverside groupging

src/services/pmsGrid/PmsGrid.jsx

@@ -39,6 +39,7 @@ export default function PmsGrid({
     setPage,
     setPageSize,
     setGroupBy,
+    groupBy,
     search,
     setSearch,
     selected,
@@ -117,7 +118,7 @@ export default function PmsGrid({
   };
 
   // group & aggregate (simple client-side grouping by column key)
-  const groupBy = features.groupByKey || null;
+  // const groupBy = features.groupByKey || null;
   const groupedRows = React.useMemo(() => {
     if (!groupBy) return null;
     const map = {};
@@ -187,7 +188,10 @@ export default function PmsGrid({
                       <li
                         key={c.key}
                         className="dropdown-item rounded py-1 cursor-pointer"
-                        onClick={() => setGroupBy(c.key)}
+                        onClick={() => {
+                          setGroupBy(c.key);
+                          groupByKey = c.key;
+                        }}
                       >
                         {c.title}
                       </li>
@@ -552,7 +556,7 @@ export default function PmsGrid({
           )}
         </tr>
 
-        {/* 🔹 5. Expanded row content (full width) */}
+        {/*  5. Expanded row content (full width) */}
         {isExpanded && renderExpanded && (
           <tr className="table-active">
             <td

src/services/pmsGrid/PmsHeaderOption.jsx

@@ -11,6 +11,8 @@
 //         <i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
 //       </button>
 
+import { useEffect } from "react";
+
 //       <ul className="dropdown-menu dropdown-menu-end border shadow rounded-3 py-2">
 //         <li>
 //           <button
@@ -53,6 +55,43 @@
 // };
 // export default PmsHeaderOption;
 const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
+  const toggleSubmenu = (e) => {
+    e.stopPropagation();
+
+    const currentSubMenu = e.currentTarget.nextElementSibling;
+    if (!currentSubMenu) return;
+
+    const allSubMenus = document.querySelectorAll(
+      ".dropdown-submenu > .dropdown-menu"
+    );
+
+    allSubMenus.forEach((menu) => {
+      if (menu !== currentSubMenu) {
+        menu.classList.remove("show");
+      }
+    });
+
+    currentSubMenu.classList.toggle("show");
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = () => {
+      const allSubMenus = document.querySelectorAll(
+        ".dropdown-submenu > .dropdown-menu"
+      );
+
+      allSubMenus.forEach((menu) => {
+        menu.classList.remove("show");
+      });
+    };
+
+    document.addEventListener("click", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, []);
+
   return (
     <div className="dropdown" style={{ zIndex: 9999 }}>
       <button
@@ -69,18 +108,62 @@ const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
           <button
             type="button"
             className="dropdown-item d-flex align-items-center justify-content-between"
-            onClick={(e) => {
+            onClick={toggleSubmenu}
-              e.stopPropagation();
-              e.currentTarget.nextElementSibling.classList.toggle("show");
-            }}
           >
             <span>
-              <i className="bx bx-pin me-2"></i> Pin
+              <i className="bx bx-left-arrow-alt me-2"></i>
+              Move Column
+            </span>
+            <i className="bx bx-chevron-left"></i>
+          </button>
+
+          <ul className="dropdown-menu border shadow rounded-3 py-2">
+            <li>
+              <button
+                className="dropdown-item d-flex align-items-center"
+                onClick={() => console.log("Move Left")}
+              >
+                <i className="bx bx-arrow-to-left me-2"></i>
+                Move Left
+              </button>
+            </li>
+
+            <li>
+              <button
+                className="dropdown-item d-flex align-items-center"
+                onClick={() => console.log("Move Right")}
+              >
+                <i className="bx bx-arrow-to-right me-2"></i>
+                Move Right
+              </button>
+            </li>
+          </ul>
+        </li>
+
+        <li className="dropdown-submenu dropstart">
+          <button
+            type="button"
+            className="dropdown-item d-flex align-items-center justify-content-between"
+            onClick={toggleSubmenu}
+          >
+            <span>
+              <i className="bx bx-pin me-2"></i> Pin Column
             </span>
             <i className="bx bx-chevron-right"></i>
           </button>
 
           <ul className="dropdown-menu border shadow rounded-3 py-2">
+            <li>
+              <button
+                className="dropdown-item  d-flex align-items-center"
+                onClick={onUnpin}
+              >
+                {pinned !== "left" && pinned !== "right" && (
+                  <i className="bx bx-check me-2"></i>
+                )}
+                No Pin
+              </button>
+            </li>
             <li>
               <button
                 className={`dropdown-item d-flex align-items-center ${
@@ -88,50 +171,24 @@ const PmsHeaderOption = ({ pinned, onPinLeft, onPinRight, onUnpin }) => {
                 }`}
                 onClick={onPinLeft}
               >
-                <i className="bx bx-left-arrow-alt me-2"></i>
+                {pinned === "left" && <i className="bx bx-check me-2"></i>}
-                Left
+                Pin Left
               </button>
             </li>
 
-            <li>
+            <li className="d-flex flex-row gap-2">
               <button
                 className={`dropdown-item d-flex align-items-center ${
                   pinned === "right" ? "active" : ""
                 }`}
                 onClick={onPinRight}
               >
-                <i className="bx bx-right-arrow-alt me-2"></i>
+                {pinned === "right" && <i className="bx bx-check me-2"></i>}
-                Right
+                Pin Right
               </button>
             </li>
           </ul>
         </li>
-        <li>
-          <button
-            className={`dropdown-item d-flex align-items-center ${
-              pinned === "left" ? "active" : ""
-            }`}
-          >
-            <i className="bx bx-left-arrow-alt me-2"></i>
-          </button>
-        </li>
-
-        {pinned && (
-          <>
-            <li>
-              <hr className="dropdown-divider" />
-            </li>
-            <li>
-              <button
-                className="dropdown-item text-danger d-flex align-items-center"
-                onClick={onUnpin}
-              >
-                <i className="bx bx-x me-2"></i>
-                Unpin Column
-              </button>
-            </li>
-          </>
-        )}
       </ul>
     </div>
   );