added dropdown mode

src/components/collections/PmGridCollection.jsx

@@ -76,14 +76,12 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         ),
       })),
 
-      // MUST use totalRows only
       total: api.totalEntities,
     };
   };
 
   return (
     <PmsGrid
-      
       columns={columns}
       serverMode
       fetcher={fetcher}
@@ -102,6 +100,19 @@ const PmGridCollection = ({ selectedProject, fromDate, toDate, isPending }) => {
         pinning: true,
         IsNumbering: true,
         grouping: true,
+               actions: [
+              {
+                label: "Edit",
+                icon: "bx-edit ",
+                onClick: (row) => console.log("Edit", row),
+              },
+              {
+                label: "Delete",
+                icon: "bx-trash text-danger",
+                onClick: (row) => console.log("Delete", row),
+              },
+           
+            ]
       }}
     />
   );

src/services/pmsGrid/PmsGrid.jsx

@@ -18,6 +18,7 @@ export default function PmsGrid({
   serverMode = false,
   fetcher,
   rowKey = "id",
+  isDropdown = false,
   features = {},
   renderExpanded,
 }) {
@@ -390,7 +391,7 @@ export default function PmsGrid({
             {!loading && groupBy && groupedRows && groupedRows.length > 0
               ? groupedRows.map((g) => (
                   <React.Fragment key={g.key}>
-                    <tr className="table-secondary border-0">
+                    <tr className="table-secondary border-0 tr-group" >
                       <td
                         colSpan={
                           visibleColumns.length +
@@ -529,6 +530,36 @@ export default function PmsGrid({
                 whiteSpace: "nowrap",
               }}
             >
+              {isDropdown ? (
+                <div className="dropdown z-2">
+                  <button
+                    type="button"
+                    className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                  >
+                    <i
+                      className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                      data-bs-toggle="tooltip"
+                      data-bs-offset="0,8"
+                      data-bs-placement="top"
+                      data-bs-custom-class="tooltip-dark"
+                      title="More Action"
+                    ></i>
+                  </button>
+                  <ul className="dropdown-menu dropdown-menu-end">
+                    <li>
+                      <a
+                        aria-label="click to  View details"
+                        className="dropdown-item"
+                      >
+                        <i className="bx bx-detail me-2"></i>
+                        <span className="align-left">View details</span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              ) : (
                 <div
                   className="d-inline-flex justify-content-center align-items-center gap-2"
                   style={{ minWidth: "fit-content", padding: "0 4px" }}
@@ -552,6 +583,7 @@ export default function PmsGrid({
                     ? features.actions(row, toggleExpand)
                     : null}
                 </div>
+              )}
             </td>
           )}
         </tr>