upgrade pms action cell

src/services/pmsGrid/PmsGrid.jsx

@@ -234,6 +234,25 @@ export default function PmsGrid({
                     }
                   />
                 </th>
+              )}
+                  {features.expand && (
+                <th
+                  className="text-center ticky-action-column"
+                >
+                  <input
+                    type="checkbox"
+                    className="form-check-input mx-3"
+                    checked={
+                      currentRows.length > 0 &&
+                      currentRows.every((r) => selected.has(r[rowKey]))
+                    }
+                    onChange={(e) =>
+                      e.target.checked
+                        ? selectAllOnPage(currentRows)
+                        : deselectAllOnPage(currentRows)
+                    }
+                  />
+                </th>
               )}
               {visibleColumns.map((col) => {
                 const style = {
@@ -303,7 +322,7 @@ export default function PmsGrid({
 
               {features.actions && (
                 <th
-                  className="text-center sticky-action-column vs-th bg-white fw-semibold"
+                  className="text-center sticky-action-column vs-th bg-white fw-semibold th-lastChild"
                   style={{ position: "sticky", right: 0, zIndex: 10 }}
                 >
                   Actions
@@ -389,12 +408,14 @@ export default function PmsGrid({
   // render a single row (function hoisted so it can reference visibleColumns)
  function renderRow(row) {
   const isSelected = selected.has(row[rowKey]);
+  const isExpanded = expanded.has(row[rowKey]);
 
   return (
     <React.Fragment key={row[rowKey]}>
       <tr>
+        {/*  Selection checkbox (always left) */}
         {features.selection && (
-            <td className="text-center p-2 .sticky-action-column">
+          <td className="text-center align-middle p-2">
             <input
               type="checkbox"
               className="form-check-input"
@@ -404,6 +425,24 @@ export default function PmsGrid({
           </td>
         )}
 
+        {/*  Expand toggle next to selection */}
+        {features.expand && (
+          <td className="text-center align-middle p-2">
+            <button
+              type="button"
+              className="btn btn-link p-0 border-0 text-secondary"
+              onClick={() => toggleExpand(row[rowKey])}
+            >
+              <i
+                className={`bx ${
+                  isExpanded ? "bxs-chevron-up" : "bxs-chevron-down"
+                } bx-sm`}
+              ></i>
+            </button>
+          </td>
+        )}
+
+        {/*  Data columns */}
         {visibleColumns.map((col) => {
           const style = {
             minWidth: col.width || 120,
@@ -431,9 +470,10 @@ export default function PmsGrid({
           );
         })}
 
+        {/*   Actions column (always right) */}
         {features.actions && (
           <td
-              className="text-center sticky-action-column bg-white"
+            className="text-center sticky-action-column bg-white td-lastChild"
             style={{
               position: "sticky",
               right: 0,
@@ -469,12 +509,14 @@ export default function PmsGrid({
         )}
       </tr>
 
-        {features.expand && expanded.has(row[rowKey]) && renderExpanded && (
+      {/* 🔹 5. Expanded row content (full width) */}
+      {isExpanded && renderExpanded && (
         <tr className="table-active">
           <td
             colSpan={
               visibleColumns.length +
               (features.selection ? 1 : 0) +
+              (features.expand ? 1 : 0) +
               (features.actions ? 1 : 0)
             }
           >
@@ -484,7 +526,8 @@ export default function PmsGrid({
       )}
     </React.Fragment>
   );
-  }
+}
+
 }
 
 // small helpers to compute sticky offsets

src/services/pmsGrid/pms-grid.css

@@ -102,8 +102,8 @@
 }
 
 /*  Always sticky last column (Actions) */
-.pms-grid th:last-child,
-.pms-grid td:last-child {
+.pms-grid .th-lastChild,
+.pms-grid .td-lastChild {
   position: sticky;
   right: 0;
   z-index: 8;