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 || (
)}
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('', () => {
it('displays a control bar', () => {
render();
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('', () => {
it('displays the row status with pagination', () => {
const pageSize = 10;
const { getByText } = render();
- 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();
- 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('', () => {
const { getByText } = render(
,
);
- 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(
,
);
- 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';