diff options
| author | bobzel <zzzman@gmail.com> | 2025-03-17 16:45:06 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2025-03-17 16:45:06 -0400 |
| commit | e22bdd2db60954445c41f7e2ca75a8944de5288f (patch) | |
| tree | 2dfd8becab784cfed8b21bb231990753293c1d8e /src/client/views/nodes/DataVizBox/components/TableBox.tsx | |
| parent | 8437c22e6489518eff99d05490f64d4adbad1118 (diff) | |
fixed table box scrolling
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/TableBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/TableBox.tsx | 10 |
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> |