From 13c5f6763235e19cca651e5fd1ae1891b9046f48 Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Sun, 1 Feb 2026 17:25:48 +0100
Subject: [PATCH 1/4] refactor: extract table pagination into reusable
 component

Move table pagination logic into seperate component so it can be reused
across the app.

Co-authored-by: roaring30s <okaaycrypto@gmail.com>
---
 components/Table/Pagination.tsx | 67 +++++++++++++++++++++++++++++++++
 components/Table/index.tsx      | 56 ++++++---------------------
 2 files changed, 78 insertions(+), 45 deletions(-)
 create mode 100644 components/Table/Pagination.tsx

diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
new file mode 100644
index 00000000..5a8ee131
--- /dev/null
+++ b/components/Table/Pagination.tsx
@@ -0,0 +1,67 @@
+import { Box, Flex } from "@livepeer/design-system";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  canPrevious: boolean;
+  canNext: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+  css?: object;
+};
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  canPrevious,
+  canNext,
+  onPrevious,
+  onNext,
+  css,
+}: PaginationProps) => {
+  return (
+    <Flex
+      css={{
+        paddingTop: "$4",
+        paddingBottom: "$4",
+        alignItems: "center",
+        justifyContent: "center",
+        ...css,
+      }}
+    >
+      <Box
+        as={ArrowLeftIcon}
+        css={{
+          cursor: "pointer",
+          color: canPrevious ? "$primary11" : "$hiContrast",
+          opacity: canPrevious ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canPrevious) {
+            onPrevious();
+          }
+        }}
+      />
+      <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
+        Page <Box as="span">{currentPage}</Box> of{" "}
+        <Box as="span">{totalPages}</Box>
+      </Box>
+      <Box
+        as={ArrowRightIcon}
+        css={{
+          cursor: "pointer",
+          color: canNext ? "$primary11" : "$hiContrast",
+          opacity: canNext ? 1 : 0.5,
+        }}
+        onClick={() => {
+          if (canNext) {
+            onNext();
+          }
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default Pagination;
diff --git a/components/Table/index.tsx b/components/Table/index.tsx
index 6e9832fa..c0d2df11 100644
--- a/components/Table/index.tsx
+++ b/components/Table/index.tsx
@@ -8,12 +8,7 @@ import {
   Thead,
   Tr,
 } from "@livepeer/design-system";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import { ReactNode } from "react";
 import {
   Column,
@@ -26,6 +21,8 @@ import {
   useTable,
 } from "react-table";
 
+import Pagination from "./Pagination";
+
 function DataTable<T extends object>({
   heading = null,
   input = null,
@@ -243,45 +240,14 @@ function DataTable<T extends object>({
               </Tbody>
             </Table>
           </Box>
-          <Flex
-            css={{
-              paddingTop: "$4",
-              paddingBottom: "$4",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Box
-              as={ArrowLeftIcon}
-              css={{
-                cursor: "pointer",
-                color: canPreviousPage ? "$primary11" : "$hiContrast",
-                opacity: canPreviousPage ? 1 : 0.5,
-              }}
-              onClick={() => {
-                if (canPreviousPage) {
-                  previousPage();
-                }
-              }}
-            />
-            <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
-              Page <Box as="span">{pageIndex + 1}</Box> of{" "}
-              <Box as="span">{pageCount}</Box>
-            </Box>
-            <Box
-              as={ArrowRightIcon}
-              css={{
-                cursor: "pointer",
-                color: canNextPage ? "$primary11" : "$hiContrast",
-                opacity: canNextPage ? 1 : 0.5,
-              }}
-              onClick={() => {
-                if (canNextPage) {
-                  nextPage();
-                }
-              }}
-            />
-          </Flex>
+          <Pagination
+            currentPage={pageIndex + 1}
+            totalPages={pageCount}
+            canPrevious={canPreviousPage}
+            canNext={canNextPage}
+            onPrevious={previousPage}
+            onNext={nextPage}
+          />
         </>
       </Box>
     </>

From c5dcce701b86d1512f9d78bcf2053abc3cf6783c Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 2 Feb 2026 08:36:40 -0700
Subject: [PATCH 2/4] fix: handle zero pages edge case in Pagination component
 (#528)

* Initial plan

* fix: hide pagination when totalPages is 0

Co-authored-by: rickstaa <17570430+rickstaa@users.noreply.github.com>

* Update components/Table/Pagination.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rickstaa <17570430+rickstaa@users.noreply.github.com>
Co-authored-by: ECWireless <40322776+ECWireless@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 components/Table/Pagination.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
index 5a8ee131..186397d4 100644
--- a/components/Table/Pagination.tsx
+++ b/components/Table/Pagination.tsx
@@ -20,6 +20,11 @@ const Pagination = ({
   onNext,
   css,
 }: PaginationProps) => {
+  // Don't render pagination when there are no pages
+  if (totalPages <= 0) {
+    return null;
+  }
+
   return (
     <Flex
       css={{

From d39da6814b5b14199942416747577b6831c2a28f Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 2 Feb 2026 08:44:53 -0700
Subject: [PATCH 3/4] fix: add accessibility attributes to Pagination

---
 components/Table/Pagination.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
index 186397d4..ea9fd45b 100644
--- a/components/Table/Pagination.tsx
+++ b/components/Table/Pagination.tsx
@@ -36,8 +36,12 @@ const Pagination = ({
       }}
     >
       <Box
-        as={ArrowLeftIcon}
+        aria-label="Previous Page"
+        as="button"
+        type="button"
         css={{
+          background: "none",
+          border: "none",
           cursor: "pointer",
           color: canPrevious ? "$primary11" : "$hiContrast",
           opacity: canPrevious ? 1 : 0.5,
@@ -47,14 +51,20 @@ const Pagination = ({
             onPrevious();
           }
         }}
-      />
+      >
+        <ArrowLeftIcon />
+      </Box>
       <Box css={{ fontSize: "$2", marginLeft: "$3", marginRight: "$3" }}>
         Page <Box as="span">{currentPage}</Box> of{" "}
         <Box as="span">{totalPages}</Box>
       </Box>
       <Box
-        as={ArrowRightIcon}
+        aria-label="Next Page"
+        as="button"
+        type="button"
         css={{
+          background: "none",
+          border: "none",
           cursor: "pointer",
           color: canNext ? "$primary11" : "$hiContrast",
           opacity: canNext ? 1 : 0.5,
@@ -64,7 +74,9 @@ const Pagination = ({
             onNext();
           }
         }}
-      />
+      >
+        <ArrowRightIcon />
+      </Box>
     </Flex>
   );
 };

From 2ffd3b8fab1f754c1c148a7ddd0d764ec7ba664a Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Mon, 2 Feb 2026 08:47:06 -0700
Subject: [PATCH 4/4] chore: simplify totalPages check in Pagination

---
 components/Table/Pagination.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
index ea9fd45b..c8f4c309 100644
--- a/components/Table/Pagination.tsx
+++ b/components/Table/Pagination.tsx
@@ -20,10 +20,7 @@ const Pagination = ({
   onNext,
   css,
 }: PaginationProps) => {
-  // Don't render pagination when there are no pages
-  if (totalPages <= 0) {
-    return null;
-  }
+  if (totalPages <= 0) return null;
 
   return (
     <Flex