Navigation to top menu with "Next" Button

src/components/DataDictionary.tsx

@@ -77,9 +77,12 @@ interface DataDictionaryState {
 }
 
 class DataDictionary extends React.Component<{}, DataDictionaryState> {
+  tableBodyRef: React.RefObject<HTMLDivElement>;
   constructor (props: Object) {
     super(props)
 
+    this.tableBodyRef = React.createRef() as React.RefObject<HTMLDivElement>
+
     const nounList: { [key: string]: string } = {
       'animalandveterinary': 'Animal & Veterinary',
       'drug': 'Human Drug',
@@ -230,6 +233,13 @@ class DataDictionary extends React.Component<{}, DataDictionaryState> {
     })
   }
 
+  handleChange() {
+    const body = document.querySelector('.ReactTable .rt-tbody') as HTMLDivElement;
+    if (body) {
+      body.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    }
+  }
+
   handleEndpointChange (val: any) {
     this.setState({
       selectedEndpoint: val
@@ -552,6 +562,7 @@ const data_array: {
             </a>
           </div>
         </div>
+        <div ref={this.tableBodyRef}>
         <ReactTable
           data={data}
           getTrProps={(state: any, rowInfo: any, column: any, instance: any) => {
@@ -570,18 +581,32 @@ const data_array: {
           className='table -striped -highlight'
           filtered={this.state.filtered}
           resized={this.state.resized}
-          onSortedChange={(sorted: any) => this.setState({ sorted })}
-          onPageChange={(page: any) => this.setState({ page })}
+          onSortedChange={(sorted: any) =>{
+             this.setState({ sorted })
+             this.handleChange()
+            }}
+          onPageChange={(page: any) =>{ 
+            this.handleChange()
+            this.setState({ page })
+
+          }}
           onPageSizeChange={(pageSize: any, page: any) =>
             this.setState({ page, pageSize })}
-          onResizedChange={(resized: any) => this.setState({ resized })}
-          onFilteredChange={(filtered: any) => this.setState({ filtered })}
+          onResizedChange={(resized: any) => {
+            this.setState({ resized })
+            this.handleChange()
+          }}
+          onFilteredChange={(filtered: any) => {
+            this.setState({ filtered })
+            this.handleChange()
+          }}
           style={{
             width: '100%',
             height: '494px',
             position: 'relative'
           }}
         />
+        </div>
       </section>
     )
   }

src/components/FieldsHarmonization.tsx

@@ -67,10 +67,11 @@ type State = {
 }
 
 class FieldsHarmonization extends React.Component<PROPS, State> {
+  tableBodyRef: React.RefObject<HTMLDivElement>;
 
   constructor (props: PROPS) {
     super(props)
-
+    this.tableBodyRef = React.createRef() as React.RefObject<HTMLDivElement>
     const master_harmonization: Record<string, any> = props.master_harmonization
 
     const nouns: string[] = []
@@ -319,6 +320,13 @@ class FieldsHarmonization extends React.Component<PROPS, State> {
     }
   }
 
+  handleChange() {
+    const body = document.querySelector('.ReactTable .rt-tbody') as HTMLDivElement;
+    if (body) {
+      body.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    }
+  }
+
   render (): any {
 
     if (Object.keys(this.state.data as any).length === 0 && (this.state.data as any).constructor === Object) {
@@ -339,7 +347,7 @@ class FieldsHarmonization extends React.Component<PROPS, State> {
     })
 
     return (
-      <section id='fields-harmonization'>
+      <section id='fields-harmonization' ref={this.tableBodyRef}>
         <div className='noun-buttons' id='noun-buttons'>
           {
             noun_buttons

src/components/Panels/PositionsPanel.tsx

@@ -14,9 +14,10 @@ type PositionsPanelState = {
 }
 
 class PositionsPanel extends React.Component<{}, PositionsPanelState> {
-  constructor (props: Object) {
+  tableBodyRef: React.RefObject<HTMLDivElement>;
+  constructor(props: Object) {
     super(props)
-
+    this.tableBodyRef = React.createRef() as React.RefObject<HTMLDivElement>
     this.state = {
       columns: [
         {
@@ -41,7 +42,7 @@ class PositionsPanel extends React.Component<{}, PositionsPanelState> {
             }}>
               {/* <li>{row.value}</li>*/}
               {row.value.map((v: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined, idx: any) =>
-                <li key={`key-${idx}`} style={{whiteSpace: "initial"}}>• {v}</li>
+                <li key={`key-${idx}`} style={{ whiteSpace: "initial" }}>• {v}</li>
               )}
             </ol>
           )
@@ -53,12 +54,18 @@ class PositionsPanel extends React.Component<{}, PositionsPanelState> {
     this.getData = this.getData.bind(this)
   }
 
+  handleChange() {
+    const body = document.querySelector('.ReactTable .rt-tbody') as HTMLDivElement;
+    if (body) {
+      body.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    }
+  }
 
-  componentDidMount () {
+  componentDidMount() {
     this.getData()
   }
 
-  getData () {
+  getData() {
     fetch(API_LINK + '/other/historicaldocumentanalytics.json?limit=1000')
       .then(res => res.json())
       .then((json => {
@@ -82,29 +89,46 @@ class PositionsPanel extends React.Component<{}, PositionsPanelState> {
   }
 
 
-  render () {
+  render() {
     return (
-      <ReactTable
-        data={this.state.data}
-        columns={this.state.columns}
-        pageSize={this.state.pageSize}
-        pageSizeOptions={[10, 25, 50, 100, 200, 250, 500, 1000]}
-        showPagination
-        minRows={10}
-        className='table -striped -highlight'
-        filtered={this.state.filtered}
-        resized={this.state.resized}
-        onSortedChange={(sorted: any) => this.setState({ sorted })}
-        onPageChange={(page: any) => this.setState({ page })}
-        onPageSizeChange={(pageSize: any, page: any) => this.setState({ page, pageSize })}
-        onResizedChange={(resized: any) => this.setState({ resized })}
-        onFilteredChange={(filtered: any) => this.setState({ filtered })}
-        style={{
-          width: '100%',
-          height: '494px',
-          position: 'relative'
-        }}
-      />
+      <div ref={this.tableBodyRef}>
+        <ReactTable
+          data={this.state.data}
+          columns={this.state.columns}
+          pageSize={this.state.pageSize}
+          pageSizeOptions={[10, 25, 50, 100, 200, 250, 500, 1000]}
+          showPagination
+          minRows={10}
+          className='table -striped -highlight'
+          filtered={this.state.filtered}
+          resized={this.state.resized}
+          onSortedChange={(sorted: any) => {
+            this.setState({ sorted })
+            this.handleChange()
+          }}
+          onPageChange={(page: any) => {
+            this.setState({ page })
+            this.handleChange()
+          }}
+          onPageSizeChange={(pageSize: any, page: any) => {
+            this.setState({ page, pageSize })
+            this.handleChange()
+          }}
+          onResizedChange={(resized: any) => {
+            this.setState({ resized })
+            this.handleChange()
+          }}
+          onFilteredChange={(filtered: any) => {
+            this.setState({ filtered })
+            this.handleChange()
+          }}
+          style={{
+            width: '100%',
+            height: '494px',
+            position: 'relative'
+          }}
+        />
+      </div>
     )
   }
 }

src/components/Table.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import PropTypes from 'prop-types';
 
 type tPROPS = {
@@ -15,14 +15,22 @@ const Table = (props:tPROPS) => {
         cols: string[];
         labels: any;
         formatters: { [key: string]: (cell: any, row: any) => any };
+        containerRef: React.RefObject<HTMLTableSectionElement | null>;
 
         constructor(props:tPROPS) {
             super(props);
             this.rows = props.rows;
             this.cols = props.cols;
             this.labels = (props as any).labels ? (props as any).labels : props.cols;
             this.formatters = (props as any).formatters || {};
+            this.containerRef = React.createRef<HTMLTableSectionElement>();
         }
+
+        componentDidMount(): void {
+            // window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+            this.containerRef.current?.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        }
+
         format(cell: any, row: any, col: string | number, rowIndex: any, colIndex: any) {
             let formatter = this.formatters[col];
             if(formatter) {
@@ -51,14 +59,18 @@ const Table = (props:tPROPS) => {
                 );
             });
 
-            return (<table className="table">
+            return (
+                <div ref={this.containerRef} className="table-responsive">
+            <table className="table">
                 <thead>
                     {head}
                 </thead>
-                <tbody>
+                <tbody ref={this.containerRef}>
                     {body}
                 </tbody>
-            </table>);
+            </table>
+            </div>
+            );
         }
     }