diff --git a/.changeset/fluffy-pillows-flow.md b/.changeset/fluffy-pillows-flow.md new file mode 100644 index 00000000000..6d6cd77cc61 --- /dev/null +++ b/.changeset/fluffy-pillows-flow.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': patch +--- + +`TablePaginator` shows ellipses only whenever needed. diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx index 0e78d2fdd22..fa0ac1ad2e2 100644 --- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx +++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx @@ -259,6 +259,10 @@ export const TablePaginator = (props: TablePaginatorProps) => { endPage = totalPagesCount; } + // Show ellipsis only if there is a gap between the extremities and the middle pages + const showStartEllipsis = startPage > 1; + const showEndEllipsis = endPage < totalPagesCount - 1; + const hasNoRows = totalPagesCount === 0; const showPagesList = totalPagesCount > 1 || isLoading; const showPageSizeList = @@ -326,18 +330,19 @@ export const TablePaginator = (props: TablePaginatorProps) => { if (visibleCount === 1) { return pageButton(focusedIndex); } + return ( <> {startPage !== 0 && ( <> {pageButton(0, 0)} - {ellipsis} + {showStartEllipsis ? ellipsis : null} )} {pageList.slice(startPage, endPage)} {endPage !== totalPagesCount && !isLoading && ( <> - {ellipsis} + {showEndEllipsis ? ellipsis : null} {pageButton(totalPagesCount - 1, 0)} )} diff --git a/testing/e2e/app/routes/Table/spec.ts b/testing/e2e/app/routes/Table/spec.ts index aefbda64782..d5f5c67b623 100644 --- a/testing/e2e/app/routes/Table/spec.ts +++ b/testing/e2e/app/routes/Table/spec.ts @@ -454,7 +454,7 @@ test.describe('Table Paginator', () => { ); // Go to the 6th page - await page.locator('button').last().click({ clickCount: 5 }); + await page.locator('button').last().click(); await expect(page.locator(`[role="cell"]`).first()).toHaveText('Name 250'); await expect(page.locator(`[role="cell"]`).last()).toHaveText( @@ -468,7 +468,7 @@ test.describe('Table Paginator', () => { await setContainerSize(page, '800px'); // Go to the 6th page - await page.locator('button').last().click({ clickCount: 5 }); + await page.locator('button').last().click(); const paginatorButtons = page.locator('#paginator button', { hasText: /[0-9]+/, @@ -519,6 +519,82 @@ test.describe('Table Paginator', () => { }); }); + test(`should show ellipses only when a gap of one or more pages`, async ({ + page, + }) => { + await page.goto(`/Table?exampleType=withTablePaginator`); + + await expectOverflowState({ + page, + expectedItemLength: 11, + expectedOverflowingEllipsisVisibleCount: 0, + }); + + await setContainerSize(page, '800px'); + + const paginatorButtons = page.locator('#paginator button', { + hasText: /[0-9]+/, + }); + const ellipses = page.locator('#paginator span', { + hasText: /^…$/, + }); + + await expect(paginatorButtons).toHaveText(['1', '2', '3', '4', '5', '11']); + await expect(ellipses).toHaveCount(1); + + await paginatorButtons.locator('*', { hasText: '4' }).click(); + await expect(paginatorButtons).toHaveText([ + '1', + '2', + '3', + '4', + '5', + '6', + '11', + ]); + await expect(ellipses).toHaveCount(1); + + await paginatorButtons.locator('*', { hasText: '5' }).click(); + await expect(paginatorButtons).toHaveText([ + '1', + '3', + '4', + '5', + '6', + '7', + '11', + ]); + await expect(ellipses).toHaveCount(2); + + await paginatorButtons.locator('*', { hasText: '11' }).click(); + await expect(paginatorButtons).toHaveText(['1', '7', '8', '9', '10', '11']); + await expect(ellipses).toHaveCount(1); + + await paginatorButtons.locator('*', { hasText: '8' }).click(); + await expect(paginatorButtons).toHaveText([ + '1', + '6', + '7', + '8', + '9', + '10', + '11', + ]); + await expect(ellipses).toHaveCount(1); + + await paginatorButtons.locator('*', { hasText: '7' }).click(); + await expect(paginatorButtons).toHaveText([ + '1', + '5', + '6', + '7', + '8', + '9', + '11', + ]); + await expect(ellipses).toHaveCount(2); + }); + test(`should at minimum always show one page`, async ({ page }) => { await page.goto(`/Table?exampleType=withTablePaginator`);