diff --git a/docs/pages/api/table-pagination.md b/docs/pages/api/table-pagination.md
index bfb785f8f93529..7a776ec1a949ae 100644
--- 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.
| backIconButtonText | string | 'Previous page' | Text label for the back arrow icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| component | elementType | TableCell | The component used for the root node. Either a string to use a DOM element or a component. |
-| count * | number | | The total number of rows. |
-| labelDisplayedRows | func | ({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count}` | Customize the displayed rows label.
For localization purposes, you can use the provided [translations](/guides/localization/). |
+| count * | number | | The total number of rows.
To enable server side pagination for an unknown number of items, provide -1. |
+| labelDisplayedRows | func | ({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count !== -1 ? count : `more than ${to}`}` | Customize the displayed rows label.
For localization purposes, you can use the provided [translations](/guides/localization/). |
| labelRowsPerPage | node | 'Rows per page:' | Customize the rows per page label. Invoked with a `{ from, to, count, page }` object.
For localization purposes, you can use the provided [translations](/guides/localization/). |
| nextIconButtonProps | object | | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. |
| nextIconButtonText | string | 'Next page' | Text label for the next arrow icon button.
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
index c7e72cf40d949a..9aa15e75efbf1a 100644
--- 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) {
{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
index 206e9a2daa1495..c88f81a46f8dc4 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.test.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.test.js
@@ -282,4 +282,33 @@ describe('', () => {
);
});
});
+
+ it('should display the "of more than" text and keep the nextButton enabled, if count is -1 ', () => {
+ const wrapper = mount(
+ ,
+ );
+
+ 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
index 29b87413cedcf2..af7b198cbfe885 100644
--- 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(
= Math.ceil(count / rowsPerPage) - 1}
+ disabled={count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false}
color="inherit"
{...nextIconButtonProps}
>