From e77ec26897cb528091360059829350e8967e563c Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 7 Feb 2024 17:13:05 +0100
Subject: [PATCH] UI: No interactive table pagination controls for rows < page
 size (#82109)

---
 .../InteractiveTable.test.tsx                 | 19 ++++++++++++++++---
 .../InteractiveTable/InteractiveTable.tsx     |  3 ++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.test.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.test.tsx
index 744a73c791c..1e9418850aa 100644
--- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.test.tsx
+++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.test.tsx
@@ -117,15 +117,28 @@ describe('InteractiveTable', () => {
       expect(screen.queryByRole('button', { name: /previous/i })).not.toBeInTheDocument();
     });
 
-    it('renders pagination controls if pageSize is set', () => {
+    it('renders pagination controls if pageSize is set and more items than page size', () => {
       const columns: Array<Column<TableData>> = [{ id: 'id', header: 'ID' }];
-      const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }];
-      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} pageSize={10} />);
+      const data: TableData[] = [
+        { id: '1', value: '1', country: 'Sweden' },
+        { id: '2', value: '2', country: 'Belgium' },
+      ];
+      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} pageSize={1} />);
 
       expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
     });
+
+    it('does not render pagination controls if pageSize is set and fewer items than page size', () => {
+      const columns: Array<Column<TableData>> = [{ id: 'id', header: 'ID' }];
+      const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }];
+      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} pageSize={10} />);
+
+      expect(screen.queryByRole('button', { name: /next/i })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /previous/i })).not.toBeInTheDocument();
+    });
   });
+
   describe('headerTooltip', () => {
     it('does not render tooltips if headerTooltips is not set', () => {
       const columns: Array<Column<TableData>> = [{ id: 'id', header: 'ID' }];
diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
index 946d9d36779..cdd8df052b8 100644
--- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
+++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx
@@ -179,7 +179,8 @@ export function InteractiveTable<TableData extends object>({
 
   const tableHooks: Array<PluginHook<TableData>> = [useSortBy, useExpanded];
 
-  const paginationEnabled = pageSize > 0;
+  const multiplePages = data.length > pageSize;
+  const paginationEnabled = pageSize > 0 && multiplePages;
 
   if (paginationEnabled) {
     tableHooks.push(usePagination);