better scrolling in data tables

1 files changed, 19 insertions, 23 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 556a8b281..dd13c5749 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -32,7 +32,7 @@ interface TableBoxProps {
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
     @observable startID: number = 0;
-    @observable endID: number = 20;
+    @observable endID: number = 15;
 
     _inputChangedDisposer?: IReactionDisposer;
     componentDidMount() {
@@ -90,33 +90,29 @@ export class TableBox extends React.Component<TableBoxProps> {
             }
         }
         if (useCell && useContainer){
-
-            // check for 20 (inital value) as end point
-            if (this.endID == 20){
-                let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1;
-                newEnd = Math.floor(Number(newEnd))
-                if (newEnd<this.endID){ this.endID -= .1; }
-                if (newEnd>this.endID && this.endID<=this._tableDataIds.length) { this.endID += .1; }
-            }
-
+            let atEnd = false;
             // top
-            if (useContainer.scrollTop <= 10 && this.startID >= -1){
-                this.startID -= .01;
-                this.endID -= .01;
+            if (useContainer.scrollTop <= 10){
+                atEnd = true;
+                if (this.startID >= -1){
+                    this.startID -= .001;
+                    this.endID -= .001;
+                }
             }
-            
             // bottom
-            else if (useContainer.scrollHeight - 50  <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){
-                this.startID += .01;
-                this.endID += .01;
+            else if (useContainer.scrollHeight / (useContainer.scrollTop + useContainer.getBoundingClientRect().height) < 1.1 && this.endID<=this._tableDataIds.length){
+                this.startID += .015;
+                this.endID += .015;
             }
-
             // regular scroll
-            else {
-                let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1;
-                newStart = Math.floor(Number(newStart))
-                if (newStart<this.startID && this.startID>=-1){ this.startID -= .01; this.endID -= -.01; }
-                else if (newStart>this.startID) { this.startID += .01; this.endID += .01; }
+            else if (this.endID<=this._tableDataIds.length && !atEnd) {
+                let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) ;
+                if (newStart<this.startID && this.startID>=-1){ 
+                    this.startID -= .001; 
+                    this.endID -= .001; }
+                else if (newStart>this.startID) { 
+                    this.startID += .001; 
+                    this.endID += .001; }
             }
         }
         else {