diff --git a/src/DataTable/FilterStatus.jsx b/src/DataTable/FilterStatus.jsx index 3adc33be0d..31028122ac 100644 --- a/src/DataTable/FilterStatus.jsx +++ b/src/DataTable/FilterStatus.jsx @@ -7,12 +7,16 @@ import Button from '../Button'; function FilterStatus({ className, variant, size, clearFiltersText, buttonClassName, showFilteredFields, }) { - const { state, setAllFilters } = useContext(DataTableContext); + const { state, setAllFilters, headers } = useContext(DataTableContext); if (!setAllFilters) { return null; } - const filterNames = state.filters ? state.filters.map((filter) => filter.id) : []; + const headersMap = headers.reduce((cur, acc) => { + cur[acc.id] = acc.Header; + return cur; + }, {}); + const filterNames = state.filters ? state.filters.map((filter) => headersMap[filter.id]) : []; const filterTexts =

Filtered by {filterNames.join(', ')}

; return ( diff --git a/src/DataTable/tests/FilterStatus.test.jsx b/src/DataTable/tests/FilterStatus.test.jsx index 5a0ef41f63..1339dbcb55 100644 --- a/src/DataTable/tests/FilterStatus.test.jsx +++ b/src/DataTable/tests/FilterStatus.test.jsx @@ -7,8 +7,9 @@ import FilterStatus from '../FilterStatus'; import DataTableContext from '../DataTableContext'; const filterNames = ['color', 'breed', 'discipline']; +const headers = [{ id: 'color', Header: 'color' }, { id: 'breed', Header: 'breed' }, { id: 'discipline', Header: 'discipline' }]; const filters = filterNames.map((name) => ({ id: name })); -const instance = { state: { filters }, setAllFilters: () => {} }; +const instance = { state: { filters }, setAllFilters: () => {}, headers }; const filterProps = { buttonClassName: 'buttonClass', variant: 'variant', diff --git a/src/DataTable/tests/SmartStatus.test.jsx b/src/DataTable/tests/SmartStatus.test.jsx index 85d4573cb4..48f6a33b77 100644 --- a/src/DataTable/tests/SmartStatus.test.jsx +++ b/src/DataTable/tests/SmartStatus.test.jsx @@ -9,6 +9,7 @@ import RowStatus from '../RowStatus'; import SelectionStatus from '../selection/SelectionStatus'; const filters = [{ id: 'name' }, { id: 'age' }]; +const headers = [{ id: 'name', Header: 'name' }, { id: 'age', Header: 'age' }]; const filterNames = ['name', 'age']; const itemCount = 101; const instance = { @@ -22,6 +23,7 @@ const instance = { SelectionStatusComponent: SelectionStatus, FilterStatusComponent: FilterStatus, RowStatusComponent: RowStatus, + headers, }; // eslint-disable-next-line react/prop-types