Support probing row height pre-render

Author: texodus

src/ts/regular-table.ts

@@ -20,10 +20,17 @@ import {
 import { get_draw_fps } from "./utils";
 import { METADATA_MAP } from "./view_model";
 
-type VirtualMode = "both" | "horizontal" | "vertical" | "none";
+export type VirtualMode = "both" | "horizontal" | "vertical" | "none";
 
 const VIRTUAL_MODES: VirtualMode[] = ["both", "horizontal", "vertical", "none"];
 
+export type ResetAutoSizeOptions = {
+    auto: boolean;
+    override: boolean;
+    indices: boolean;
+    row_height: boolean;
+};
+
 /**
  * The `<regular-table>` custom element.
  *
@@ -64,10 +71,22 @@ export class RegularTableElement extends RegularViewEventModel {
      * Reset column autosizing, such that column sizes will be recalculated
      * on the next draw() call.
      */
-    resetAutoSize() {
-        this._column_sizes.auto = [];
-        this._column_sizes.override = {};
-        this._column_sizes.indices = [];
+    resetAutoSize(options?: ResetAutoSizeOptions) {
+        if (!options || options.auto) {
+            this._column_sizes.auto = [];
+        }
+
+        if (!options || options.override) {
+            this._column_sizes.override = {};
+        }
+
+        if (!options || options.indices) {
+            this._column_sizes.indices = [];
+        }
+
+        if (!options || options.row_height) {
+            this._column_sizes.row_height = undefined;
+        }
     }
 
     /**
@@ -271,7 +290,7 @@ export class RegularTableElement extends RegularViewEventModel {
             return;
         }
 
-        const viewport_row_height = this._column_sizes.row_height || 19;
+        const viewport_row_height = this._column_sizes.row_height || 0;
         this.scrollTop = Math.ceil(viewport_row_height * y);
         let scroll_left = 0;
         while (x > 0) {

src/ts/scroll_panel.ts

@@ -95,6 +95,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
     protected _is_styling?: boolean;
     protected table_model!: RegularTableViewModel;
     protected _style_callbacks!: Array<StyleCallback>;
+    private _probe_element?: [HTMLElement, HTMLElement];
 
     /**
      * Draws this virtual panel, given an object of render options that allow
@@ -123,6 +124,30 @@ export class RegularVirtualTableViewModel extends HTMLElement {
         await flush_tag(this);
     }
 
+    /**
+     * Probe the shadow DOM to measure the default row height from CSS.
+     */
+    protected _probe_row_height() {
+        if (!this._probe_element) {
+            this._probe_element = [
+                document.createElement("table"),
+                document.createElement("td"),
+            ];
+            this._probe_element[0].style.visibility = "hidden";
+            this._probe_element[0].style.position = "absolute";
+            const tbody = document.createElement("tbody");
+            const tr = document.createElement("tr");
+            this._probe_element[1].textContent = "X";
+            tr.appendChild(this._probe_element[1]);
+            tbody.appendChild(tr);
+            this._probe_element[0].appendChild(tbody);
+        }
+
+        this.appendChild(this._probe_element[0]);
+        this._column_sizes.row_height = this._probe_element[1].offsetHeight;
+        this._probe_element[0].remove();
+    }
+
     /**
      * Create the DOM for this `shadowRoot`.
      */
@@ -243,11 +268,13 @@ export class RegularVirtualTableViewModel extends HTMLElement {
                 for (const w of this._column_sizes.indices) {
                     totalWidth += w || 0;
                 }
+
                 this._virtual_panel.style.width =
                     totalWidth.toPrecision(10) + "px";
             } else {
                 const virtual_width =
                     this._calc_scrollable_column_width(num_columns);
+
                 if (virtual_width !== 0) {
                     const panel_width =
                         this._container_size.width + virtual_width + 2;
@@ -266,7 +293,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
      * @param {*} nrows
      */
     protected _update_virtual_panel_height(nrows: number): void {
-        const { row_height = 19 } = this._column_sizes;
+        const { row_height = 0 } = this._column_sizes;
         const header_height =
             this._view_cache.column_headers_length * row_height;
         let virtual_panel_px_size;
@@ -287,7 +314,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
         last_cell?: CellTuple,
     ): void {
         const y_offset =
-            (this._column_sizes.row_height || 20) * (viewport.start_row % 1) ||
+            (this._column_sizes.row_height || 0) * (viewport.start_row % 1) ||
             0;
 
         const x_offset_index =
@@ -379,7 +406,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
         end_row: number;
     } {
         const { height, containerHeight } = this._container_size;
-        const row_height = this._column_sizes.row_height || 19;
+        const row_height = this._column_sizes.row_height || 0;
         const header_levels = this._view_cache.column_headers_length;
         const total_scroll_height = Math.max(
             1,
@@ -521,6 +548,10 @@ async function internal_draw(
     } = await this.table_model._getDimState(this._view_cache);
 
     this._column_sizes.row_height = row_height || this._column_sizes.row_height;
+    if (!this._column_sizes.row_height) {
+        this._probe_row_height();
+    }
+
     if (num_row_headers !== undefined) {
         this._view_cache.row_headers_length = num_row_headers;
     }