diff --git a/packages/canary-docs/docs.json b/packages/canary-docs/docs.json
index 9b993e55a8..fec69f950d 100644
--- a/packages/canary-docs/docs.json
+++ b/packages/canary-docs/docs.json
@@ -3697,6 +3697,28 @@
"optional": true,
"required": false
},
+ {
+ "name": "setToFirstPageOnPaginationChange",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "set-to-first-page-on-pagination-change",
+ "reflectToAttr": false,
+ "docs": "If `true`, the pagination bar is set to the first page when the 'items per page' changes",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
{
"name": "showGoToPageControl",
"type": "boolean",
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 d03494cd38..a64767b46d 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,97 @@ describe("IcPaginationBar end-to-end tests", () => {
.should(HAVE_LENGTH, 1);
});
+ it("should reset to the first page when the setToFirstPageOnPaginationChange prop is set and 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 remain on the current page when the setToFirstPageOnPaginationChange prop is unset and 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, "21 - 40 of 100 items");
+
+ cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+ .shadow()
+ .find("ic-pagination-item")
+ .shadow()
+ .find("ic-typography")
+ .should(HAVE_TEXT, "Page 2");
+ });
+
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 38969ab819..d228f942f8 100644
--- a/packages/canary-react/src/stories/ic-data-table.stories.mdx
+++ b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -1877,23 +1877,6 @@ const DataTable = () => {
export default DataTable;
```
-export const defaultPaginationBarArgs = {
- itemsPerPageOptions: [
- { label: "5", value: "5" },
- { label: "10", value: "10" },
- { label: "15", value: "15" },
- ],
- rangeLabelType: "page",
- type: "simple",
- showItemsPerPageControl: true,
- showGoToPageControl: true,
- alignment: "right",
- appearance: "default",
- itemLabel: "Item",
- pageLabel: "Page",
- hideRangeLabel: false
-};
-
### Slotted pagination bar
There may be scenarios when using `IcDataTable` when pagination and data fetching is done using a backend API.
@@ -2220,11 +2203,12 @@ export const defaultArgs = {
paginationItemLabel: "Item",
paginationItemsPerPageOptions: [
{ label: "5", value: "5" },
- { label: "10", value: "10" },
- { label: "15", value: "15" },
+ { label: "10", value: "10" },
+ { label: "15", value: "15" },
],
paginationPageLabel: "Page",
paginationRangeLabelType: "page",
+ paginationSetToFirstPageOnPaginationChange: false,
paginationShowGoToPageControl: true,
paginationShowItemsPerPageControl: true,
paginationType: "simple",
@@ -2345,6 +2329,7 @@ export const defaultArgs = {
itemsPerPageOptions: args.paginationItemsPerPageOptions,
pageLabel: args.paginationPageLabel,
rangeLabelType: args.paginationRangeLabelType,
+ setToFirstPageOnPaginationChange: args.paginationSetToFirstPageOnPaginationChange,
showGoToPageControl: args.paginationShowGoToPageControl,
showItemsPerPageControl: args.paginationShowItemsPerPageControl,
type: args.paginationType
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 d76ae33c7e..ff66a9e710 100644
--- a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
+++ b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -482,6 +482,43 @@ const PaginationBar = () => (
export default PaginationBar;
```
+### Set to first page when items per page changes
+
+If you have a predefined list of items you want in the itemsPerPage select, the 'All' option can be hidden by setting `hide-all-from-items-per-page` to `true`.
+
+
+
+#### Set to first page when items per page changes code example
+
+```jsx
+import * as React from "react";
+import { IcPaginationBar } from '@ukic/canary-react';
+
+const PaginationBar = () => (
+
+);
+
+export default PaginationBar;
+```
+
### Playground
Go to the separate page for the playground example to view the prop controls.
@@ -500,8 +537,9 @@ export const defaultArgs = {
],
pageLabel: "Page",
rangeLabelType: "page",
- showItemsPerPageControl: false,
- showGoToPageControl: false,
+ setToFirstPageOnPaginationChange: false,
+ showItemsPerPageControl: true,
+ showGoToPageControl: true,
totalItems: 100,
type: "simple"
};
@@ -546,6 +584,7 @@ export const defaultArgs = {
itemsPerPageOptions={args.itemsPerPageOptions}
pageLabel={args.pageLabel}
rangeLabelType={args.rangeLabelType}
+ setToFirstPageOnPaginationChange={args.setToFirstPageOnPaginationChange}
showItemsPerPageControl={args.showItemsPerPageControl}
showGoToPageControl={args.showGoToPageControl}
totalItems={args.totalItems}
diff --git a/packages/canary-web-components/src/components.d.ts b/packages/canary-web-components/src/components.d.ts
index e6a9141139..0c380b7b8a 100644
--- a/packages/canary-web-components/src/components.d.ts
+++ b/packages/canary-web-components/src/components.d.ts
@@ -543,6 +543,10 @@ export namespace Components {
* Whether total number of items and current item range or total number of pages and current page is displayed.
*/
"rangeLabelType"?: IcPaginationLabelTypes;
+ /**
+ * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+ */
+ "setToFirstPageOnPaginationChange"?: boolean;
/**
* If `true`, the 'go to page' control should be displayed.
*/
@@ -1540,6 +1544,10 @@ declare namespace LocalJSX {
* Whether total number of items and current item range or total number of pages and current page is displayed.
*/
"rangeLabelType"?: IcPaginationLabelTypes;
+ /**
+ * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+ */
+ "setToFirstPageOnPaginationChange"?: boolean;
/**
* If `true`, the 'go to page' control should be displayed.
*/
diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
index b5d695de5e..18b99e9d23 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -238,6 +238,7 @@ export class DataTable {
pageLabel: "Page",
hideRangeLabel: false,
hideAllFromItemsPerPage: false,
+ setToFirstPageOnPaginationChange: false,
};
/**
@@ -1979,6 +1980,9 @@ export class DataTable {
hideAllFromItemsPerPage={
paginationBarOptions.hideAllFromItemsPerPage
}
+ setToFirstPageOnPaginationChange={
+ paginationBarOptions.setToFirstPageOnPaginationChange
+ }
>
)}
diff --git a/packages/canary-web-components/src/components/ic-data-table/readme.md b/packages/canary-web-components/src/components/ic-data-table/readme.md
index 8e40a35824..fa02e20835 100644
--- a/packages/canary-web-components/src/components/ic-data-table/readme.md
+++ b/packages/canary-web-components/src/components/ic-data-table/readme.md
@@ -7,34 +7,34 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `caption` _(required)_ | `caption` | The title for the table only visible to screen readers. | `string` | `undefined` |
-| `columnHeaderTruncation` | `column-header-truncation` | Determines whether the column header should be truncated and display a tooltip. Default is `false`. | `boolean` | `false` |
-| `columns` _(required)_ | -- | The column headers for the table. | `IcDataTableColumnObject[]` | `undefined` |
-| `data` | -- | The row content for the table. | `IcDataTableDataType[]` | `undefined` |
-| `density` | `density` | Set the density of the table including font and padding. | `"default" \| "dense" \| "spacious"` | `"default"` |
-| `embedded` | `embedded` | Applies a border to the table container. | `boolean` | `false` |
-| `globalRowHeight` | `global-row-height` | Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method. | `"auto" \| number` | `"auto"` |
-| `height` | `height` | Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`. | `string` | `undefined` |
-| `hideColumnHeaders` | `hide-column-headers` | If `true`, column headers will not be visible. | `boolean` | `false` |
-| `loading` | `loading` | When set to `true`, the full table will show a loading state, featuring a radial indicator. | `boolean` | `false` |
-| `loadingOptions` | -- | Sets the props for the circular loading indicator used in the loading state. | `{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; }` | `undefined` |
-| `maxWidth` | `max-width` | Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`. | `string` | `undefined` |
-| `minWidth` | `min-width` | Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`. | `string` | `undefined` |
-| `minimumLoadingDisplayDuration` | `minimum-loading-display-duration` | The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component. | `number` | `1000` |
-| `paginationBarOptions` | -- | Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored. | `IcPaginationBarOptions` | `{ itemsPerPageOptions: [ { label: "10", value: "10" }, { label: "25", value: "25" }, { label: "50", value: "50" }, ], rangeLabelType: "page", type: "simple", showItemsPerPageControl: true, showGoToPageControl: true, alignment: "right", appearance: "default", itemLabel: "Item", pageLabel: "Page", hideRangeLabel: false, hideAllFromItemsPerPage: false, }` |
-| `showPagination` | `show-pagination` | If `true`, adds a pagination bar to the bottom of the table. | `boolean` | `false` |
-| `sortOptions` | -- | Sets the order columns will be sorted in and allows for 'default' sorts to be added. | `{ sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string; }` | `{ sortOrders: ["unsorted", "ascending", "descending"], defaultColumn: "", }` |
-| `sortable` | `sortable` | If `true`, allows table columns to be sorted using applied sort buttons. | `boolean` | `false` |
-| `stickyColumnHeaders` | `sticky-column-headers` | If `true`, column headers will remain at the top of the table when scrolling vertically. | `boolean` | `false` |
-| `stickyRowHeaders` | `sticky-row-headers` | If `true`, row headers will remain to the left when scrolling horizontally. | `boolean` | `false` |
-| `tableLayout` | `table-layout` | Sets the layout of the table | `"auto" \| "fixed"` | `"fixed"` |
-| `truncationPattern` | `truncation-pattern` | Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons. | `"show-hide" \| "tooltip"` | `undefined` |
-| `updating` | `updating` | If `true`, the table displays a linear loading indicator below the header row to indicate an updating state. | `boolean` | `false` |
-| `updatingOptions` | -- | Sets the props for the linear loading indicator used in the updating state. | `{ appearance?: IcThemeForegroundNoDefault; description?: string; max?: number; min?: number; progress?: number; }` | `undefined` |
-| `variableRowHeight` | -- | Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property. | `(params: { [key: string]: any; index: number; }) => IcDataTableRowHeights` | `undefined` |
-| `width` | `width` | Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`. | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `caption` _(required)_ | `caption` | The title for the table only visible to screen readers. | `string` | `undefined` |
+| `columnHeaderTruncation` | `column-header-truncation` | Determines whether the column header should be truncated and display a tooltip. Default is `false`. | `boolean` | `false` |
+| `columns` _(required)_ | -- | The column headers for the table. | `IcDataTableColumnObject[]` | `undefined` |
+| `data` | -- | The row content for the table. | `IcDataTableDataType[]` | `undefined` |
+| `density` | `density` | Set the density of the table including font and padding. | `"default" \| "dense" \| "spacious"` | `"default"` |
+| `embedded` | `embedded` | Applies a border to the table container. | `boolean` | `false` |
+| `globalRowHeight` | `global-row-height` | Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method. | `"auto" \| number` | `"auto"` |
+| `height` | `height` | Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`. | `string` | `undefined` |
+| `hideColumnHeaders` | `hide-column-headers` | If `true`, column headers will not be visible. | `boolean` | `false` |
+| `loading` | `loading` | When set to `true`, the full table will show a loading state, featuring a radial indicator. | `boolean` | `false` |
+| `loadingOptions` | -- | Sets the props for the circular loading indicator used in the loading state. | `{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; }` | `undefined` |
+| `maxWidth` | `max-width` | Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`. | `string` | `undefined` |
+| `minWidth` | `min-width` | Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`. | `string` | `undefined` |
+| `minimumLoadingDisplayDuration` | `minimum-loading-display-duration` | The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component. | `number` | `1000` |
+| `paginationBarOptions` | -- | Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored. | `IcPaginationBarOptions` | `{ itemsPerPageOptions: [ { label: "10", value: "10" }, { label: "25", value: "25" }, { label: "50", value: "50" }, ], rangeLabelType: "page", type: "simple", showItemsPerPageControl: true, showGoToPageControl: true, alignment: "right", appearance: "default", itemLabel: "Item", pageLabel: "Page", hideRangeLabel: false, hideAllFromItemsPerPage: false, setToFirstPageOnPaginationChange: false, }` |
+| `showPagination` | `show-pagination` | If `true`, adds a pagination bar to the bottom of the table. | `boolean` | `false` |
+| `sortOptions` | -- | Sets the order columns will be sorted in and allows for 'default' sorts to be added. | `{ sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string; }` | `{ sortOrders: ["unsorted", "ascending", "descending"], defaultColumn: "", }` |
+| `sortable` | `sortable` | If `true`, allows table columns to be sorted using applied sort buttons. | `boolean` | `false` |
+| `stickyColumnHeaders` | `sticky-column-headers` | If `true`, column headers will remain at the top of the table when scrolling vertically. | `boolean` | `false` |
+| `stickyRowHeaders` | `sticky-row-headers` | If `true`, row headers will remain to the left when scrolling horizontally. | `boolean` | `false` |
+| `tableLayout` | `table-layout` | Sets the layout of the table | `"auto" \| "fixed"` | `"fixed"` |
+| `truncationPattern` | `truncation-pattern` | Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons. | `"show-hide" \| "tooltip"` | `undefined` |
+| `updating` | `updating` | If `true`, the table displays a linear loading indicator below the header row to indicate an updating state. | `boolean` | `false` |
+| `updatingOptions` | -- | Sets the props for the linear loading indicator used in the updating state. | `{ appearance?: IcThemeForegroundNoDefault; description?: string; max?: number; min?: number; progress?: number; }` | `undefined` |
+| `variableRowHeight` | -- | Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property. | `(params: { [key: string]: any; index: number; }) => IcDataTableRowHeights` | `undefined` |
+| `width` | `width` | Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`. | `string` | `undefined` |
## Events
diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.stories.mdx b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.stories.mdx
index eaf553d05d..2282db4573 100644
--- a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.stories.mdx
+++ b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.stories.mdx
@@ -373,3 +373,33 @@ If you have a predefined list of items you want in the itemsPerPage select, the
hide-all-from-items-per-page="true"
>
```
+
+### Set to first page when items per page changes
+
+If you have a predefined list of items you want in the itemsPerPage select, the 'All' option can be hidden by setting `hide-all-from-items-per-page` to `true`.
+
+
+
+#### Set to first page when items per page changes code example
+
+```html
+
+```
diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
index fa3fe46795..c0d7b18188 100644
--- a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
+++ b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
@@ -82,6 +82,7 @@ export class PaginationBar {
* The current page number to be displayed on the pagination bar.
*/
@Prop() currentPage?: number = 1;
+
@Watch("currentPage")
watchPageNumberHandler(): void {
this.activePage = this.currentPage;
@@ -176,6 +177,16 @@ export class PaginationBar {
this.setPaginationBarContent();
}
+ /**
+ If `true`, the pagination bar is set to the first page when the 'items per page' changes
+ */
+ @Prop() setToFirstPageOnPaginationChange?: boolean = false;
+
+ @Watch("setToFirstPageOnPaginationChange")
+ watchSetToFirstPageOnPaginationChange(): void {
+ this.setPaginationBarContent();
+ }
+
/**
* Emitted when a page is navigated to via the 'go to' input.
* The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
@@ -342,11 +353,23 @@ export class PaginationBar {
if (focus) el.setFocus();
};
+ private setToFirstPage = () => {
+ const firstPage = 1;
+ this.changePage(firstPage);
+ this.paginationEl?.setCurrentPage(firstPage);
+ this.activePage = firstPage;
+ this.icPageChange.emit({ value: firstPage });
+ };
+
private setItemsPerPage = (newValue: number) => {
if (this.itemsPerPage !== newValue) {
this.itemsPerPage = newValue;
this.itemsPerPageString = newValue.toString();
this.icItemsPerPageChange.emit({ value: this.itemsPerPage });
+
+ if (this.setToFirstPageOnPaginationChange) {
+ this.setToFirstPage();
+ }
}
this.totalPages =
diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/readme.md b/packages/canary-web-components/src/components/ic-pagination-bar/readme.md
index dc3a96ec6d..0dc3e3c9fb 100644
--- a/packages/canary-web-components/src/components/ic-pagination-bar/readme.md
+++ b/packages/canary-web-components/src/components/ic-pagination-bar/readme.md
@@ -7,21 +7,22 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- |
-| `alignment` | `alignment` | Sets the alignment of the items in the pagination bar. | `"left" \| "right" \| "space-between"` | `"right"` |
-| `appearance` | `appearance` | Sets the styling for the items in the pagination bar. | `"dark" \| "default" \| "light"` | `"default"` |
-| `currentPage` | `current-page` | The current page number to be displayed on the pagination bar. | `number` | `1` |
-| `hideAllFromItemsPerPage` | `hide-all-from-items-per-page` | If `true`, the 'All' option will be hidden from the 'items per page' select input. | `boolean` | `false` |
-| `hideRangeLabel` | `hide-range-label` | If `true`, the number of total items and current item range or number of total pages and current page will be hidden. | `boolean` | `false` |
-| `itemLabel` | `item-label` | The text which will be used in place of 'Item' on the pagination bar. | `string` | `"Item"` |
-| `itemsPerPageOptions` | -- | The options which will be displayed for 'items per page' select input. | `{ label: string; value: string; }[]` | `undefined` |
-| `pageLabel` | `page-label` | The text which will be used in place of 'Page' on the pagination bar. | `string` | `"Page"` |
-| `rangeLabelType` | `range-label-type` | Whether total number of items and current item range or total number of pages and current page is displayed. | `"data" \| "page"` | `"page"` |
-| `showGoToPageControl` | `show-go-to-page-control` | If `true`, the 'go to page' control should be displayed. | `boolean` | `false` |
-| `showItemsPerPageControl` | `show-items-per-page-control` | If `true`, the select input to control 'items per page' should be displayed. | `boolean` | `false` |
-| `totalItems` _(required)_ | `total-items` | Total number of items to be displayed across all pages. | `number` | `undefined` |
-| `type` | `type` | Whether the displayed pagination is simple or complex. | `"complex" \| "simple"` | `"simple"` |
+| Property | Attribute | Description | Type | Default |
+| ---------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- |
+| `alignment` | `alignment` | Sets the alignment of the items in the pagination bar. | `"left" \| "right" \| "space-between"` | `"right"` |
+| `appearance` | `appearance` | Sets the styling for the items in the pagination bar. | `"dark" \| "default" \| "light"` | `"default"` |
+| `currentPage` | `current-page` | The current page number to be displayed on the pagination bar. | `number` | `1` |
+| `hideAllFromItemsPerPage` | `hide-all-from-items-per-page` | If `true`, the 'All' option will be hidden from the 'items per page' select input. | `boolean` | `false` |
+| `hideRangeLabel` | `hide-range-label` | If `true`, the number of total items and current item range or number of total pages and current page will be hidden. | `boolean` | `false` |
+| `itemLabel` | `item-label` | The text which will be used in place of 'Item' on the pagination bar. | `string` | `"Item"` |
+| `itemsPerPageOptions` | -- | The options which will be displayed for 'items per page' select input. | `{ label: string; value: string; }[]` | `undefined` |
+| `pageLabel` | `page-label` | The text which will be used in place of 'Page' on the pagination bar. | `string` | `"Page"` |
+| `rangeLabelType` | `range-label-type` | Whether total number of items and current item range or total number of pages and current page is displayed. | `"data" \| "page"` | `"page"` |
+| `setToFirstPageOnPaginationChange` | `set-to-first-page-on-pagination-change` | If `true`, the pagination bar is set to the first page when the 'items per page' changes | `boolean` | `false` |
+| `showGoToPageControl` | `show-go-to-page-control` | If `true`, the 'go to page' control should be displayed. | `boolean` | `false` |
+| `showItemsPerPageControl` | `show-items-per-page-control` | If `true`, the select input to control 'items per page' should be displayed. | `boolean` | `false` |
+| `totalItems` _(required)_ | `total-items` | Total number of items to be displayed across all pages. | `number` | `undefined` |
+| `type` | `type` | Whether the displayed pagination is simple or complex. | `"complex" \| "simple"` | `"simple"` |
## Events
diff --git a/packages/canary-web-components/src/utils/types.ts b/packages/canary-web-components/src/utils/types.ts
index 923597b94d..81a4077405 100644
--- a/packages/canary-web-components/src/utils/types.ts
+++ b/packages/canary-web-components/src/utils/types.ts
@@ -190,6 +190,7 @@ export interface IcPaginationBarOptions {
pageLabel?: string;
hideRangeLabel?: boolean;
hideAllFromItemsPerPage?: boolean;
+ setToFirstPageOnPaginationChange?: boolean;
}
export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;