feat(nui): Table pagination

overextended · Jan 3, 2022 · 0e2d2b7 · 0e2d2b7
1 parent 1ecb938
commit 0e2d2b7
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 50 deletions.
diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -27,7 +27,7 @@ const App: React.FC = () => {
         <MotionBox
           animate={{ y: [100, 0] }}
           width="60%"
-          height="60%"
+          height="50%"
           backgroundColor="#191E26"
           borderRadius="1vh"
           color="white"

diff --git a/ui/src/components/MainContent.tsx b/ui/src/components/MainContent.tsx
@@ -5,7 +5,7 @@ const MainContent: React.FC = ({ children }) => {
   return (
     <>
       <Center h="95%" alignItems="stretch">
-        <Box h="100%" w="50%" backgroundColor="#1B2129" flex="1">
+        <Box h="100%" w="50%" backgroundColor="#1B2129" flex="1" overflowY="scroll">
           {children}
         </Box>
       </Center>

diff --git a/ui/src/components/NavBars/LeftBar.tsx b/ui/src/components/NavBars/LeftBar.tsx
@@ -24,7 +24,7 @@ const LeftBar: React.FC = () => {
   });
 
   return (
-    <Box p="1.2vh" fontSize="1.5vh" float="left" w="12%" height="55vh" overflowY="scroll">
+    <Box p="1.2vh" fontSize="1.5vh" float="left" w="13%" height="55vh" overflowY="scroll">
       <VStack align="left">
         {initData.resources.map((resource, index) => (
           <Link to={resource} key={`${resource}-${index}`}>

diff --git a/ui/src/components/Resource.tsx b/ui/src/components/Resource.tsx
@@ -3,9 +3,16 @@ import { useEffect, useState, useMemo } from 'react';
 import { fetchNui } from '../utils/fetchNui';
 import { useNuiEvent } from '../hooks/useNuiEvent';
 import { debugData } from '../utils/debugData';
-import { Table, Thead, Tbody, Tr, Th, Td, chakra } from '@chakra-ui/react';
-import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
-import { useTable, useSortBy, Column } from 'react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, chakra, Flex, IconButton, Text } from '@chakra-ui/react';
+import {
+  TriangleDownIcon,
+  TriangleUpIcon,
+  ArrowLeftIcon,
+  ChevronLeftIcon,
+  ArrowRightIcon,
+  ChevronRightIcon,
+} from '@chakra-ui/icons';
+import { useTable, useSortBy, Column, usePagination } from 'react-table';
 
 interface QueryData {
   date: number;
@@ -63,58 +70,114 @@ const Resource: React.FC = () => {
     []
   );
 
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }, useSortBy);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    state: { pageIndex },
+    prepareRow,
+  } = useTable({ columns, data, initialState: { pageSize: 12 } }, useSortBy, usePagination);
 
   // Todo: pagination
   return (
-    <Table {...getTableProps} size="sm">
-      <Thead>
-        {headerGroups.map((header): any => (
-          <Tr {...header.getHeaderGroupProps()}>
-            {header.headers.map((column) => (
-              <Th
-                {...column.getHeaderProps(column.getSortByToggleProps())}
-                color="white"
-                fontFamily="Poppins"
-                borderBottomColor="#313C4A"
-              >
-                {column.render('Header')}
-                <chakra.span pl="4">
-                  {column.isSorted ? (
-                    column.isSortedDesc ? (
-                      <TriangleDownIcon aria-label="sorted descending" />
-                    ) : (
-                      <TriangleUpIcon aria-label="sorted ascending" />
-                    )
-                  ) : null}
-                </chakra.span>
-              </Th>
-            ))}
-          </Tr>
-        ))}
-      </Thead>
-      <Tbody {...getTableBodyProps()}>
-        {rows.map((row) => {
-          prepareRow(row);
-          return (
-            <Tr {...row.getRowProps()}>
-              {row.cells.map((cell) => (
-                <Td
-                  {...cell.getCellProps()}
+    <>
+      <Table {...getTableProps} size="sm">
+        <Thead>
+          {headerGroups.map((header): any => (
+            <Tr {...header.getHeaderGroupProps()}>
+              {header.headers.map((column) => (
+                <Th
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  color="white"
                   fontFamily="Poppins"
-                  wordBreak="break-word"
-                  textOverflow="ellipsis"
-                  overflow="hidden"
                   borderBottomColor="#313C4A"
                 >
-                  {cell.render('Cell')}
-                </Td>
+                  {column.render('Header')}
+                  <chakra.span pl="4">
+                    {column.isSorted ? (
+                      column.isSortedDesc ? (
+                        <TriangleDownIcon aria-label="sorted descending" />
+                      ) : (
+                        <TriangleUpIcon aria-label="sorted ascending" />
+                      )
+                    ) : null}
+                  </chakra.span>
+                </Th>
               ))}
             </Tr>
-          );
-        })}
-      </Tbody>
-    </Table>
+          ))}
+        </Thead>
+        <Tbody {...getTableBodyProps()}>
+          {page.map((row) => {
+            prepareRow(row);
+            return (
+              <Tr {...row.getRowProps()}>
+                {row.cells.map((cell) => (
+                  <Td
+                    {...cell.getCellProps()}
+                    fontFamily="Poppins"
+                    wordBreak="break-word"
+                    textOverflow="ellipsis"
+                    overflow="hidden"
+                    borderBottomColor="#313C4A"
+                  >
+                    {cell.render('Cell')}
+                  </Td>
+                ))}
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </Table>
+
+      <Flex mt={3} justifyContent="center " alignItems="center" p="1.2vh">
+        <Flex>
+          <IconButton
+            icon={<ArrowLeftIcon h={3} w={3} color="black" />}
+            aria-label="Last page"
+            onClick={() => gotoPage(0)}
+            size="sm"
+            isDisabled={!canPreviousPage}
+          />
+          <IconButton
+            aria-label="Previous page"
+            onClick={previousPage}
+            isDisabled={!canPreviousPage}
+            icon={<ChevronLeftIcon h={6} w={6} color="black" />}
+            size="sm"
+            ml={4}
+          />
+        </Flex>
+        <Text align="center" pl={4} pr={4}>
+          Page {pageIndex + 1} of {pageOptions.length}
+        </Text>
+        <Flex>
+          <IconButton
+            aria-label="Next page"
+            onClick={nextPage}
+            size="sm"
+            isDisabled={!canNextPage}
+            icon={<ChevronRightIcon h={6} w={6} color="black" />}
+          />
+          <IconButton
+            aria-label="Last page"
+            onClick={() => gotoPage(pageCount - 1)}
+            isDisabled={!canNextPage}
+            icon={<ArrowRightIcon h={3} w={3} color="black" />}
+            size="sm"
+            ml={4}
+          />
+        </Flex>
+      </Flex>
+    </>
   );
 };