Fix scroll offset calculation when <regular-table> has non-zero padding

src/js/index.js

@@ -307,15 +307,7 @@ class RegularTableElement extends RegularViewEventModel {
         }
 
         const viewport_row_height = this._column_sizes.row_height || 19;
-        const header_height =
-            this._view_cache.config.column_pivots.length * viewport_row_height;
-        const body_height = this._table_clip.offsetHeight - header_height;
-        const row_height_offset = body_height % viewport_row_height;
-        let real_row_height =
-            (this._virtual_panel.offsetHeight - row_height_offset) /
-            this._nrows;
-        this.scrollTop = Math.ceil(real_row_height * y);
-
+        this.scrollTop = Math.ceil(viewport_row_height * y);
         let scroll_left = 0;
         while (x > 0) {
             x--;

src/js/scroll_panel.js

@@ -173,15 +173,17 @@ export class RegularVirtualTableViewModel extends HTMLElement {
      * @returns
      */
     _calculate_row_range(nrows) {
-        const { height } = this._container_size;
+        const { height, containerHeight } = this._container_size;
         const row_height = this._column_sizes.row_height || 19;
         const header_levels = this._view_cache.config.column_pivots.length;
         const total_scroll_height = Math.max(
             1,
-            this._virtual_panel.offsetHeight - height,
+            this._virtual_panel.offsetHeight - containerHeight,
         );
+
         const percent_scroll =
             Math.max(Math.ceil(this.scrollTop), 0) / total_scroll_height;
+
         const clip_panel_row_height = height / row_height - header_levels;
         const relative_nrows = nrows || 0;
         const scrollable_rows = Math.max(
@@ -453,6 +455,7 @@ async function internal_draw(options) {
         num_column_headers,
         row_height,
     } = await this._view_cache.view(0, 0, 0, 0);
+    this._column_sizes.row_height = row_height || this._column_sizes.row_height;
     if (num_row_headers !== undefined) {
         this._view_cache.row_pivots = Array(num_row_headers).fill(0);
     }
@@ -470,6 +473,10 @@ async function internal_draw(options) {
             this._virtual_mode === "none" || this._virtual_mode === "horizontal"
                 ? Infinity
                 : this._table_clip.clientHeight,
+        containerHeight:
+            this._virtual_mode === "none" || this._virtual_mode === "horizontal"
+                ? Infinity
+                : this.clientHeight,
     };
 
     this._update_virtual_panel_height(num_rows);
@@ -520,8 +527,13 @@ async function internal_draw(options) {
             this._invalidated = false;
         }
 
+        const old_height = this.table_model._column_sizes.row_height;
         this.table_model.autosize_cells(autosize_cells, row_height);
         this.table_model.header.reset_header_cache();
+        if (old_height !== this.table_model._column_sizes.row_height) {
+            this._update_virtual_panel_height(num_rows);
+        }
+
         if (!preserve_width) {
             this._update_virtual_panel_width(
                 this._invalid_schema || invalid_column,

test/examples/2d_array.test.js

@@ -79,15 +79,15 @@ describe("2d_array.html", () => {
         test("to (0, 4)", async () => {
             const table = await page.$("regular-table");
             await page.evaluate(async (table) => {
-                await table.scrollToCell(0, 3, 3, 15);
+                await table.scrollToCell(0, 3);
             }, table);
             const first_tr = await page.$("regular-table tbody tr:first-child");
             const cell_values = await page.evaluate(
                 (first_tr) =>
                     Array.from(first_tr.children).map((x) => x.textContent),
                 first_tr,
             );
-            expect(cell_values).toEqual(["2", "C", "true"]);
+            expect(cell_values).toEqual(["3", "D", "false"]);
         });
     });
 });

test/examples/spreadsheet.test.js

@@ -342,6 +342,7 @@ describe("spreadsheet.html", () => {
                     event.ctrlKey = true;
                     event.keyCode = 13;
                     table.dispatchEvent(event);
+                    await new Promise((x) => setTimeout(x, 100));
                 }
             }, table);
         });
@@ -354,15 +355,16 @@ describe("spreadsheet.html", () => {
             for (const td of tr2) {
                 tds2.push(await page.evaluate((td) => td.innerHTML, td));
             }
-            expect(tds2).toEqual(["1", "", "", ""]);
+
+            expect(tds2).toEqual(["2", "", "", ""]);
             const tr3 = await page.$$(
                 "regular-table tbody tr:nth-of-type(4) td",
             );
             const tds3 = [];
             for (const td of tr3) {
                 tds3.push(await page.evaluate((td) => td.innerHTML, td));
             }
-            expect(tds3).toEqual(["2", "3", "", ""]);
+            expect(tds3).toEqual(["", "1", "", ""]);
         });
 
         describe("on scroll", () => {
@@ -382,15 +384,15 @@ describe("spreadsheet.html", () => {
                 for (const td of tr1) {
                     tds1.push(await page.evaluate((td) => td.innerHTML, td));
                 }
-                expect(tds1).toEqual(["2", "3", "", ""]);
+                expect(tds1).toEqual(["2", "", "", ""]);
                 const tr2 = await page.$$(
                     "regular-table tbody tr:nth-of-type(3) td",
                 );
                 const tds2 = [];
                 for (const td of tr2) {
                     tds2.push(await page.evaluate((td) => td.innerHTML, td));
                 }
-                expect(tds2).toEqual(["", "", "", ""]);
+                expect(tds2).toEqual(["", "1", "", ""]);
             });
         });
     });

test/examples/two_billion_rows.test.js

@@ -176,11 +176,11 @@ describe("two_billion_rows.html", () => {
                 first_tr,
             );
             expect(cell_values).toEqual([
-                "Group 1,999,997,590",
-                "Row 1,999,997,597",
-                "1,999,997,597",
-                "1,999,997,598",
-                "1,999,997,599",
+                "Group 1,999,999,990",
+                "Row 1,999,999,997",
+                "1,999,999,997",
+                "1,999,999,998",
+                "1,999,999,999",
             ]);
         });
     });