diff --git a/src/DataTable/index.jsx b/src/DataTable/index.jsx index 2046d5aa50..a2772990f3 100644 --- a/src/DataTable/index.jsx +++ b/src/DataTable/index.jsx @@ -187,6 +187,7 @@ function DataTable({ const enhancedInstance = { ...instance, + manualFilters, itemCount, numBreakoutFilters, bulkActions, diff --git a/src/DataTable/selection/BaseSelectionStatus.jsx b/src/DataTable/selection/BaseSelectionStatus.jsx index 80039b245c..a7fec5ad2f 100644 --- a/src/DataTable/selection/BaseSelectionStatus.jsx +++ b/src/DataTable/selection/BaseSelectionStatus.jsx @@ -22,11 +22,11 @@ function BaseSelectionStatus({ }) { const { itemCount, filteredRows, isPaginated, state, - isSelectable, maxSelectedRows, + isSelectable, maxSelectedRows, manualFilters, } = useContext(DataTableContext); const hasAppliedFilters = state?.filters?.length > 0; const isAllRowsSelected = numSelectedRows === itemCount; - const filteredItems = filteredRows?.length || itemCount; + const filteredItems = manualFilters ? itemCount : (filteredRows?.length || itemCount); const hasMaxSelectedRows = isSelectable && maxSelectedRows; const intlAllSelectedText = allSelectedText || ( diff --git a/src/DataTable/tests/DataTable.test.jsx b/src/DataTable/tests/DataTable.test.jsx index 212b5e348b..b56e6bece9 100644 --- a/src/DataTable/tests/DataTable.test.jsx +++ b/src/DataTable/tests/DataTable.test.jsx @@ -6,6 +6,8 @@ import { IntlProvider } from 'react-intl'; import DataTable from '..'; import DataTableContext from '../DataTableContext'; +import { TextFilter } from '../..'; +import { SELECT_ALL_TEST_ID } from '../selection/data/constants'; const additionalColumns = [ { @@ -198,6 +200,35 @@ describe('', () => { expect(spinner).toBeTruthy(); }); + it('displays the total number of items when applying filter and selecting all items', async () => { + const propsWithSelection = { + ...props, + isSelectable: true, + isFilterable: true, + manualFilters: true, + defaultColumnValues: { Filter: TextFilter }, + isPaginated: true, + initialState: { pageSize: 3, pageIndex: 0 }, + pageCount: 3, + fetchData: jest.fn(), + }; + + render(); + const filtersButton = screen.getByRole('button', { name: 'Filters' }); + + await userEvent.click(filtersButton); + + const searchFormControl = screen.getByPlaceholderText('Search coat color'); + await userEvent.type(searchFormControl, 'brown tabby'); + + const selectAllCheckBox = screen.getByTitle('Toggle All Current Page Rows Selected'); + await userEvent.click(selectAllCheckBox); + + const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID); + // A filtered array is returned from the backend, + // and the element counter displays its length. + expect(selectAllButton).toHaveTextContent('Select all 7'); + }); describe('[legacy] controlled table selections', () => { it('passes initial controlledTableSelections to context', async () => {