Merge pull request #1343 from multiversx/mm-add-pagination-items-count

Address Table Pagination Count Support
multiversx · Dec 9, 2024 · 818caf9 · 818caf9
2 parents 3a12eed + 751168b
commit 818caf9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Add pagination item count support to "AddressTable"](https://github.com/multiversx/mx-sdk-dapp/pull/1343)
+
 ## [[v3.1.1](https://github.com/multiversx/mx-sdk-dapp/pull/1342)] - 2024-12-09
+
 - [Fix dApp compatibility check (webview provider)](https://github.com/multiversx/mx-sdk-dapp/pull/1341)
 
 ## [[v3.1.0](https://github.com/multiversx/mx-sdk-dapp/pull/1339)] - 2024-12-05

diff --git a/src/UI/Pagination/Pagination.tsx b/src/UI/Pagination/Pagination.tsx
@@ -91,7 +91,7 @@ const PaginationComponent = ({
     }
   }, [currentPage, currentPageIndex]);
 
-  if (totalPages === 1) {
+  if (totalPages <= 1) {
     return null;
   }
 

diff --git a/src/UI/ledger/LedgerLoginContainer/AddressTable/AddressTable.tsx b/src/UI/ledger/LedgerLoginContainer/AddressTable/AddressTable.tsx
@@ -12,7 +12,7 @@ import { LedgerColumnsEnum } from '../enums';
 import { LedgerLoading } from '../LedgerLoading';
 
 const ADDRESSES_PER_PAGE = 10;
-const TOTAL_ADDRESSES_PAGES = 500;
+const TOTAL_ADDRESSES_COUNT = 5000;
 
 export interface AddressTablePropsType extends WithClassnameType {
   accounts: string[];
@@ -27,6 +27,7 @@ export interface AddressTablePropsType extends WithClassnameType {
     ledgerModalTableSelectedItemClassName?: string;
     ledgerModalTableNavigationButtonDisabledClassName?: string;
   };
+  addressesCount?: number;
   customContentComponent?: ReactNode;
   dataTestId?: string;
   loading: boolean;
@@ -42,6 +43,7 @@ export interface AddressTablePropsType extends WithClassnameType {
 const AddressTableComponent = ({
   accounts,
   addressTableClassNames,
+  addressesCount = TOTAL_ADDRESSES_COUNT,
   className = 'dapp-ledger-address-table',
   customContentComponent,
   dataTestId = DataTestIdsEnum.addressTableContainer,
@@ -140,6 +142,7 @@ const AddressTableComponent = ({
     onGoToSpecificPage(newPage - 1);
   };
 
+  const totalPages = Math.ceil(addressesCount / ADDRESSES_PER_PAGE);
   const columns = [
     LedgerColumnsEnum.Address,
     LedgerColumnsEnum.Balance,
@@ -213,7 +216,7 @@ const AddressTableComponent = ({
         <Pagination
           className={styles?.ledgerAddressTablePagination}
           currentPage={startIndex + 1}
-          totalPages={TOTAL_ADDRESSES_PAGES}
+          totalPages={totalPages}
           onPageChange={handlePageChange}
           disabledClassName={ledgerModalTableNavigationButtonDisabledClassName}
           buttonsClassNames={ledgerModalTableNavigationButtonClassName}