TablePaginator only shows ellipses when needed (#2303)

iTwin · Oct 16, 2024 · 774a954 · 774a954
1 parent 594a362
commit 774a954
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 4 deletions.
diff --git a/.changeset/fluffy-pillows-flow.md 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
@@ -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
@@ -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`);