From e22bdd2db60954445c41f7e2ca75a8944de5288f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 17 Mar 2025 16:45:06 -0400
Subject: fixed table box scrolling

---
 src/client/views/nodes/DataVizBox/components/TableBox.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/components/TableBox.tsx')

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 7ef4bca6b..221b15372 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -101,7 +101,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         return this._props.docView?.()?.screenToViewTransform().Scale || 1;
     }
     @computed get rowHeight() {
-        return (this.viewScale * this._tableHeight) / this._tableDataIds.length;
+        return (this.viewScale * this._tableHeight) / (this._tableDataIds.length + 1); // add 1 for header row
     }
     @computed get startID() {
         return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0;
@@ -401,8 +401,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                     this._tableHeight = r?.getBoundingClientRect().height ?? 0;
                                 }
                             })}>
-                            <div style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
+                            {/* <div style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} /> */}
                             <thead>
+                                <tr style={{ height: this.startID * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }}></tr>
                                 <tr>
                                     {this.columns.map(col => (
                                         <th
@@ -441,7 +442,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                             <tbody>
                                 {this._tableDataIds
                                     .filter((rowId, i) => this.startID - 2 <= i && i <= this.endID + 2)
-                                    ?.map(rowId => (
+                                    .map(rowId => (
                                         <tr
                                             key={rowId}
                                             className={`tableBox-row ${this.columns[0]}`}
@@ -471,8 +472,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                             })}
                                         </tr>
                                     ))}
+                                <tr style={{ height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }}></tr>
                             </tbody>
-                            <div style={{ height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} />
+                            {/* <div style={{ height: (this._tableDataIds.length - this.endID) * Number(DATA_VIZ_TABLE_ROW_HEIGHT) }} /> */}
                         </table>
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2