From d839f631f877110a4b78578f38db8914862f52c6 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Mon, 3 Nov 2025 00:13:38 +0530
Subject: [PATCH] added sytle for table

---
 src/router/AppRoutes.jsx          |   3 +-
 src/services/pmsGrid/PmsGrid.jsx  |  40 ++++--
 src/services/pmsGrid/pms-grid.css | 213 ++++++++++++++++++++++++------
 3 files changed, 202 insertions(+), 54 deletions(-)

diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx
index 04bdf208..51cc761e 100644
--- a/src/router/AppRoutes.jsx
+++ b/src/router/AppRoutes.jsx
@@ -75,6 +75,8 @@ const router = createBrowserRouter(
       ],
     },
     { path: "/auth/switch/org", element: <TenantSelectionPage /> },
+             { path: "/help/docs", element: <DemoBOQGrid /> },
+
     {
       element: <ProtectedRoute />,
       errorElement: <ErrorPage />,
@@ -107,7 +109,6 @@ const router = createBrowserRouter(
             { path: "/tenant/self", element: <SelfTenantDetails /> },
             { path: "/organizations", element: <OrganizationPage /> },
             { path: "/help/support", element: <Support /> },
-             { path: "/help/docs", element: <DemoBOQGrid /> },
             
           ],
         },
diff --git a/src/services/pmsGrid/PmsGrid.jsx b/src/services/pmsGrid/PmsGrid.jsx
index ee5674ea..aa9d6762 100644
--- a/src/services/pmsGrid/PmsGrid.jsx
+++ b/src/services/pmsGrid/PmsGrid.jsx
@@ -135,7 +135,7 @@ export default function PmsGrid({
 
   return (
     <div className="pms-grid">
-      {/* <div className="row  mb-2">
+      <div className="row  mb-2">
         <div className="col-8">
           <div className="d-flex flex-row gap-2 gap-2 ">
             <div>
@@ -192,20 +192,26 @@ export default function PmsGrid({
             )}
           </div>
         </div>
-      </div> */}
+      </div>
       <div
         ref={wrapperRef}
-        className="grid-wrapper text-nowrap border rounded" 
+        className="grid-wrapper text-nowrap border rounded"
         style={{ maxHeight: features.maxHeight || "60vh" }}
       >
-        <table className="table table-sm roudned mb-0">
+        <table
+          className="table table-sm rounded mb-0"
+          style={{ width: "max-content", minWidth: "100%" }}
+        >
           <thead
             className="bg-light-secondary border p-2 bg-light rounded"
             style={{ position: "sticky", top: 0, zIndex: 10 }}
           >
             <tr className="p-3">
               {features.selection && (
-                <th style={{ width: 32,position: "sticky", top: 0, zIndex: 10  }} className="text-center ticky-action-column">
+                <th
+                  style={{ width: 32, position: "sticky", top: 0, zIndex: 10 }}
+                  className="text-center ticky-action-column"
+                >
                   <input
                     type="checkbox"
                     className="form-check-input mx-3"
@@ -231,6 +237,7 @@ export default function PmsGrid({
                   style.left = `${getLeftOffset(colState, col.key)}px`;
                 if (col.pinned === "right")
                   style.right = `${getRightOffset(colState, col.key)}px`;
+
                 return (
                   <th
                     key={col.key}
@@ -239,11 +246,15 @@ export default function PmsGrid({
                     onDragOver={(e) => e.preventDefault()}
                     onDrop={(e) => onDrop(e, col.key)}
                     className={`pms-col-header vs-th ${
-                      col.pinned ? "pinned z-6" : ""
+                      col.pinned ? `pinned pinned-${col.pinned}` : ""
                     }`}
                     style={style}
                   >
-                    <div className={`d-flex align-items-center justify-content-between px-1 ${col.pinned ? "z-6":""}`}>
+                    <div
+                      className={`d-flex align-items-center justify-content-between px-1 ${
+                        col.pinned ? "z-6" : ""
+                      }`}
+                    >
                       <div
                         onClick={() => col.sortable && changeSort(col.key)}
                         style={{ cursor: col.sortable ? "pointer" : "default" }}
@@ -259,6 +270,7 @@ export default function PmsGrid({
                           ></i>
                         )}
                       </div>
+
                       <div className="d-flex align-items-center gap-1">
                         {features.pinning && (
                           <button
@@ -271,7 +283,7 @@ export default function PmsGrid({
                         )}
                         {features.resizing && (
                           <i
-                            className="resize-handle bx bx bx-move-horizontal "
+                            className="resize-handle bx bx-move-horizontal"
                             onMouseDown={(e) => onResizeMouseDown(e, col.key)}
                           ></i>
                         )}
@@ -280,6 +292,7 @@ export default function PmsGrid({
                   </th>
                 );
               })}
+
               {features.actions && (
                 <th
                   className="text-center sticky-action-column vs-th bg-white fw-semibold"
@@ -371,12 +384,9 @@ export default function PmsGrid({
 
     return (
       <React.Fragment key={row[rowKey]}>
-        <tr
-          
-    
-        >
+        <tr>
           {features.selection && (
-            <td className="text-center p-2 .sticky-action-column" >
+            <td className="text-center p-2 .sticky-action-column">
               <input
                 type="checkbox"
                 className="form-check-input"
@@ -403,7 +413,9 @@ export default function PmsGrid({
                 key={col.key}
                 style={style}
                 className={`${col.className ?? ""} ${
-                  col.pinned ? "pinned-left px-3 bg-white pms-grid td pinned" : "px-3"
+                  col.pinned
+                    ? "pinned-left px-3 bg-white pms-grid td pinned"
+                    : "px-3"
                 }`}
               >
                 {col.render ? col.render(row) : row[col.key] ?? ""}
diff --git a/src/services/pmsGrid/pms-grid.css b/src/services/pmsGrid/pms-grid.css
index 96f6c733..90d658e1 100644
--- a/src/services/pmsGrid/pms-grid.css
+++ b/src/services/pmsGrid/pms-grid.css
@@ -1,62 +1,197 @@
+/* ──────────────────────────────
+   PMS GRID – MAIN CONTAINER
+────────────────────────────── */
+.pms-grid {
+  width: 100%;
+  position: relative;
+  font-size: 0.875rem;
+}
 
-
+/* ──────────────────────────────
+   SCROLLABLE WRAPPER
+────────────────────────────── */
 .grid-wrapper {
   max-height: 60vh;
   overflow-y: auto;
   overflow-x: auto;
   position: relative;
+  border: 1px solid #dee2e6;
+  border-radius: 0.2rem;
+  background: #fff;
+  /* ✅ Force horizontal scroll even if few columns */
+  white-space: nowrap;
 }
 
-.grid-wrapper thead {
+/* ✅ Always visible scrollbar (cross browser) */
+.grid-wrapper::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+}
+.grid-wrapper::-webkit-scrollbar-thumb {
+  background-color: #adb5bd;
+  border-radius: 4px;
+}
+.grid-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: #868e96;
+}
+
+/* ──────────────────────────────
+   TABLE BASE STYLE
+────────────────────────────── */
+.pms-grid table {
+  width: max-content; /* ✅ allows scrolling horizontally */
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  background: #fff;
+}
+
+.pms-grid th,
+.pms-grid td {
+  padding: 8px 12px !important;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ──────────────────────────────
+   HEADER (STICKY)
+────────────────────────────── */
+.pms-grid thead th {
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: 6;
   background: #fff;
+  border-bottom: 1px solid #dee2e6;
+  font-weight: 600;
+  box-shadow: inset 0 -1px 0 #dee2e6;
 }
 
-.resize-handle {
-  width: 10px;
-  height: 28px;
-  cursor: col-resize;
-  display: inline-block;
-  opacity: 0;          
-  transition: opacity 0.2s;
-}
-
-.resize-handle:hover {
-  opacity: 1;   color: white;    
-}
-
- .grid-wrapper thead th{
-  padding: 12px 15px !important;
-}
-.pms-col-header.pinned {
-  background: #fff;
-  z-index: 4;
-}
-
-.sticky-action-column {
-  position: sticky;
-  right: 0;
-  z-index: 5;
-  background: #fff;
-}
+/* ──────────────────────────────
+   PINNED COLUMNS
+────────────────────────────── */
 .pms-grid td.pinned,
 .pms-grid th.pinned {
   position: sticky;
   background: #fff;
-  z-index: 2; 
-  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); 
-  border-right: 1px solid #dee2e6 !important; 
+  z-index: 5;
+  border-right: 1px solid #dee2e6 !important;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
 }
-.pms-grid td.pinned-left,
-.pms-grid th.pinned-left {
-  z-index: 3;
+
+/* ✅ Always sticky first column (checkbox) */
+.pms-grid th:first-child,
+.pms-grid td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 8;
+  background: #fff;
+  width: 40px;
+  min-width: 40px;
+  text-align: center;
   box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08);
 }
 
-.pms-grid td.pinned-right,
-.pms-grid th.pinned-right {
-  z-index: 3;
+/* ✅ Always sticky last column (Actions) */
+.pms-grid th:last-child,
+.pms-grid td:last-child {
+  position: sticky;
+  right: 0;
+  z-index: 8;
+  background: #fff;
+  box-shadow: -2px 0 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ──────────────────────────────
+   RESIZE HANDLE
+────────────────────────────── */
+.resize-handle {
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.2s;
+  color: #0d6efd;
+}
+
+.pms-col-header:hover .resize-handle {
+  opacity: 1;
+}
+
+.resize-handle::after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 16px;
+  background: #adb5bd;
+  margin: 0 auto;
+}
+
+/* ──────────────────────────────
+   ROW HIGHLIGHT
+────────────────────────────── */
+.pms-grid tbody tr:hover {
+  background-color: #f8f9fa;
+}
+
+.pms-grid tbody tr.table-active {
+  background-color: #e9f5ff !important;
+}
+
+.pms-grid tbody td {
+  background: #fff;
+}
+
+/* ──────────────────────────────
+   MISC FIXES
+────────────────────────────── */
+.vs-th {
+  background: #f8f9fa;
+}
+.text-center {
+  text-align: center !important;
+}
+.z-6 {
+  z-index: 6 !important;
+}
+/* ──────────────────────────────
+   PINNED HEADER COLUMNS (Fix for misalignment)
+────────────────────────────── */
+
+/* Left pinned header cells */
+.pms-grid th.pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 9;
+  background: #fff;
+  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Right pinned header cells */
+.pms-grid th.pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 9;
+  background: #fff;
+  box-shadow: -2px 0 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Match body pinned cell behavior */
+.pms-grid td.pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 8;
+  background: #fff;
+  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08);
+}
+
+.pms-grid td.pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 8;
+  background: #fff;
   box-shadow: -2px 0 3px rgba(0, 0, 0, 0.08);
 }