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> = [{ id: 'id', header: 'ID' }]; - const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }]; - render(); + const data: TableData[] = [ + { id: '1', value: '1', country: 'Sweden' }, + { id: '2', value: '2', country: 'Belgium' }, + ]; + render(); 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> = [{ id: 'id', header: 'ID' }]; + const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }]; + render(); + + 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> = [{ 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({ const tableHooks: Array> = [useSortBy, useExpanded]; - const paginationEnabled = pageSize > 0; + const multiplePages = data.length > pageSize; + const paginationEnabled = pageSize > 0 && multiplePages; if (paginationEnabled) { tableHooks.push(usePagination);