From 25b2ebdf3175c9aeb81699562b465ce7ce896bdd Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Fri, 16 Aug 2024 15:27:50 -0400
Subject: [PATCH] feat(explore): Samples table pagination (#76343)

This adds the pagination buttons to the bottom of the page on the
samples table.
---
 .../app/views/explore/tables/spansTable.tsx   | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx
index fe467f61659e60..ff00a7e62c0a92 100644
--- a/static/app/views/explore/tables/spansTable.tsx
+++ b/static/app/views/explore/tables/spansTable.tsx
@@ -1,5 +1,6 @@
-import {useMemo} from 'react';
+import {Fragment, useMemo} from 'react';
 
+import Pagination from 'sentry/components/pagination';
 import type {NewQuery} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
@@ -39,20 +40,23 @@ export function SpansTable({}: SpansTableProps) {
   });
 
   return (
-    // TODO: make this prettier
-    <table>
-      <tr>
-        {fields.map(field => (
-          <th key={field}>{field}</th>
-        ))}
-      </tr>
-      {result.data?.map((row, i) => (
-        <tr key={i}>
+    <Fragment>
+      {/* TODO: make this prettier */}
+      <table>
+        <tr>
           {fields.map(field => (
-            <th key={field}>{row[field]}</th>
+            <th key={field}>{field}</th>
           ))}
         </tr>
-      ))}
-    </table>
+        {result.data?.map((row, i) => (
+          <tr key={i}>
+            {fields.map(field => (
+              <th key={field}>{row[field]}</th>
+            ))}
+          </tr>
+        ))}
+      </table>
+      <Pagination pageLinks={result.pageLinks} />
+    </Fragment>
   );
 }