feat: Dynamically set widget height based on initial content

Author: shuoweil

bigframes/display/table_widget.css

@@ -81,7 +81,7 @@ body[data-theme='dark'] .bigframes-widget.bigframes-widget {
 .bigframes-widget .table-container {
   background-color: var(--bf-bg);
   margin: 0;
-  height: 400px;
+  max-height: 620px;
   overflow: auto;
   padding: 0;
 }

bigframes/display/table_widget.js

@@ -170,9 +170,27 @@ function render({ model, el }) {
     model.save_changes();
   }
 
+  let isHeightInitialized = false;
+
   function handleTableHTMLChange() {
     tableContainer.innerHTML = model.get(ModelProperty.TABLE_HTML);
 
+    // After the first render, dynamically set the container height to fit the
+    // initial page (usually 10 rows) and then lock it.
+    setTimeout(() => {
+      if (!isHeightInitialized) {
+        const table = tableContainer.querySelector('table');
+        if (table) {
+          const tableHeight = table.offsetHeight;
+          // Add a small buffer(e.g. 2px) for borders to avoid scrollbars.
+          if (tableHeight > 0) {
+            tableContainer.style.height = `${tableHeight + 2}px`;
+            isHeightInitialized = true;
+          }
+        }
+      }
+    }, 0);
+
     const sortableColumns = model.get(ModelProperty.ORDERABLE_COLUMNS);
     const currentSortContext = model.get(ModelProperty.SORT_CONTEXT) || [];
 

tests/js/table_widget.test.js

@@ -340,31 +340,52 @@ describe('TableWidget', () => {
    * Tests that the widget correctly renders HTML with truncated columns (ellipsis)
    * and ensures that the ellipsis column is not treated as a sortable column.
    */
-  it('should have a fixed height for the table container', () => {
-    // Mock the initial state
+  it('should set height dynamically on first load and remain fixed', () => {
+    jest.useFakeTimers();
+
+    // Mock the table's offsetHeight
+    let mockHeight = 150;
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: () => mockHeight,
+    });
+
+    // Mock model properties
     model.get.mockImplementation((property) => {
       if (property === 'table_html') {
         return '<table>...</table>';
       }
       return null;
     });
 
-    // Load the CSS
-    const fs = require('fs');
-    const path = require('path');
-    const css = fs.readFileSync(
-      path.resolve(__dirname, '../../bigframes/display/table_widget.css'),
-      'utf8',
-    );
-    const style = document.createElement('style');
-    style.textContent = css;
-    document.head.appendChild(style);
-
     render({ model, el });
 
     const tableContainer = el.querySelector('.table-container');
-    const styles = window.getComputedStyle(tableContainer);
-    expect(styles.height).toBe('400px');
+
+    // --- First render ---
+    const tableHtmlChangeHandler = model.on.mock.calls.find(
+      (call) => call[0] === 'change:table_html',
+    )[1];
+    tableHtmlChangeHandler();
+    jest.runAllTimers();
+
+    // Height should be set to the mocked offsetHeight + 2px buffer
+    expect(tableContainer.style.height).toBe('152px');
+
+    // --- Second render (e.g., page size change) ---
+    // Simulate the new content being taller
+    mockHeight = 350;
+    tableHtmlChangeHandler();
+    jest.runAllTimers();
+
+    // Height should NOT change
+    expect(tableContainer.style.height).toBe('152px');
+
+    // Restore original implementation
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      value: 0,
+    });
+    jest.useRealTimers();
   });
 
   it('should render truncated columns with ellipsis and not make ellipsis sortable', () => {