diff --git a/src/components/Pagination/Pagination-test.js b/src/components/Pagination/Pagination-test.js
index 1b539367ff..10cd09fa72 100644
--- a/src/components/Pagination/Pagination-test.js
+++ b/src/components/Pagination/Pagination-test.js
@@ -173,6 +173,13 @@ describe('Pagination', () => {
expect(label.text()).toBe('1 of 10 pages');
});
+ it('should render ranges and pages for no items', () => {
+ const pager = mount();
+ const labels = pager.find('.bx--pagination__text');
+ expect(labels.at(1).text()).toBe('0-0 of 0 items');
+ expect(labels.at(2).text()).toBe('1 of 1 pages');
+ });
+
it('should have two buttons for navigation', () => {
const buttons = right.find('.bx--pagination__button');
expect(buttons.length).toBe(2);
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index b7096e58d1..501b114a72 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.js
@@ -106,7 +106,8 @@ export default class Pagination extends Component {
// used for case when page # is 0 or empty. For other cases
// existing props will be used.
page >= 0 &&
- page <= Math.ceil(this.props.totalItems / this.state.pageSize)
+ page <=
+ Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1)
) {
this.setState({ page }, () => this.pageInputDebouncer(this.state.page));
}
@@ -138,7 +139,7 @@ export default class Pagination extends Component {
return itemText(pageSize * (page - 1) + 1, page * pageSize);
} else if (page > 0) {
return itemRangeText(
- pageSize * (page - 1) + 1,
+ Math.min(pageSize * (page - 1) + 1, totalItems),
Math.min(page * pageSize, totalItems),
totalItems
);
@@ -159,7 +160,7 @@ export default class Pagination extends Component {
if (pagesUnknown) {
return pageText(page);
} else if (page > 0) {
- return pageRangeText(page, Math.ceil(totalItems / pageSize));
+ return pageRangeText(page, Math.max(Math.ceil(totalItems / pageSize), 1));
}
return defaultPageText(Math.ceil(totalItems / pageSize));
};
@@ -192,6 +193,7 @@ export default class Pagination extends Component {
const statePage = this.state.page;
const statePageSize = this.state.pageSize;
+ const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
const classNames = classnames('bx--pagination', className);
const inputId = id || this.uniqueId;
@@ -240,9 +242,7 @@ export default class Pagination extends Component {
className="bx--pagination__button bx--pagination__button--forward"
onClick={this.incrementPage}
disabled={
- this.props.disabled ||
- statePage === Math.ceil(totalItems / statePageSize) ||
- isLastPage
+ this.props.disabled || statePage === totalPages || isLastPage
}>
{
expect(label.text()).toBe('1 of 10 pages');
});
+ it('should render ranges and pages for no items', () => {
+ const pager = mount(
+
+ );
+ const labels = pager.find('.bx--pagination__text');
+ expect(labels.at(1).text()).toBe('\u00a0|\u00a0\u00a00-0 of 0 items');
+ expect(labels.at(2).text()).toBe('1 of 1 pages');
+ });
+
it('should have two buttons for navigation', () => {
const buttons = right.find('.bx--pagination__button');
expect(buttons.length).toBe(2);
diff --git a/src/components/PaginationV2/PaginationV2.js b/src/components/PaginationV2/PaginationV2.js
index e34c91e2f7..b7b266dc4c 100644
--- a/src/components/PaginationV2/PaginationV2.js
+++ b/src/components/PaginationV2/PaginationV2.js
@@ -165,7 +165,8 @@ export default class PaginationV2 extends Component {
const page = Number(evt.target.value);
if (
page > 0 &&
- page <= Math.ceil(this.props.totalItems / this.state.pageSize)
+ page <=
+ Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1)
) {
this.setState({ page });
this.props.onChange({ page, pageSize: this.state.pageSize });
@@ -231,7 +232,7 @@ export default class PaginationV2 extends Component {
}
);
const inputId = id || this.uniqueId;
- const totalPages = Math.ceil(totalItems / statePageSize);
+ const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
const selectItems = this.renderSelectItems(totalPages);
return (
@@ -260,7 +261,7 @@ export default class PaginationV2 extends Component {
statePage * statePageSize
)
: itemRangeText(
- statePageSize * (statePage - 1) + 1,
+ Math.min(statePageSize * (statePage - 1) + 1, totalItems),
Math.min(statePage * statePageSize, totalItems),
totalItems
)}
@@ -270,7 +271,7 @@ export default class PaginationV2 extends Component {
{pagesUnknown
? pageText(statePage)
- : pageRangeText(statePage, Math.ceil(totalItems / statePageSize))}
+ : pageRangeText(statePage, totalPages)}