Use max_page_count for backend pagination.

Author: Shammamah Hossain

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

@@ -829,6 +829,8 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             merge_duplicate_headers
         };
 
+        const lastPage = this.lastPage();
+
         return (<div
             id={id}
             onCopy={this.onCopy}
@@ -869,13 +871,40 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
                     </div>))}
                 </div>
             </div>
-            {!this.displayPagination || this.lastPage() === 0 ? null : (
+            {!this.displayPagination || lastPage === 0 ? null : (
                 <div className='previous-next-container'>
-                    <button className='first-page' onClick={this.loadFirst} disabled={this.props.page_current === 0}><FontAwesomeIcon icon='angle-double-left' /></button>
-                    <button className='previous-page' onClick={this.loadPrevious} disabled={this.props.page_current === 0}><FontAwesomeIcon icon='angle-left' /></button>
-                    <div className='current-page'>{this.props.page_current + 1} / {this.lastPage() + 1}</div>
-                    <button className='next-page' onClick={this.loadNext} disabled={this.props.page_current === this.lastPage()}><FontAwesomeIcon icon='angle-right' /></button>
-                    <button className='last-page' onClick={this.loadLast} disabled={this.props.page_current === this.lastPage()}><FontAwesomeIcon icon='angle-double-right' /></button>
+                    <button
+                        className='first-page'
+                        onClick={this.loadFirst}
+                        disabled={this.props.page_current === 0}>
+                        <FontAwesomeIcon icon='angle-double-left' />
+                    </button>
+
+                    <button
+                        className='previous-page'
+                        onClick={this.loadPrevious}
+                        disabled={this.props.page_current === 0}>
+                        <FontAwesomeIcon icon='angle-left' />
+                    </button>
+
+                    <div className='current-page'>
+                        {this.props.page_current + 1} {lastPage !== undefined ? ' / ' : ''}
+                        {lastPage !== undefined ? lastPage + 1 : ''}
+                    </div>
+
+                    <button
+                        className='next-page'
+                        onClick={this.loadNext}
+                        disabled={this.props.page_current === lastPage}>
+                        <FontAwesomeIcon icon='angle-right' />
+                    </button>
+
+                    <button
+                        className='last-page'
+                        onClick={this.loadLast}
+                        disabled={this.props.page_current === lastPage || lastPage === undefined}>
+                        <FontAwesomeIcon icon='angle-double-right' />
+                    </button>
                 </div>
             )}
         </div>);

src/dash-table/components/Table/controlledPropsHelper.ts

@@ -37,6 +37,7 @@ export default () => {
             page_action,
             page_current,
             page_size,
+            max_page_count,
             selected_columns,
             selected_rows,
             sort_action,
@@ -92,6 +93,7 @@ export default () => {
             page_action,
             page_current,
             page_size,
+            max_page_count,
             setProps,
             virtual.data
         );

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

@@ -318,6 +318,7 @@ export interface IProps {
     style_as_list_view?: boolean;
     page_action?: TableAction;
     page_current?: number;
+    max_page_count?: number | undefined;
     page_size: number;
 
     style_data?: Style;

src/dash-table/dash/DataTable.js

@@ -731,6 +731,14 @@ export const propTypes = {
      */
     page_current: PropTypes.number,
 
+    /**
+     * `max_page_count` represents the number of the last page of the
+     * paginated table. This is really only useful when performing
+     * backend pagination, since the front end is unable to use the
+     * full size of the table to calculate the max page number.
+     */
+    max_page_count: PropTypes.number,
+
     /**
      * `page_size` represents the number of rows that will be
      * displayed on a particular page when `page_action` is `'custom'` or `'native'`

src/dash-table/derived/paginator.ts

@@ -13,7 +13,7 @@ export interface IPaginator {
     loadPrevious(): void;
     loadFirst(): void;
     loadLast(): void;
-    lastPage: number;
+    lastPage: number | undefined;
 }
 
 export function lastPage(data: Data, page_size: number) {
@@ -23,8 +23,7 @@ export function lastPage(data: Data, page_size: number) {
 function getBackEndPagination(
     page_current: number,
     setProps: SetProps,
-    data: Data,
-    page_size: number
+    max_page_count: number | undefined
 ): IPaginator {
     return {
         loadNext: () => {
@@ -44,10 +43,12 @@ function getBackEndPagination(
             setProps({ page_current, ...clearSelection });
         },
         loadLast: () => {
-            page_current = lastPage(data, page_size);
-            setProps({ page_current, ...clearSelection });
+            if (max_page_count !== undefined) {
+                page_current = max_page_count;
+                setProps({ page_current, ...clearSelection });
+            }
         },
-        lastPage: lastPage(data, page_size)
+        lastPage: max_page_count
     };
 }
 
@@ -102,6 +103,7 @@ const getter = (
     page_action: TableAction,
     page_current: number,
     page_size: number,
+    max_page_count: number | undefined,
     setProps: SetProps,
     data: Data
 ): IPaginator => {
@@ -111,7 +113,7 @@ const getter = (
         case TableAction.Native:
             return getFrontEndPagination(page_current, page_size, setProps, data);
         case TableAction.Custom:
-            return getBackEndPagination(page_current, setProps, data, page_size);
+            return getBackEndPagination(page_current, setProps, max_page_count);
         default:
             throw new Error(`Unknown pagination mode: '${page_action}'`);
     }