1 files changed, 6 insertions, 4 deletions
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>