possibility to display CurrentItemPerPage in Pagination dropdown and to be re-selected after one change

Author: Gianmarco Manni

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- possibility to display CurrentItemPerPage in Pagination dropdown and to be re-selected after one change
+
 ## [2.1.1] - 2022-12-09
 
 -   Added styling for button groups

src/Paging/Paging.tsx

@@ -26,14 +26,21 @@ function Paging({
   currentRecordCount,
   pagingPossible = true,
   translations,
-  possiblePageItemCounts = [25, 50, 100, 200],
+  possiblePageItemCounts,
   maxPagesShown = 7,
   showControls = true,
   setItemsPerPage,
   setCurrentPage,
 }: PagingProps) {
   const maxPage = Math.ceil(totalRecords / currentItemsPerPage);
   const firstPageShown = Math.max(0, Math.min(currentPage - Math.ceil(maxPagesShown / 2), maxPage - maxPagesShown));
+
+  const possibleItemsPerPage = possiblePageItemCounts ?? [25, 50, 100, 200];
+
+  if (!possibleItemsPerPage.includes(currentItemsPerPage)) {
+    possibleItemsPerPage.concat(currentItemsPerPage).sort((a, b) => a-b);
+  }
+
   return (
     <Row style={{ marginBottom: "20px" }}>
       <Col xs={6}>
@@ -44,7 +51,7 @@ function Paging({
             </DropdownToggle>
             <DropdownMenu>
               <DropdownItem header>{translations.itemsPerPageDropdown}</DropdownItem>
-              {possiblePageItemCounts.map((pageItemCount) => (
+              {possibleItemsPerPage.map((pageItemCount) => (
                 <DropdownItem key={`pageItemCount_${pageItemCount}`} onClick={() => setItemsPerPage(pageItemCount)}>
                   {pageItemCount}
                 </DropdownItem>