fix(site): use toLocaleString for pagination offsets (#23669)

The Pagination widget localizes the number format of the total results
but not the page offsets.

Before

<img width="620" height="78" alt="Screenshot 2026-03-26 at 09 18 01"
src="https://github.com/user-attachments/assets/7ac0ad9a-7baa-4b30-b3d0-0e0325f8433b"
/>

After

<img width="297" height="42" alt="Screenshot 2026-03-26 at 9 41 22 AM"
src="https://github.com/user-attachments/assets/79c68366-95fa-4012-8419-5cd6f6e10ae3"
/>
This commit is contained in:
Jeremy Ruppel
2026-03-26 09:50:49 -04:00
committed by GitHub
parent f164463c6a
commit a0283ff775
2 changed files with 21 additions and 3 deletions
@@ -48,10 +48,12 @@ export const PaginationAmount: FC<PaginationHeaderProps> = ({
{totalRecords !== 0 && currentOffsetStart !== undefined && (
<div>
Showing <strong>{currentOffsetStart}</strong> to{" "}
Showing <strong>{currentOffsetStart.toLocaleString()}</strong> to{" "}
<strong>
{currentOffsetStart +
Math.min(limit - 1, totalRecords - currentOffsetStart)}
{(
currentOffsetStart +
Math.min(limit - 1, totalRecords - currentOffsetStart)
).toLocaleString()}
</strong>{" "}
of <strong>{totalRecords.toLocaleString()}</strong>{" "}
{paginationUnitLabel}
@@ -86,6 +86,22 @@ export const FirstPageWithNoData: Story = {
},
};
export const FirstPageWithTonsOfData: Story = {
args: {
query: {
...mockPaginationResultBase,
isSuccess: true,
currentPage: 2,
currentOffsetStart: 1000,
totalRecords: 123_456,
totalPages: 1235,
hasPreviousPage: false,
hasNextPage: true,
isPlaceholderData: false,
},
},
};
export const TransitionFromFirstToSecondPage: Story = {
args: {
query: {