Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TablePagination] Support unknown total count #19494

Merged
merged 1 commit into from
Feb 1, 2020
Merged

[TablePagination] Support unknown total count #19494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/pages/api/table-pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/). |
Expand Down
6 changes: 4 additions & 2 deletions packages/material-ui/src/TablePagination/TablePagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];

/**
Expand Down Expand Up @@ -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,
})}
Expand Down Expand Up @@ -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,
/**
Expand Down
29 changes: 29 additions & 0 deletions packages/material-ui/src/TablePagination/TablePagination.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,4 +282,33 @@ describe('<TablePagination />', () => {
);
});
});

it('should display the "of more than" text and keep the nextButton enabled, if count is -1 ', () => {
Domino987 marked this conversation as resolved.
Show resolved Hide resolved
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);
});
});
2 changes: 1 addition & 1 deletion packages/material-ui/src/TablePagination/TablePaginationActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down