Merge pull request #595 from plotly/page-numbers-pagination

Page numbers and page navigation improvements

Author: Shammamah Hossain

CHANGELOG.md

@@ -10,10 +10,22 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [#597](https://github.com/plotly/dash-table/issues/597)
 - Add `is blank` unary operator. Returns true for `undefined`, `null` and `''`.
 
+[#299](https://github.com/plotly/dash-table/issues/299)
+- New prop `page_count` that sets the maximum number of pages that are
+  accessible via the pagination menu when using backend pagination.
+
 ### Changed
 [#598](https://github.com/plotly/dash-table/issues/598)
 - Allow values with whitespaces in column filters
 
+[#580](https://github.com/plotly/dash-table/issues/580)
+- Change pagination menu button UI to use arrow icons instead of plain
+  buttons
+- Move pagination menu to bottom-right of table
+- Include go-to-first and go-to-last buttons
+- Include current-page and total-pages display in pagination menu
+- Include input box for user to navigate directly to a page
+
 ### Fixed
 [#460](https://github.com/plotly/dash-table/issues/460)
 - The `datestartswith` relational operator now supports number comparison

package.json

@@ -27,6 +27,7 @@
     "private::host_dash8083": "python tests/cypress/dash/v_fe_page.py",
     "private::host_dash8084": "python tests/cypress/dash/v_data_loading.py",
     "private::host_dash8085": "python tests/cypress/dash/v_default.py",
+    "private::host_dash8086": "python tests/cypress/dash/v_pagination.py",
     "private::host_js": "http-server ./dash_table -c-1 --silent",
     "private::lint:ts": "tslint --project tsconfig.json --config tslint.json",
     "private::lint:py": "flake8 --exclude=DataTable.py,__init__.py,_imports_.py dash_table",
@@ -35,6 +36,7 @@
     "private::wait_dash8083": "wait-on http://localhost:8083",
     "private::wait_dash8084": "wait-on http://localhost:8084",
     "private::wait_dash8085": "wait-on http://localhost:8085",
+    "private::wait_dash8086": "wait-on http://localhost:8086",
     "private::wait_js": "wait-on http://localhost:8080",
     "private::opentests": "cypress open",
     "private::test.python": "python -m unittest tests/unit/format_test.py",

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

@@ -38,6 +38,8 @@ import queryLexicon from 'dash-table/syntax-tree/lexicon/query';
 import dataLoading from 'dash-table/derived/table/data_loading';
 import reconcile from 'dash-table/type/reconcile';
 
+import PageNavigation from 'dash-table/components/PageNavigation';
+
 const DEFAULT_STYLE = {
     width: '100%'
 };
@@ -629,18 +631,6 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
         ) || page_action === TableAction.Custom;
     }
 
-    loadNext = () => {
-        const { paginator } = this.props;
-
-        paginator.loadNext();
-    }
-
-    loadPrevious = () => {
-        const { paginator } = this.props;
-
-        paginator.loadPrevious();
-    }
-
     applyStyle = () => {
         const {
             fixed_columns,
@@ -807,7 +797,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             tooltip_duration
         );
 
-        const { export_columns, export_format, export_headers, virtual, merge_duplicate_headers } = this.props;
+        const { export_columns, export_format, export_headers, virtual, merge_duplicate_headers, paginator, page_current, page_count } = this.props;
         const buttonProps = {
             export_columns,
             export_format,
@@ -820,6 +810,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
 
         return (<div
             id={id}
+            className='dash-table-container'
             onCopy={this.onCopy}
             onKeyDown={this.handleKeyDown}
             onPaste={this.onPaste}
@@ -859,10 +850,10 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
                 </div>
             </div>
             {!this.displayPagination ? null : (
-                <div>
-                    <button className='previous-page' onClick={this.loadPrevious}>Previous</button>
-                    <button className='next-page' onClick={this.loadNext}>Next</button>
-                </div>
+                <PageNavigation
+                    paginator={paginator}
+                    page_current={page_current}
+                    page_count={page_count} />
             )}
         </div>);
     }

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

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { IPageNavigationProps } from 'dash-table/components/PageNavigation/props';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { KEY_CODES } from 'dash-table/utils/unicode';
+
+export default class PageNavigation extends Component<IPageNavigationProps> {
+
+    constructor(props: IPageNavigationProps) {
+        super(props);
+    }
+
+    goToPage = (page_number: string) => {
+        const { paginator } = this.props;
+
+        let page = parseInt(page_number, 10);
+
+        if (isNaN(page)) {
+            return;
+        }
+
+        paginator.loadPage(page - 1);
+    }
+
+    render() {
+        const {
+            paginator,
+            page_current
+        } = this.props;
+
+        return (paginator.lastPage !== undefined && paginator.lastPage <= 0) ? null : (
+            <div className='previous-next-container'>
+                <button
+                    className='first-page'
+                    onClick={paginator.loadFirst}
+                    disabled={!paginator.hasPrevious()}>
+                    <FontAwesomeIcon icon='angle-double-left' />
+                </button>
+
+                <button
+                    className='previous-page'
+                    onClick={paginator.loadPrevious}
+                    disabled={!paginator.hasPrevious()}>
+                    <FontAwesomeIcon icon='angle-left' />
+                </button>
+
+                <div className='page-number'>
+                    <input
+                        type='text'
+                        className='current-page'
+                        onBlur={event => { this.goToPage(event.target.value); event.target.value = ''; }}
+                        onKeyDown={event => { if (event.keyCode === KEY_CODES.ENTER) { event.currentTarget.blur(); } }}
+                        placeholder={(page_current + 1).toString()}
+                        defaultValue=''
+                    >
+                    </input>
+
+                    {paginator.lastPage !== undefined ? ' / ' : ''}
+
+                    {paginator.lastPage !== undefined ? <div className='last-page'>
+                        {paginator.lastPage + 1}
+                    </div> : ''}
+                </div>
+
+                <button
+                    className='next-page'
+                    onClick={paginator.loadNext}
+                    disabled={!paginator.hasNext()} >
+                    <FontAwesomeIcon icon='angle-right' />
+                </button>
+
+                <button
+                    className='last-page'
+                    onClick={paginator.loadLast}
+                    disabled={paginator.lastPage === undefined || paginator.isLast()}>
+                    <FontAwesomeIcon icon='angle-double-right' />
+                </button>
+            </div>
+        );
+    }
+}

src/dash-table/components/PageNavigation/props.ts

@@ -0,0 +1,7 @@
+import { IPaginator } from 'dash-table/derived/paginator';
+
+export interface IPageNavigationProps {
+    paginator: IPaginator;
+    page_current: number;
+    page_count: number | undefined;
+}