pagination to volume leaderboard

zulumarkets · Mar 15, 2023 · 76b8f7b · 76b8f7b
1 parent ed5650b
commit 76b8f7b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 9 deletions.
diff --git a/src/pages/MarchMadness/components/Leaderboard/components/TableByVolume/TableByVolume.tsx b/src/pages/MarchMadness/components/Leaderboard/components/TableByVolume/TableByVolume.tsx
@@ -1,9 +1,10 @@
 import Tooltip from 'components/Tooltip';
+import { PaginationWrapper } from 'pages/Quiz/styled-components';
 import useLeaderboardByVolumeQuery, { LeaderboardByVolumeData } from 'queries/marchMadness/useLeaderboardByVolumeQuery';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Column, useTable } from 'react-table';
+import { Column, useTable, usePagination } from 'react-table';
 import { getNetworkId, getWalletAddress } from 'redux/modules/wallet';
 import { RootState } from 'redux/rootReducer';
 import { getDefaultColleteralForNetwork } from 'utils/collaterals';
@@ -164,10 +165,36 @@ const TableByVolume: React.FC<TableByVolumeProps> = ({ searchText }) => {
         return [];
     }, [data, searchText, walletAddress]);
 
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
-        columns,
-        data: filteredData,
-    });
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        prepareRow,
+        rows,
+        state,
+        gotoPage,
+        setPageSize,
+        page,
+    } = useTable(
+        {
+            columns,
+            data: filteredData,
+            initialState: {
+                pageIndex: 0,
+                pageSize: 15,
+            },
+        },
+        usePagination
+    );
+
+    const handleChangePage = (_event: unknown, newPage: number) => {
+        gotoPage(newPage);
+    };
+
+    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPageSize(Number(event.target.value));
+        gotoPage(0);
+    };
 
     const stickyRow = useMemo(() => {
         if (myScore?.length) {
@@ -196,12 +223,12 @@ const TableByVolume: React.FC<TableByVolumeProps> = ({ searchText }) => {
                 <TableHeader>{'By volume'}</TableHeader>
             </TableHeaderContainer>
             <TableContainer>
-                {!filteredData?.length && (
+                {!page?.length && (
                     <NoDataContainer>
                         <NoDataLabel>{t('march-madness.leaderboard.no-data')}</NoDataLabel>
                     </NoDataContainer>
                 )}
-                {filteredData?.length > 0 && (
+                {page?.length > 0 && (
                     <Table {...getTableProps()}>
                         <thead>
                             {headerGroups.map((headerGroup, headerGroupIndex) => (
@@ -216,10 +243,10 @@ const TableByVolume: React.FC<TableByVolumeProps> = ({ searchText }) => {
                         </thead>
                         <tbody {...getTableBodyProps()}>
                             {myScore ? stickyRow : <></>}
-                            {rows.map((row, rowKey) => {
+                            {(page.length ? page : rows).map((row, rowKey) => {
                                 prepareRow(row);
                                 return (
-                                    <TableRow {...row.getRowProps()} key={rowKey} hideBorder={rowKey == rows.length}>
+                                    <TableRow {...row.getRowProps()} key={rowKey} hideBorder={rowKey == page.length}>
                                         {row.cells.map((cell, cellIndex) => {
                                             return (
                                                 <TableRowCell {...cell.getCellProps()} key={cellIndex}>
@@ -234,6 +261,15 @@ const TableByVolume: React.FC<TableByVolumeProps> = ({ searchText }) => {
                     </Table>
                 )}
             </TableContainer>
+            <PaginationWrapper
+                rowsPerPageOptions={[15, 30, 50, 100]}
+                count={filteredData?.length ? filteredData.length : 0}
+                labelRowsPerPage={t(`common.pagination.rows-per-page`)}
+                rowsPerPage={state.pageSize}
+                page={state.pageIndex}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+            />
         </Container>
     );
 };

diff --git a/src/pages/MarchMadness/components/Leaderboard/components/TableByVolume/styled-components.ts b/src/pages/MarchMadness/components/Leaderboard/components/TableByVolume/styled-components.ts
@@ -1,3 +1,4 @@
+import { TablePagination } from '@material-ui/core';
 import styled from 'styled-components';
 
 export const Table = styled.table`
@@ -110,3 +111,33 @@ export const StickyRow = styled(TableRow)`
 `;
 
 export const StickyCell = styled.div``;
+
+export const PaginationWrapper = styled(TablePagination)`
+    border: none !important;
+    display: flex;
+    width: 100%;
+    height: auto;
+    color: #f6f6fe !important;
+    .MuiToolbar-root {
+        padding: 0;
+        display: flex;
+        .MuiSelect-icon {
+            color: #f6f6fe;
+        }
+    }
+    .MuiIconButton-root.Mui-disabled {
+        color: #5f6180;
+    }
+    .MuiTablePagination-toolbar > .MuiTablePagination-caption:last-of-type {
+        display: block;
+    }
+    .MuiTablePagination-input {
+        margin-top: 2px;
+    }
+    .MuiTablePagination-selectRoot {
+        @media (max-width: 767px) {
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+    }
+`;