playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6462

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,46 @@
     width: 100%;
   }
 
-    .row-selection-actions-card {
-      border-bottom-right-radius: 0px !important;
-      border-bottom-left-radius: 0px !important;
-      border-bottom-color: transparent;
-      transition: height 300ms ease;
+  // Virtualized table styles
+  .virtualized-table-row {
+    display: table !important;
+    table-layout: fixed !important;
+    width: 100% !important;
+
+    td {
+      display: table-cell !important;
+      box-sizing: border-box !important;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+
+    // Ensure the first column has proper width
+    td:first-child {
+      min-width: 180px;
+    }
+
+    // First column (typically the checkbox column)
+    td:first-child.checkbox-cell {
+      width: 40px !important; // Set a fixed width that matches header
+      min-width: 40px !important;
+      box-sizing: border-box !important;
+      text-align: center;
+    }
+
+    // Ensure the first data column has proper alignment with header
+    td:first-of-type:not(.checkbox-cell) {
+      min-width: 180px;
+      text-align: left;
+    }
+  }
+
+  .row-selection-actions-card {
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
+    border-bottom-color: transparent;
+    transition: height 300ms ease;
+  }
   .table-header-cells:first-child {
     min-width: 180px;
   }
@@ -67,6 +101,23 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
+
+    // Set fixed width for header cells to match table body
+    th {
+      box-sizing: border-box !important;
+      // Apply min-width to ensure consistent sizing
+      &.table-header-cells:first-child,
+      &.table-header-cells-custom:first-child {
+        min-width: 180px;
+      }
+
+      // Set fixed width for checkbox column
+      &.table-header-cells-custom {
+        width: 40px !important;
+        min-width: 40px !important;
+        box-sizing: border-box !important;
+      }
+    }
   }
 
   .pb_advanced_table_body {
@@ -87,12 +138,74 @@
         padding-left: 0px;
       }
     }
+
+    // Virtualization specific styles for the table body
+    position: relative;
+
+    // Fix virtualized row borders
+    tr.virtualized-table-row {
+      border-bottom: 1px solid $border_light;
+
+      &.bg-silver {
+        td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+      }
+
+      &.bg-white {
+        td:first-child {
+          background-color: $white;
+        }
+      }
+
+      &.bg-row-selection {
+        td:first-child {
+          background-color: $info_subtle;
+        }
+      }
+    }
   }
 
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
 
+  // Sticky Header
+  .sticky-header {
+    thead {
+      z-index: 3 !important;
+    }
+  }
+
+  // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
+  &.advanced-table-max-height-xs {
+    max-height: 320px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-sm {
+    max-height: 480px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-md {
+    max-height: 768px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-lg {
+    max-height: 1024px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xl {
+    max-height: 1280px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xxl {
+    max-height: 1440px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xxxl {
+    max-height: 1920px;
+    overflow-y: auto;
+  }
   // Icons
   .button-icon {
     display: flex;
@@ -215,6 +328,39 @@
           background-color: $white;
       }
 
+      .virtualized-table-row {
+        &.bg-silver td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+        &.bg-white td:first-child {
+          background-color: $white;
+        }
+        &.bg-row-selection td:first-child {
+          background-color: $info_subtle;
+        }
+      }
+
+      .row-selection-actions-card {
+        border-right-width: 0px;
+        border-left-width: 0px;
+        position: sticky;
+        top: 0;
+        left: 0;
+        border-radius: unset;
+      }
+      .checkbox-cell {
+        display: table-cell !important;
+      }
+      .sticky-header {
+        thead {
+          th:first-child {
+            box-shadow: 1px 0 10px -2px $border_light !important;
+          }
+        }
+        .pb_advanced_table_header {
+          box-shadow: none !important;
+        }
+      }
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -232,6 +378,25 @@
       background: $bg_dark;
     }
 
+    // Dark mode virtualized rows
+    .virtualized-table-row {
+      &.bg-white {
+        background: $bg_dark_card !important;
+
+        td:first-child {
+          background: $bg_dark_card !important;
+        }
+      }
+
+      &.bg-silver {
+        background: $bg_dark;
+
+        td:first-child {
+          background: $bg_dark;
+        }
+      }
+    }
+
     .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
@@ -302,7 +467,26 @@
         .bg-white td:first-child {
           background-color: $bg_dark_card;
         }
+
+        // Dark mode virtualized rows
+        .virtualized-table-row {
+          &.bg-silver td:first-child {
+            background-color: $bg_dark;
+          }
+          &.bg-white td:first-child {
+            background-color: $bg_dark_card;
+          }
+        }
+
+        .sticky-header {
+          thead {
+            th:first-child {
+              background: $bg_dark;
+              box-shadow: 1px 0 10px -2px $border_dark !important;
+            }
+          }
+        }
       }
     }
   }
-}
+}