diff --git a/ui/components/DataTable.tsx b/ui/components/DataTable.tsx
index 6cf06669ab..42c1625612 100644
--- a/ui/components/DataTable.tsx
+++ b/ui/components/DataTable.tsx
@@ -202,8 +202,8 @@ function UnstyledDataTable({
- {pagination.start === 0 ? 1 : pagination.start} -{" "}
- {pagination.start + r.length} out of {rows.length}
+ {pagination.start + 1} - {pagination.start + r.length} out of{" "}
+ {rows.length}
diff --git a/ui/components/__tests__/DataTable.test.tsx b/ui/components/__tests__/DataTable.test.tsx
index 4bc0220ba0..a862a79a93 100644
--- a/ui/components/__tests__/DataTable.test.tsx
+++ b/ui/components/__tests__/DataTable.test.tsx
@@ -120,13 +120,13 @@ describe("DataTable", () => {
const skipForward = screen.getByLabelText("skip to last page");
const displayText = screen.getByText(/1 - 1 out of 3/);
fireEvent.click(forward);
- expect(displayText.innerHTML).toContain("2");
+ expect(displayText.innerHTML).toContain("2 - 2 out of 3");
fireEvent.click(back);
- expect(displayText.innerHTML).toContain("1");
+ expect(displayText.innerHTML).toContain("1 - 1 out of 3");
fireEvent.click(skipForward);
- expect(displayText.innerHTML).toContain("3 out of 3");
+ expect(displayText.innerHTML).toContain("3 - 3 out of 3");
fireEvent.click(skipBack);
- expect(displayText.innerHTML).toContain("1 - 1");
+ expect(displayText.innerHTML).toContain("1 - 1 out of 3");
});
it("disables buttons based on page location", () => {
render(
diff --git a/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index cb64d7e66e..cc259e409c 100644
--- a/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -515,10 +515,10 @@ exports[`DataTable snapshots renders 1`] = `
size="normal"
>
1
- -
-
+ -
3
- out of
+ out of
+
3