From 206ffbe99db5bfe42a09421eb039b7277c8cd373 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 22 Apr 2025 16:16:31 +0200
Subject: [PATCH] Fix Canon DataTable.Pagination to count issue.

Fixes an issue where the pagination component would not consider the
row count when calculating the `from - to of totalCount` string. This
would result in strings like `21-30 of 24`.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/open-ghosts-fix.md                          |  5 +++++
 .../DataTable/Pagination/DataTablePagination.tsx       | 10 +++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/open-ghosts-fix.md

diff --git a/.changeset/open-ghosts-fix.md b/.changeset/open-ghosts-fix.md
new file mode 100644
index 0000000000..144f24dea0
--- /dev/null
+++ b/.changeset/open-ghosts-fix.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fixed an issue with Canon's DataTable.Pagination component showing the wrong number for the "to" count.
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
index eabea109fa..2e8d47c1dc 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
@@ -32,6 +32,12 @@ const DataTablePagination = forwardRef(
     const { table } = useDataTable();
     const pageIndex = table?.getState().pagination.pageIndex;
     const pageSize = table?.getState().pagination.pageSize;
+    const rowCount = table?.getRowCount();
+    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;
+    const toCount = Math.min(
+      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),
+      rowCount,
+    );
 
     return (
       <div
@@ -63,9 +69,7 @@ const DataTablePagination = forwardRef(
           )}
         </div>
         <div className="canon-DataTablePagination--right">
-          <Text variant="body">{`${(pageIndex ?? 0) * (pageSize ?? 10) + 1} - ${
-            ((pageIndex ?? 0) + 1) * (pageSize ?? 10)
-          } of ${table?.getRowCount()}`}</Text>
+          <Text variant="body">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>
           <IconButton
             variant="secondary"
             size="small"