playbook_ui 14.11.0.pre.rc.5 → 14.11.0.pre.rc.7

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,7 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
     private stickyLeftColumns: string[] = [];
-    private handleStickyColumnsRef: () => void;
+    private handleStickyLeftColumnsRef: () => void;
 
     static get selector(): string {
       return '.table-responsive-collapse'
@@ -31,10 +31,10 @@ export default class PbTable extends PbEnhancedElement {
       });
 
       // New sticky columns logic
-      this.initStickyColumns();
+      this.initStickyLeftColumns();
     }
 
-    private initStickyColumns(): void {
+    private initStickyLeftColumns(): void {
       // Find tables with sticky-left-column class
       const tables = document.querySelectorAll('.sticky-left-column');
 
@@ -52,16 +52,16 @@ export default class PbTable extends PbEnhancedElement {
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-              this.handleStickyColumns();
-              window.addEventListener('resize', this.handleStickyColumnsRef);
+              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
+              this.handleStickyLeftColumns();
+              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
             }, 10);
           }
         }
       });
     }
 
-    private handleStickyColumns(): void {
+    private handleStickyLeftColumns(): void {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
@@ -74,11 +74,11 @@ export default class PbTable extends PbEnhancedElement {
           (header as HTMLElement).style.left = `${accumulatedWidth}px`;
 
           if (!isLastColumn) {
-            header.classList.add('with-border');
-            header.classList.remove('sticky-shadow');
+            header.classList.add('with-border-right');
+            header.classList.remove('sticky-left-shadow');
           } else {
-            header.classList.remove('with-border');
-            header.classList.add('sticky-shadow');
+            header.classList.remove('with-border-right');
+            header.classList.add('sticky-left-shadow');
           }
 
           accumulatedWidth += (header as HTMLElement).offsetWidth;
@@ -89,11 +89,11 @@ export default class PbTable extends PbEnhancedElement {
           (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
           if (!isLastColumn) {
-            cell.classList.add('with-border');
-            cell.classList.remove('sticky-shadow');
+            cell.classList.add('with-border-right');
+            cell.classList.remove('sticky-left-shadow');
           } else {
-            cell.classList.remove('with-border');
-            cell.classList.add('sticky-shadow');
+            cell.classList.remove('with-border-right');
+            cell.classList.add('sticky-left-shadow');
           }
         });
       });
@@ -101,8 +101,8 @@ export default class PbTable extends PbEnhancedElement {
 
     // Cleanup method to remove event listener
     disconnect(): void {
-      if (this.handleStickyColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyColumnsRef);
+      if (this.handleStickyLeftColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
       }
     }
 }

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -8,8 +8,24 @@
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
             border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light
-          }
+            box-shadow: 1px 0 0 0px $border_light,
+                        -1px 0 0 0px $border_light
+        }
+
+        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
+        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+            border-left-width: 0px;
+        }
+
+        &[class^=pb_table].table-md.table-card thead tr th:first-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
+            border-left-width: 0px;
+        }
+
+        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
+            border-left-width: 0px;
+        }
 
         &[class^=pb_table].table-sm.table-card thead tr th:last-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {

data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss

@@ -7,11 +7,25 @@
         background-color: white;
     }
 
-    .with-border {
+    // For use with sticky left columns
+    .sticky-left-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+        left: 0;
+    }
+
+    .with-border-right {
         border-right: 1px solid $border_light !important;
+        left: 0;
     }
 
-    .sticky-shadow {
-        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+    // For use with sticky right columns
+    .sticky-right-shadow {
+        box-shadow: -4px 0 10px rgba(60, 106, 172, 0.16) !important;
+        right: 0;
+    }
+
+    .with-border-left {
+        border-left: 1px solid $border_light !important;
+        right: 0;
     }
 }