diff --git a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx
index 510a192518..f6ec90e16d 100644
--- a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx
+++ b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx
@@ -393,6 +393,49 @@ describe("IcPaginationBar end-to-end tests", () => {
.should(HAVE_LENGTH, 1);
});
+ it("should reset to the first page when the items per page is changed", () => {
+ mount();
+
+ cy.checkHydrated(PAGINATION_BAR);
+
+ cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+ .shadow()
+ .find("#next-page-button")
+ .click();
+
+ cy.findShadowEl(
+ PAGINATION_BAR,
+ "ic-typography.item-pagination-label"
+ ).should(HAVE_TEXT, "11 - 20 of 100 items");
+
+ cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+ .shadow()
+ .find("ic-pagination-item")
+ .shadow()
+ .find("ic-typography")
+ .should(HAVE_TEXT, "Page 2");
+
+ cy.findShadowEl(PAGINATION_BAR, "ic-select").click();
+
+ cy.findShadowEl(PAGINATION_BAR, "ic-select")
+ .shadow()
+ .find("li[role='option']")
+ .eq(1)
+ .click();
+
+ cy.findShadowEl(
+ PAGINATION_BAR,
+ "ic-typography.item-pagination-label"
+ ).should(HAVE_TEXT, "1 - 20 of 100 items");
+
+ cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+ .shadow()
+ .find("ic-pagination-item")
+ .shadow()
+ .find("ic-typography")
+ .should(HAVE_TEXT, "Page 1");
+ });
+
it('should render the number of items instead of the page number when rangeLabelType is "data"', () => {
mount();
diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
index 64d2e97ceb..24eccd8d94 100644
--- a/packages/canary-react/src/stories/ic-data-table.stories.mdx
+++ b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2281,7 +2281,7 @@ export const defaultArgs = {
rangeLabelType: args.paginationRangeLabelType,
type: args.paginationType,
showItemsPerPageControl: args.paginationShowItemsPerPageControl,
- showGoToPageControl: args.paginationShowGoToPageControl,
+ showGoToPageControl: args.paginationShowGoToPageControl,
appearance: args.paginationAppearance,
alignment: args.paginationAlignment,
pageLabel: args.paginationPageLabel,
diff --git a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
index a63967ff6b..a131359133 100644
--- a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
+++ b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -499,8 +499,8 @@ export const defaultArgs = {
],
pageLabel: "Page",
rangeLabelType: "page",
- showItemsPerPageControl: false,
- showGoToPageControl: false,
+ showItemsPerPageControl: true,
+ showGoToPageControl: true,
totalItems: 100,
type: "simple",
};