Allow for direct navigation to page.

Author: Shammamah Hossain

src/dash-table/components/ControlledTable/index.tsx

@@ -652,6 +652,12 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
         return paginator.lastPage;
     }
 
+    goToPage = (page_number: string) => {
+        const { paginator } = this.props;
+
+        paginator.goToPage(page_number);
+    }
+
     applyStyle = () => {
         const {
             fixed_columns,
@@ -887,9 +893,21 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
                         <FontAwesomeIcon icon='angle-left' />
                     </button>
 
-                    <div className='current-page'>
-                        {this.props.page_current + 1} {lastPage !== undefined ? ' / ' : ''}
-                        {lastPage !== undefined ? lastPage + 1 : ''}
+                    <div className='page-number'>
+                        <input
+                            type='text'
+                            className='current-page'
+                            onBlur={event => { this.goToPage(event.target.value); event.target.value = ''; }}
+                            placeholder={(this.props.page_current + 1).toString()}
+                            defaultValue=''
+                        >
+                        </input>
+
+                        {lastPage !== undefined ? ' / ' : ''}
+
+                        <div className='last-page'>
+                            {lastPage !== undefined ? lastPage + 1 : ''}
+                        </div>
                     </div>
 
                     <button

src/dash-table/components/Table/Table.less

@@ -152,8 +152,37 @@ button.previous-page, button.next-page, .current-page {
     margin-right: 5px;
 }
 
-.current-page {
+.page-number {
     font-family: monospace;
+    display: inline-block;
+}
+
+input.current-page, input.current-page::placeholder {
+    color: black;
+    border: none;
+    width:30px;
+    text-align:right;
+    font-family: monospace;
+    font-size: 10pt;
+    margin: 0.5em;
+}
+
+.page-number > .last-page {
+    min-width: 30px;
+    display: inline-block;
+    margin: 0.5em;
+}
+
+.last-page {
+    width: 30px;
+    display: inline-block;
+}
+
+input.current-page:focus {
+    outline: none;
+}
+input.current-page:focus::placeholder {
+    opacity: 0;
 }
 
 button.previous-page, button.next-page, button.first-page, button.last-page {

src/dash-table/derived/paginator.ts

@@ -14,6 +14,7 @@ export interface IPaginator {
     loadFirst(): void;
     loadLast(): void;
     lastPage: number | undefined;
+    goToPage(page_number: string): void;
 }
 
 export function lastPage(data: Data, page_size: number) {
@@ -48,7 +49,32 @@ function getBackEndPagination(
                 setProps({ page_current, ...clearSelection });
             }
         },
-        lastPage: max_page_count
+        lastPage: max_page_count,
+        goToPage: (page_number: string) => {
+
+            let page = parseInt(page_number, 10);
+
+            if (isNaN(page)) {
+                return;
+            }
+
+            page--;
+
+            if (page < 0) {
+                page_current = 0;
+                setProps({ page_current, ...clearSelection });
+                return;
+            }
+
+            if (max_page_count !== undefined && page > max_page_count) {
+                page_current = max_page_count;
+                setProps({ page_current, ...clearSelection });
+                return;
+            }
+
+            page_current = page;
+            setProps({ page_current, ...clearSelection });
+        }
     };
 }
 
@@ -85,7 +111,32 @@ function getFrontEndPagination(
             page_current = lastPage(data, page_size);
             setProps({ page_current, ...clearSelection });
         },
-        lastPage: lastPage(data, page_size)
+        lastPage: lastPage(data, page_size),
+        goToPage: (page_number: string) => {
+
+            let page = parseInt(page_number, 10);
+
+            if (isNaN(page)) {
+                return;
+            }
+
+            page--;
+
+            if (page < 0) {
+                page_current = 0;
+                setProps({ page_current, ...clearSelection });
+                return;
+            }
+
+            if (page > lastPage(data, page_size)) {
+                page_current = lastPage(data, page_size);
+                setProps({ page_current, ...clearSelection });
+                return;
+            }
+
+            page_current = page;
+            setProps({ page_current, ...clearSelection });
+        }
     };
 }
 
@@ -95,7 +146,8 @@ function getNoPagination() {
         loadPrevious: () => { },
         loadFirst: () => { },
         loadLast: () => { },
-        lastPage: 0
+        lastPage: 0,
+        goToPage: () => { }
     };
 }