Issue 660 - Increase page_current and page_count fields size to accommodate larger numbers (#819)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 - [#817](https://github.com/plotly/dash-table/pull/817) Fix a regression introduced with [#722](https://github.com/plotly/dash-table/pull/722) causing the tooltips to be misaligned with respect to their parent cell
 - [#818](https://github.com/plotly/dash-table/pull/818) Fix a regression causing copy/paste not to work when selecting a range of cells with Shift + mouse click
+- [#819](https://github.com/plotly/dash-table/pull/819) Fix pagination `page_current` and `page_count` fields to accommodate larger numbers
 
 ## [4.9.0] - 2020-07-27
 ### Added

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

@@ -23,8 +23,17 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
     render() {
         const {paginator, page_current} = this.props;
 
-        return paginator.lastPage !== undefined &&
-            paginator.lastPage <= 0 ? null : (
+        if (paginator.lastPage !== undefined && paginator.lastPage <= 0) {
+            return null;
+        }
+
+        const pageChars = Math.max(
+            3,
+            ((paginator.lastPage ?? 0) + 1).toString().length
+        );
+        const minWidth = `${pageChars + 1}ch`;
+
+        return (
             <div className='previous-next-container'>
                 <button
                     className='first-page'
@@ -43,26 +52,32 @@ export default class PageNavigation extends Component<IPageNavigationProps> {
                 </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>
+                    <div className='current-page-container'>
+                        <div className='current-page-shadow' style={{minWidth}}>
+                            {(page_current + 1).toString()}
+                        </div>
+                        <input
+                            type='text'
+                            className='current-page'
+                            style={{minWidth}}
+                            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>
+                    </div>
 
                     {paginator.lastPage !== undefined ? ' / ' : ''}
 
                     {paginator.lastPage !== undefined ? (
-                        <div className='last-page'>
+                        <div className='last-page' style={{minWidth}}>
                             {paginator.lastPage + 1}
                         </div>
                     ) : (

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

@@ -143,41 +143,53 @@
 
 .dash-table-container {
     .previous-next-container {
-        display: inline-block;
         float: right;
         padding: 5px 0px;
 
         .page-number {
             font-family: monospace;
             display: inline-block;
+
             .last-page {
-            min-width: 30px;
-            display: inline-block;
-            text-align: center;
-            margin: 0.5em;
+                display: inline-block;
+                text-align: center;
+                padding: 1px 2px;
             }
-        }
 
-        input.current-page {
-            display: inline-block;
-            border-bottom: solid lightgrey 1px !important;
-            color: black;
-            border: none;
-            width: 30px;
-            text-align: center;
-            font-family: monospace;
-            font-size: 10pt;
-            margin: 0.5em;
+            .current-page-container {
+                display: inline-block;
+                position: relative;
 
-            &::placeholder {
-                color: black;
-            }
+                .current-page-shadow,
+                input.current-page {
+                    display: inline-block;
+                    border-bottom: solid lightgrey 1px !important;
+                    color: black;
+                    border: none;
+                    text-align: center;
+                    font-family: monospace;
+                    font-size: 10pt;
+                    padding: 1px 2px;
+
+                    &::placeholder {
+                        color: black;
+                    }
 
-            &:focus {
-                outline: none;
+                    &:focus {
+                        outline: none;
 
-                &::placeholder {
-                    opacity: 0;
+                        &::placeholder {
+                            opacity: 0;
+                        }
+                    }
+                }
+
+                input.current-page {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
                 }
             }
         }

tests/visual/percy-storybook/Style.percy.tsx

@@ -384,10 +384,49 @@ storiesOf('DashTable/Style type condition', module)
         style_data_conditional={[{
             if: { column_editable: true }, background_color: 'MediumPurple'
         }]}
-        pagination_settings={{
-            current_page: 0,
-            page_size: 10
+        page_current={0}
+        page_size={10}
+    />))
+    .add('large current page', () => (<DataTable
+        id='paging-large-current-page'
+        data={mock.data.slice(0, 10)}
+        columns={mock.columns.map((col: any) => R.merge(col, {
+            name: col.name,
+            deletable: true
+        }))}
+        style_table={{
+            width: '100%'
         }}
+        row_deletable={true}
+        row_selectable={true}
+        pagination_mode={'fe'}
+        style_data_conditional={[{
+            if: { column_editable: true }, background_color: 'MediumPurple'
+        }]}
+        page_action='custom'
+        page_count={999999}
+        page_current={987654}
+        page_size={10}
+    />))
+    .add('large current page and unknown page count', () => (<DataTable
+        id='paging-large-current-page'
+        data={mock.data.slice(0, 10)}
+        columns={mock.columns.map((col: any) => R.merge(col, {
+            name: col.name,
+            deletable: true
+        }))}
+        style_table={{
+            width: '100%'
+        }}
+        row_deletable={true}
+        row_selectable={true}
+        pagination_mode={'fe'}
+        style_data_conditional={[{
+            if: { column_editable: true }, background_color: 'MediumPurple'
+        }]}
+        page_action='custom'
+        page_current={987654}
+        page_size={10}
     />))
     .add('data column_id array', () => (<DataTable
         {...DEFAULT_TABLE}