feat: modifies the datatable row status (#2838)

to "Showing 1 - N of M" instead of just "Showing N of M"

src/DataTable/RowStatus.jsx

@@ -4,20 +4,26 @@ 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 (
     <div className={className} data-testid="row-status">
       {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>

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', () => {

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', () => {

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';