From 2fe947ef5ed2dad2bbec15c0d7a42b2bf41a9175 Mon Sep 17 00:00:00 2001 From: Domino987 Date: Sat, 1 Feb 2020 10:51:18 +0100 Subject: [PATCH] [TablePagination] Support unknown total count (#19494) --- docs/pages/api/table-pagination.md | 4 +-- .../src/TablePagination/TablePagination.js | 6 ++-- .../TablePagination/TablePagination.test.js | 29 +++++++++++++++++++ .../TablePagination/TablePaginationActions.js | 2 +- 4 files changed, 36 insertions(+), 5 deletions(-) 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} >