From b248ca9e4157a438923ff17491f917c129dc0c65 Mon Sep 17 00:00:00 2001
From: Jillian <jill@opencraft.com>
Date: Thu, 30 Nov 2023 05:42:08 +1030
Subject: [PATCH] feat: modifies the datatable row status (#2838)

to "Showing 1 - N of M" instead of just "Showing N of M"
---
 src/DataTable/RowStatus.jsx              | 16 +++++++++++-----
 src/DataTable/tests/DataTable.test.jsx   |  2 +-
 src/DataTable/tests/RowStatus.test.jsx   |  4 ++--
 src/DataTable/tests/SmartStatus.test.jsx |  4 ++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/DataTable/RowStatus.jsx b/src/DataTable/RowStatus.jsx
index 0dd63c922e..3789590aab 100644
--- a/src/DataTable/RowStatus.jsx
+++ b/src/DataTable/RowStatus.jsx
@@ -4,10 +4,16 @@ import { FormattedMessage } from 'react-intl';
 import DataTableContext from './DataTableContext';
 
 function RowStatus({ className, statusText }) {
-  const { page, rows, itemCount } = useContext(DataTableContext);
-  const pageSize = page?.length || rows?.length;
+  const {
+    page, rows, itemCount, state,
+  } = useContext(DataTableContext);
+  const rowCount = page?.length || rows?.length;
+  const pageSize = state?.pageSize || 0;
+  const pageIndex = state?.pageIndex || 0;
+  const firstRow = pageSize * pageIndex + 1;
+  const lastRow = firstRow + rowCount - 1;
 
-  if (!pageSize) {
+  if (!rowCount) {
     return null;
   }
   return (
@@ -15,9 +21,9 @@ function RowStatus({ className, statusText }) {
       {statusText || (
         <FormattedMessage
           id="pgn.DataTable.RowStatus.statusText"
-          defaultMessage="Showing {pageSize} of {itemCount}."
+          defaultMessage="Showing {firstRow} - {lastRow} of {itemCount}."
           description="A text describing how many rows is shown in the table"
-          values={{ itemCount, pageSize }}
+          values={{ itemCount, firstRow, lastRow }}
         />
       )}
     </div>
diff --git a/src/DataTable/tests/DataTable.test.jsx b/src/DataTable/tests/DataTable.test.jsx
index 1bb332df1d..212b5e348b 100644
--- a/src/DataTable/tests/DataTable.test.jsx
+++ b/src/DataTable/tests/DataTable.test.jsx
@@ -135,7 +135,7 @@ describe('<DataTable />', () => {
   it('displays a control bar', () => {
     render(<DataTableWrapper {...props} />);
     expect(screen.getByTestId('table-control-bar')).toBeInTheDocument();
-    expect(screen.getAllByText('Showing 7 of 7.')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Showing 1 - 7 of 7.')[0]).toBeInTheDocument();
   });
 
   it('displays a table', () => {
diff --git a/src/DataTable/tests/RowStatus.test.jsx b/src/DataTable/tests/RowStatus.test.jsx
index 587b746e69..52632c8b6d 100644
--- a/src/DataTable/tests/RowStatus.test.jsx
+++ b/src/DataTable/tests/RowStatus.test.jsx
@@ -32,13 +32,13 @@ describe('<RowStatus />', () => {
   it('displays the row status with pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, page: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('displays the row status without pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, rows: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('sets class names on the parent', () => {
diff --git a/src/DataTable/tests/SmartStatus.test.jsx b/src/DataTable/tests/SmartStatus.test.jsx
index 48f6a33b77..6b15f2a24b 100644
--- a/src/DataTable/tests/SmartStatus.test.jsx
+++ b/src/DataTable/tests/SmartStatus.test.jsx
@@ -67,13 +67,13 @@ describe('<SmartStatus />', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('Shows the number of items on the page if selection is off and there are no filters', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('shows an alternate selection status', () => {
     const altStatusText = 'horses R cool';