Pagination improvements

packages/app/src/components/Table/Pagination.tsx

@@ -10,9 +10,7 @@ import { GridDivCenteredCol } from 'components/layout/grid'
 import { resetButtonCSS } from 'styles/common'
 import media from 'styles/media'
 
-import StakingPagination from './StakingPagination'
-
-type PaginationProps = {
+export type PaginationProps = {
 	pageIndex: number
 	pageCount: number
 	canNextPage: boolean
@@ -21,7 +19,6 @@ type PaginationProps = {
 	setPage: (page: number) => void
 	previousPage: () => void
 	nextPage: () => void
-	variant?: 'default' | 'staking'
 	extra?: React.ReactNode
 }
 
@@ -35,15 +32,14 @@ const Pagination: FC<PaginationProps> = React.memo(
 		setPage,
 		nextPage,
 		previousPage,
-		variant = 'default',
 		extra,
 	}) => {
 		const { t } = useTranslation()
 
 		const firstPage = () => setPage(0)
 		const toLastPage = () => setPage(pageCount - 1)
 
-		return variant === 'default' ? (
+		return (
 			<>
 				<PaginationContainer compact={compact}>
 					<ArrowButtonContainer>
@@ -72,18 +68,6 @@ const Pagination: FC<PaginationProps> = React.memo(
 				</PaginationContainer>
 				{extra}
 			</>
-		) : (
-			<StakingPagination
-				compact={compact}
-				pageIndex={pageIndex}
-				pageCount={pageCount}
-				canNextPage={canNextPage}
-				canPreviousPage={canPreviousPage}
-				setPage={setPage}
-				previousPage={previousPage}
-				nextPage={nextPage}
-				extra={extra}
-			/>
 		)
 	}
 )

packages/app/src/components/Table/Table.tsx

@@ -7,7 +7,14 @@ import {
 	getSortedRowModel,
 } from '@tanstack/react-table'
 import type { ColumnDef, Row, SortingState, VisibilityState } from '@tanstack/react-table'
-import React, { DependencyList, useCallback, useMemo, useRef, useState } from 'react'
+import React, {
+	DependencyList,
+	FunctionComponent,
+	useCallback,
+	useMemo,
+	useRef,
+	useState,
+} from 'react'
 import styled, { css } from 'styled-components'
 import { genericMemo } from 'types/helpers'
 
@@ -18,7 +25,7 @@ import Loader from 'components/Loader'
 import { Body } from 'components/Text'
 import media from 'styles/media'
 
-import Pagination from './Pagination'
+import Pagination, { PaginationProps } from './Pagination'
 import TableBodyRow, { TableCell } from './TableBodyRow'
 
 const CARD_HEIGHT_MD = '50px'
@@ -73,8 +80,8 @@ type TableProps<T> = {
 	noBottom?: boolean
 	columnVisibility?: VisibilityState
 	columnsDeps?: DependencyList
-	paginationVariant?: 'default' | 'staking'
 	paginationExtra?: React.ReactNode
+	CustomPagination?: FunctionComponent<PaginationProps>
 }
 
 const Table = <T,>({
@@ -96,8 +103,8 @@ const Table = <T,>({
 	noBottom = false,
 	columnVisibility,
 	columnsDeps = [],
-	paginationVariant = 'default',
 	paginationExtra,
+	CustomPagination,
 }: TableProps<T>) => {
 	const [sorting, setSorting] = useState<SortingState>(sortBy)
 	const [pagination, setPagination] = useState<PaginationState>({
@@ -196,7 +203,7 @@ const Table = <T,>({
 							})}
 						</TableBody>
 					)}
-					{(shouldShowPagination || paginationExtra) && paginationVariant !== 'staking' ? (
+					{(shouldShowPagination || paginationExtra) && !CustomPagination ? (
 						<Pagination
 							compact={compactPagination}
 							pageIndex={table.getState().pagination.pageIndex}
@@ -206,14 +213,13 @@ const Table = <T,>({
 							setPage={table.setPageIndex}
 							previousPage={table.previousPage}
 							nextPage={table.nextPage}
-							variant={paginationVariant}
 							extra={paginationExtra}
 						/>
 					) : undefined}
 				</ReactTable>
 			</TableContainer>
-			{paginationVariant === 'staking' && (
-				<Pagination
+			{CustomPagination && (
+				<CustomPagination
 					compact={compactPagination}
 					pageIndex={table.getState().pagination.pageIndex}
 					pageCount={table.getPageCount()}
@@ -222,7 +228,6 @@ const Table = <T,>({
 					setPage={table.setPageIndex}
 					previousPage={table.previousPage}
 					nextPage={table.nextPage}
-					variant={paginationVariant}
 					extra={paginationExtra}
 				/>
 			)}

packages/app/src/sections/dashboard/Stake/EscrowTable.tsx

@@ -10,8 +10,8 @@ import Button from 'components/Button'
 import { Checkbox } from 'components/Checkbox'
 import { FlexDivCol, FlexDivRow, FlexDivRowCentered } from 'components/layout/flex'
 import { DesktopLargeOnlyView, DesktopSmallOnlyView } from 'components/Media'
-import Table from 'components/Table'
-import { TableCellHead, TableHeader } from 'components/Table'
+import Table, { TableCellHead, TableHeader } from 'components/Table'
+import StakingPagination from 'components/Table/StakingPagination'
 import { Body } from 'components/Text'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { vestEscrowedRewards, vestEscrowedRewardsV2 } from 'state/staking/actions'
@@ -157,7 +157,7 @@ const EscrowTable = () => {
 					pageSize={4}
 					showPagination
 					columnsDeps={columnsDeps}
-					paginationVariant="staking"
+					CustomPagination={StakingPagination}
 					paginationExtra={<EscrowStatsContainer />}
 					columns={[
 						{
@@ -273,8 +273,8 @@ const EscrowTable = () => {
 					pageSize={5}
 					showPagination
 					columnsDeps={columnsDeps}
-					paginationVariant="default"
 					paginationExtra={<EscrowStatsContainer />}
+					CustomPagination={StakingPagination}
 					columns={[
 						{
 							header: () => (

packages/app/src/sections/dashboard/Stake/StakingTabs.tsx

@@ -8,7 +8,6 @@ import { selectSelectedEpoch } from 'state/staking/selectors'
 import media from 'styles/media'
 
 import RewardsTab from './RewardsTab'
-
 import EscrowTab from './EscrowTab'
 import { StakeTab } from './StakingPortfolio'
 import StakingTab from './StakingTab'