fix: display Header's names in 'Filter by ...' text in DataTable fi…

…lters (#2757)

Co-authored-by: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>

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 = <p>Filtered by {filterNames.join(', ')}</p>;
 
   return (

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

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