[TablePagination] Support unknown total count (#19494)

mui · Feb 1, 2020 · 2fe947e · 2fe947e
1 parent df41fc7
commit 2fe947e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/docs/pages/api/table-pagination.md b/docs/pages/api/table-pagination.md
@@ -29,8 +29,8 @@ A `TableCell` based component for placing inside `TableFooter` for pagination.
 | <span class="prop-name">backIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Previous page'</span> | Text label for the back arrow icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">TableCell</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> |  | The total number of rows. |
-| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count}`</span> | Customize the displayed rows label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
+| <span class="prop-name required">count&nbsp;*</span> | <span class="prop-type">number</span> |  | The total number of rows.<br>To enable server side pagination for an unknown number of items, provide -1. |
+| <span class="prop-name">labelDisplayedRows</span> | <span class="prop-type">func</span> | <span class="prop-default">({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`</span> | Customize the displayed rows label.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">labelRowsPerPage</span> | <span class="prop-type">node</span> | <span class="prop-default">'Rows per page:'</span> | Customize the rows per page label. Invoked with a `{ from, to, count, page }` object.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">nextIconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
 | <span class="prop-name">nextIconButtonText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Next page'</span> | Text label for the next arrow icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |

diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -67,7 +67,7 @@ export const styles = theme => ({
 });
 
 const defaultLabelDisplayedRows = ({ from, to, count }) =>
-  `${from}-${to === -1 ? count : to} of ${count}`;
+  `${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}`;
 const defaultRowsPerPageOptions = [10, 25, 50, 100];
 
 /**
@@ -138,7 +138,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
         <Typography color="inherit" variant="body2" className={classes.caption}>
           {labelDisplayedRows({
             from: count === 0 ? 0 : page * rowsPerPage + 1,
-            to: Math.min(count, (page + 1) * rowsPerPage),
+            to: count !== -1 ? Math.min(count, (page + 1) * rowsPerPage) : (page + 1) * rowsPerPage,
             count,
             page,
           })}
@@ -201,6 +201,8 @@ TablePagination.propTypes = {
   component: PropTypes.elementType,
   /**
    * The total number of rows.
+   *
+   * To enable server side pagination for an unknown number of items, provide -1.
    */
   count: PropTypes.number.isRequired,
   /**

diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js
@@ -282,4 +282,33 @@ describe('<TablePagination />', () => {
       );
     });
   });
+
+  it('should display the "of more than" text and keep the nextButton enabled, if count is -1 ', () => {
+    const wrapper = mount(
+      <table>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              page={0}
+              rowsPerPage={5}
+              rowsPerPageOptions={[5]}
+              onChangePage={noop}
+              onChangeRowsPerPage={noop}
+              count={-1}
+            />
+          </TableRow>
+        </TableFooter>
+      </table>,
+    );
+
+    assert.strictEqual(
+      wrapper
+        .find(Typography)
+        .at(0)
+        .text(),
+      '1-5 of more than 5',
+    );
+    const nextButton = wrapper.find(IconButton).at(1);
+    assert.strictEqual(nextButton.props().disabled, false);
+  });
 });
diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.js b/packages/material-ui/src/TablePagination/TablePaginationActions.js
@@ -41,7 +41,7 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions(
       </IconButton>
       <IconButton
         onClick={handleNextButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        disabled={count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false}
         color="inherit"
         {...nextIconButtonProps}
       >