fix(DataTable): fix page number bug #6125

francinelucca · 2025-05-28T15:53:02Z

Closes https://github.com/github/primer/issues/5216

Refactors Table.Pagination to use the same page rendering logic that the Pagination component uses. This solves a bug where page numbers were being repeated in the pagination component.

Changelog

New

Refactored Table.Pagination to use buildPaginationModel for page rendering logic
Added test case to cover for found bug

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Co-authored-by: Hector Garcia <[email protected]>

changeset-bot · 2025-05-28T15:53:06Z

🦋 Changeset detected

Latest commit: 076ce68

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-05-28T15:53:30Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

Copilot

Pull Request Overview

This PR refactors the Table.Pagination component to leverage the shared buildPaginationModel logic, fixing a bug where page numbers could repeat. It also adds a new test to cover the specific page-range behavior.

Replaced custom offset/truncation state with a useMemo-driven pagination model
Removed manual calculation helpers (MAX_TRUNCATED_STEP_COUNT, getDefaultOffsetStartIndex)
Added a test case for navigating to page 4 with 100 items at 15 items/page

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/DataTable/tests/Pagination.test.tsx	New test validating page range and full page list for page 4
packages/react/src/DataTable/Pagination.tsx	Refactored pagination rendering to use `buildPaginationModel`

Comments suppressed due to low confidence (1)

packages/react/src/DataTable/Pagination.tsx:244

[nitpick] Using the array index as the React key may lead to rendering issues when the model array changes; consider using a stable identifier such as page.num or a combination of page.type and i.

<Step key={i}>

packages/react/src/DataTable/Pagination.tsx

packages/react/src/DataTable/__tests__/Pagination.test.tsx

github-actions · 2025-05-28T15:56:17Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.46 KB (0%)
packages/react/dist/browser.umd.js	94.49 KB (0%)

Co-authored-by: Copilot <[email protected]>

jonrohan · 2025-05-28T16:43:50Z

packages/react/src/DataTable/Pagination.tsx

@@ -1,6 +1,6 @@
 import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type React from 'react'
-import {useCallback, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'


🤦🏻 styled-components still

packages/react/src/DataTable/Pagination.tsx

primer-integration · 2025-05-30T03:56:41Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/380421

primer-integration · 2025-05-30T04:35:02Z

🟢 golden-jobs completed with status success.

fix(DataTable): fix page number bug

279c149

Co-authored-by: Hector Garcia <[email protected]>

Copilot AI review requested due to automatic review settings May 28, 2025 15:53

francinelucca requested a review from a team as a code owner May 28, 2025 15:53

francinelucca requested a review from jonrohan May 28, 2025 15:53

francinelucca requested a review from hectahertz May 28, 2025 15:53

github-actions bot added the staff Author is a staff member label May 28, 2025

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025

Copilot AI reviewed May 28, 2025

View reviewed changes

packages/react/src/DataTable/Pagination.tsx Outdated Show resolved Hide resolved

packages/react/src/DataTable/__tests__/Pagination.test.tsx Outdated Show resolved Hide resolved

francinelucca and others added 3 commits May 28, 2025 11:57

Update packages/react/src/DataTable/Pagination.tsx

85534a7

Co-authored-by: Copilot <[email protected]>

Update packages/react/src/DataTable/__tests__/Pagination.test.tsx

8aee96a

Co-authored-by: Copilot <[email protected]>

Create thick-days-fly.md

19c4fee

github-actions bot requested a deployment to storybook-preview-6125 May 28, 2025 16:00 Abandoned

francinelucca deployed to github-pages May 28, 2025 16:14 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6125 May 28, 2025 16:15 Inactive

jonrohan approved these changes May 28, 2025

View reviewed changes

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 28, 2025

francinelucca commented May 28, 2025

View reviewed changes

packages/react/src/DataTable/Pagination.tsx Outdated Show resolved Hide resolved

francinelucca added 2 commits May 28, 2025 18:47

Update packages/react/src/DataTable/Pagination.tsx

a251b84

Merge branch 'main' into fix/pagination-bug

2463d7a

github-actions bot requested a deployment to storybook-preview-6125 May 28, 2025 22:50 Abandoned

Merge branch 'main' into fix/pagination-bug

9d25833

github-actions bot requested a deployment to storybook-preview-6125 May 28, 2025 22:55 Abandoned

francinelucca deployed to github-pages May 28, 2025 23:07 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6125 May 28, 2025 23:07 Inactive

Merge branch 'main' into fix/pagination-bug

076ce68

francinelucca deployed to github-pages May 30, 2025 03:56 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6125 May 30, 2025 03:56 View deployment

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels May 30, 2025

francinelucca added this pull request to the merge queue May 30, 2025

Merged via the queue into main with commit 91b3c71 May 30, 2025
35 checks passed

francinelucca deleted the fix/pagination-bug branch May 30, 2025 11:13

primer bot mentioned this pull request May 30, 2025

Release tracking (37.26.0) #6127

Merged

hectahertz mentioned this pull request Jun 11, 2025

Bug with pagination in table #6163

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(DataTable): fix page number bug #6125

fix(DataTable): fix page number bug #6125

Uh oh!

francinelucca commented May 28, 2025

Uh oh!

changeset-bot bot commented May 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 28, 2025 •

edited

Loading

Uh oh!

jonrohan May 28, 2025

Uh oh!

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

Uh oh!

Uh oh!

fix(DataTable): fix page number bug #6125

fix(DataTable): fix page number bug #6125

Uh oh!

Conversation

francinelucca commented May 28, 2025

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

jonrohan May 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

Uh oh!

Uh oh!

changeset-bot bot commented May 28, 2025 •

edited

Loading

github-actions bot commented May 28, 2025 •

edited

Loading