added items per page prop

Infineon · Jan 22, 2025 · 4642352 · 4642352
1 parent 8a7cd5f
commit 4642352
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/packages/components/src/components/pagination/pagination.tsx b/packages/components/src/components/pagination/pagination.tsx
@@ -13,9 +13,10 @@ export class Pagination {
   @Event() ifxPrevPage: EventEmitter;
   @Prop() currentPage: number = 0;
   @State() internalPage: number = 1;
-  @State() itemsPerPage: number = 10;
+  @State() internalItemsPerPage: number = 10;
   @State() numberOfPages: number[] = [];
   @Prop() total: number = 1;
+  @Prop() itemsPerPage: any[] | string;
 
   private CLASS_DISABLED = "disabled"
   private CLASS_ACTIVE = "active"
@@ -25,9 +26,9 @@ export class Pagination {
   @Listen('ifxSelect')
   setItemsPerPage(e) {
     if(e.detail) {
-      this.itemsPerPage = parseInt(e.detail.label)
+      this.internalItemsPerPage = parseInt(e.detail.label)
     } else { 
-      this.itemsPerPage = 10;
+      this.internalItemsPerPage = 10;
     }
   }
 
@@ -43,8 +44,8 @@ export class Pagination {
     if (isNaN(this.currentPage)) {
       this.currentPage = 1;
     }
-    const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;
-    const itemsPerPage = this.itemsPerPage;
+    const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;
+    const itemsPerPage = this.internalItemsPerPage;
     const totalPageNumber = Math.ceil(total / itemsPerPage);
 
     if (this.currentPage <= 0) {
@@ -81,7 +82,7 @@ export class Pagination {
     let totalPages = this.numberOfPages.length;
     let prevPage = currActive === 0 ? null : currActive;
     let nextPage = currActive + 2 > totalPages ? null : currActive + 2;
-    let itemsPerPage = this.itemsPerPage
+    let itemsPerPage = this.internalItemsPerPage
     this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })
   }
 
@@ -188,7 +189,7 @@ export class Pagination {
               error-message='Error'
               label=''
               placeholder-value='Placeholder'
-              options='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' >
+              options={this.itemsPerPage} >
             </ifx-select>
           </div>
         </div>