feat: hide next/previous page buttons when all rows can fit on one page

ccontrols · Mar 6, 2021 · 9f3b882 · 9f3b882
1 parent 4c1f2c9
commit 9f3b882
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/ui/components/src/Table/TablePagination.tsx b/ui/components/src/Table/TablePagination.tsx
@@ -74,31 +74,33 @@ export const TablePagination: FC<UsePaginationInstanceProps<{
 
   return (
     <Box variant="table.pagination.container">
-      <Box variant="table.pagination.navigation">
-        <Box variant="table.pagination.navigation.button">
-          <Button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
-            {'<<'}
-          </Button>
+      {(canPreviousPage || canNextPage) && (
+        <Box variant="table.pagination.navigation">
+          <Box variant="table.pagination.navigation.button">
+            <Button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+              {'<<'}
+            </Button>
+          </Box>
+          <Box variant="table.pagination.navigation.button">
+            <Button onClick={() => previousPage()} disabled={!canPreviousPage}>
+              {'<'}
+            </Button>
+          </Box>
+          <Box variant="table.pagination.navigation.button">
+            <Button onClick={() => nextPage()} disabled={!canNextPage}>
+              {'>'}
+            </Button>
+          </Box>
+          <Box variant="table.pagination.navigation.button">
+            <Button
+              onClick={() => gotoPage(pageCount - 1)}
+              disabled={!canNextPage}
+            >
+              {'>>'}
+            </Button>
+          </Box>
         </Box>
-        <Box variant="table.pagination.navigation.button">
-          <Button onClick={() => previousPage()} disabled={!canPreviousPage}>
-            {'<'}
-          </Button>
-        </Box>
-        <Box variant="table.pagination.navigation.button">
-          <Button onClick={() => nextPage()} disabled={!canNextPage}>
-            {'>'}
-          </Button>
-        </Box>
-        <Box variant="table.pagination.navigation.button">
-          <Button
-            onClick={() => gotoPage(pageCount - 1)}
-            disabled={!canNextPage}
-          >
-            {'>>'}
-          </Button>
-        </Box>
-      </Box>
+      )}
       {pageVisible && (
         <Box variant="table.pagination.page">{pageResolvedTemplate}</Box>
       )}