Fix disappearing table content in Collapsible

vscode-elements · Sep 22, 2024 · a58db93 · a58db93
1 parent 36bfd2d
commit a58db93
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 26 deletions.
diff --git a/dev/vscode-table/scrollable-content.html b/dev/vscode-table/scrollable-content.html
@@ -19,6 +19,11 @@
   <script type="module" src="/dist/vscode-table-row/index.js"></script>
   <script type="module" src="/dist/vscode-table-body/index.js"></script>
   <script type="module" src="/dist/vscode-collapsible/index.js"></script>
+  <style>
+    vscode-table {
+      max-height: 500px;
+    }
+  </style>
 </head>
 
 <body class="vscode-light">
@@ -27,7 +32,7 @@
     <vscode-collapsible title="Table">
       <div style="margin: 10px;">
         <div style="background-color: var(--vscode-editor-background);">
-          <vscode-table columns='["100px", "200px"]' zebra min-column-width="5" style="max-height: 500px;">
+          <vscode-table columns='["100px", "200px"]' zebra min-column-width="5">
             <vscode-table-header slot="header">
               <vscode-table-header-cell>id</vscode-table-header-cell>
               <vscode-table-header-cell>firstname</vscode-table-header-cell>

diff --git a/src/vscode-table/vscode-table.ts b/src/vscode-table/vscode-table.ts
@@ -138,6 +138,7 @@ export class VscodeTable extends VscElement {
   private _columns: string[] = [];
   private _componentResizeObserver!: ResizeObserver;
   private _headerResizeObserver!: ResizeObserver;
+  private _bodyResizeObserver?: ResizeObserver;
   private _activeSashElementIndex = -1;
   private _activeSashCursorOffset = 0;
   private _componentX = 0;
@@ -169,6 +170,7 @@ export class VscodeTable extends VscElement {
     super.disconnectedCallback();
     this._componentResizeObserver.unobserve(this);
     this._componentResizeObserver.disconnect();
+    this._bodyResizeObserver?.disconnect();
   }
 
   private _px2Percent(px: number) {
@@ -251,15 +253,36 @@ export class VscodeTable extends VscElement {
 
   private _componentResizeObserverCallback = () => {
     this._memoizeComponentDimensions();
-    this._updateScrollpaneSize();
+    this._updateResizeHandlersSize();
 
     if (this.responsive) {
       this._toggleCompactView();
     }
   };
 
   private _headerResizeObserverCallback = () => {
-    this._updateScrollpaneSize();
+    this._updateResizeHandlersSize();
+  };
+
+  private _bodyResizeObserverCallback = () => {
+    let headerHeight = 0;
+    let tbodyHeight = 0;
+    const tableHeight = this.getBoundingClientRect().height;
+
+    if (this._assignedHeaderElements && this._assignedHeaderElements.length) {
+      headerHeight =
+        this._assignedHeaderElements[0].getBoundingClientRect().height;
+    }
+
+    if (this._assignedBodyElements && this._assignedBodyElements.length) {
+      tbodyHeight =
+        this._assignedBodyElements[0].getBoundingClientRect().height;
+    }
+
+    const overflownContentHeight = tbodyHeight - headerHeight - tableHeight;
+
+    this._scrollableElement.style.height =
+      overflownContentHeight > 0 ? `${tableHeight - headerHeight}px` : 'auto';
   };
 
   private _calcColWidthPercentages(): number[] {
@@ -333,9 +356,8 @@ export class VscodeTable extends VscElement {
     this._initSashes(colWidths);
   }
 
-  private _updateScrollpaneSize() {
+  private _updateResizeHandlersSize() {
     const headerCr = this._headerElement.getBoundingClientRect();
-    const componentCr = this.getBoundingClientRect();
 
     if (
       headerCr.height === this._prevHeaderHeight &&
@@ -347,27 +369,12 @@ export class VscodeTable extends VscElement {
     this._prevHeaderHeight = headerCr.height;
     this._prevComponentHeight = this._componentH;
 
-    if (componentCr.height - headerCr.height > 0) {
-      const scrollableH = componentCr.height - headerCr.height;
-      this._scrollableElement.style.height = `${scrollableH}px`;
+    const bodyHeight = this._componentH - headerCr.height;
 
-      this._sashVisibleElements.forEach((el) => {
-        el.style.height = `${scrollableH}px`;
-        el.style.top = `${headerCr.height}px`;
-      });
-    } else {
-      if (
-        this._assignedBodyElements.length === 0 ||
-        !this._assignedBodyElements[0].querySelector('vscode-table-row')
-      ) {
-        this._scrollableElement.style.height = '0px';
-
-        this._sashVisibleElements.forEach((el) => {
-          el.style.height = '0px';
-          el.style.top = `${headerCr.height}px`;
-        });
-      }
-    }
+    this._sashVisibleElements.forEach((el) => {
+      el.style.height = `${bodyHeight}px`;
+      el.style.top = `${headerCr.height}px`;
+    });
   }
 
   private _applyCompactViewColumnLabels() {
@@ -414,7 +421,18 @@ export class VscodeTable extends VscElement {
   private _onBodySlotChange() {
     this._initDefaultColumnSizes();
     this._initResizeObserver();
-    this._updateScrollpaneSize();
+    this._updateResizeHandlersSize();
+
+    if (!this._bodyResizeObserver) {
+      const tbody = this._assignedBodyElements[0] ?? null;
+
+      if (tbody) {
+        this._bodyResizeObserver = new ResizeObserver(
+          this._bodyResizeObserverCallback
+        );
+        this._bodyResizeObserver.observe(tbody);
+      }
+    }
   }
 
   private _onSashMouseOver(event: MouseEvent) {