feat(paginator): add initialPage prop for page initialization

apps/showcase/doc/common/apidoc/index.json

@@ -46804,6 +46804,14 @@
                             "default": "true",
                             "description": "Whether to show the paginator even there is only one page."
                         },
+                        {
+                            "name": "initialPage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of the initial page to display"
+                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -100576,4 +100584,4 @@
             }
         }
     }
-}
+}

packages/primevue/src/paginator/BasePaginator.vue

@@ -37,6 +37,10 @@ export default {
         alwaysShow: {
             type: Boolean,
             default: true
+        },
+        initialPage: {
+            type: Number,
+            default: 0
         }
     },
     style: PaginatorStyle,

packages/primevue/src/paginator/Paginator.d.ts

@@ -270,6 +270,11 @@ export interface PaginatorProps {
      * @defaultValue true
      */
     alwaysShow?: boolean | undefined;
+    /**
+     * Number of the initial page to display.
+     * @defaultValue 1
+     */
+    initialPage?: number | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

packages/primevue/src/paginator/Paginator.spec.js

@@ -48,4 +48,32 @@ describe('Paginator.vue', () => {
 
         expect(wrapper.find('.p-select-label').text()).toBe('20');
     });
+
+    it('should initialize on the correct page when initialPage is set to a value greater than 1', async () => {
+        await wrapper.setProps({ initialPage: 2 });
+
+        expect(wrapper.vm.page).toBe(1);
+        expect(wrapper.findAll('.p-paginator-page')[1].classes()).toContain('p-paginator-page-selected');
+    });
+
+    it('should initialize on page 0 when initialPage is 0', async () => {
+        await wrapper.setProps({ initialPage: 0 });
+
+        expect(wrapper.vm.page).toBe(0);
+        expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-paginator-page-selected');
+    });
+
+    it('should initialize on page 0 when initialPage is 1', async () => {
+        await wrapper.setProps({ initialPage: 1 });
+
+        expect(wrapper.vm.page).toBe(0);
+        expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-paginator-page-selected');
+    });
+
+    it('should not change page when initialPage is negative', async () => {
+        await wrapper.setProps({ initialPage: -1 });
+
+        expect(wrapper.vm.page).toBe(0);
+        expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-paginator-page-selected');
+    });
 });

packages/primevue/src/paginator/Paginator.vue

@@ -140,7 +140,15 @@ export default {
             if (this.page > 0 && newValue && this.d_first >= newValue) {
                 this.changePage(this.pageCount - 1);
             }
-        }
+        },
+        initialPage(newPage) {
+            const pageIndex = newPage - 1;
+
+            if (pageIndex >= 0 && pageIndex < this.pageCount && pageIndex !== this.page) {
+                this.d_first = pageIndex * this.d_rows;
+                this.changePage(pageIndex);
+            }
+        },
     },
     mounted() {
         this.createStyle();