Set the correct pagination for the table

thesis · Jan 23, 2024 · 4b967f4 · 4b967f4
1 parent 4692228
commit 4b967f4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/dapp/src/components/TransactionHistory/Table/Footer.tsx b/dapp/src/components/TransactionHistory/Table/Footer.tsx
@@ -2,9 +2,13 @@ import React from "react"
 import { UseTransactionHistoryTableResult } from "#/types"
 import { HStack, IconButton } from "@chakra-ui/react"
 import { TextSm } from "#/components/shared/Typography"
-import { PAGINATION_BUTTONS } from "./utils/pagination"
+import { PAGINATION_BUTTONS, getPaginationState } from "./utils/pagination"
 
 function TableFooter({ table }: { table: UseTransactionHistoryTableResult }) {
+  const { pageIndex, pageSize } = table.getState().pagination
+  const rowCount = table.getFilteredRowModel().rows.length
+  const { rowMin, rowMax } = getPaginationState(pageIndex, pageSize, rowCount)
+
   return (
     <HStack mt={6}>
       {PAGINATION_BUTTONS.map(({ ariaLabel, onClick, isDisabled, icon }) => (
@@ -18,9 +22,7 @@ function TableFooter({ table }: { table: UseTransactionHistoryTableResult }) {
         />
       ))}
       <TextSm>
-        {`Page ${
-          table.getState().pagination.pageIndex + 1
-        } of ${table.getPageCount()}`}
+        {`Showing ${rowMin}-${rowMax} out of ${rowCount} transactions`}
       </TextSm>
     </HStack>
   )

diff --git a/dapp/src/components/TransactionHistory/Table/utils/pagination.tsx b/dapp/src/components/TransactionHistory/Table/utils/pagination.tsx
@@ -18,3 +18,14 @@ export const PAGINATION_BUTTONS = [
       !table.getCanNextPage(),
   },
 ]
+
+export const getPaginationState = (
+  pageIndex: number,
+  pageSize: number,
+  rowCount: number,
+) => {
+  const rowMin = pageIndex * pageSize + 1
+  const rowMax = Math.min((pageIndex + 1) * pageSize, rowCount)
+
+  return { rowMin, rowMax }
+}
diff --git a/dapp/src/hooks/useTransactionHistoryTable.ts b/dapp/src/hooks/useTransactionHistoryTable.ts
@@ -12,7 +12,7 @@ import { useState } from "react"
 
 const PAGINATION_STATE = {
   pageIndex: 0,
-  pageSize: 2,
+  pageSize: 10,
 }
 
 export function useTransactionHistoryTable({