[BD-46] fix: replace filter names with header names

[khudym]

Description

Update DataTable's filter status bar's messaging by replacing the accessor with the header name
Issue

Deploy Preview

https://deploy-preview-2757--paragon-openedx.netlify.app/

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @khudym!

When this pull request is ready, tag your edX technical lead.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	bd345c8
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/653bf74449bc12000898eae7
😎 Deploy Preview	https://deploy-preview-2757--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (64611f7) 92.82% compared to head (bd345c8) 92.83%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2757   +/-   ##
=======================================
  Coverage   92.82%   92.83%           
=======================================
  Files         235      235           
  Lines        4237     4240    +3     
  Branches     1029     1029           
=======================================
+ Hits         3933     3936    +3     
  Misses        300      300           
  Partials        4        4           

Files	Coverage Δ
src/DataTable/FilterStatus.jsx	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[PKulkoRaccoonGang]

@khudym @viktorrusakov @monteri Now, during filtering, we display the header of the list of elements by which it can be done. In the Filtered by... line we display exactly this title. Does it make sense to show the true title (list item) by which we are actually filtering? For example: "Filtered by brown taddy"

[viktorrusakov]

@PKulkoRaccoonGang I think it will be confusing if we filter by multiple columns

when I close the filter tab in this case, I won't be able to understand Filtered by ... text (which column is filtered by 'we'?). If we instead display column headers it's always clear by which column we filtered.

[openedx-webhooks]

@khudym 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[openedx-semantic-release-bot]

🎉 This PR is included in version 21.6.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.0.0-alpha.15 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀