How to combine row filtering and highlight functionality in React tables?

user_760893 0
Viewed 197

I'm trying to create this functionality in React Tables:

enter image description here

This functionality has been created for another table that is not using useFilters. But now I want to use React useGlobalFilter functionality for this.

I followed this tutorial for that purpose, and now my tables are being correctly filtered using globalFilters.

But the highlight functionality is not working properly. My cell render receives an HTML like this:

<mark>Reg</mark>istered

so if I try to filter by: Registered, it will never work, as plain text contains <mark> HTML tags.

So I'm trying to combine both functionalities playing with Column filters based on dataSource instead of column value, but with no luck.

Note:

  • My render functionality accepts any component to render content. That's why I can draw HTML content inside.
  • I want my filter to search based on dataSource or a specific value I set

Any clues on how to get this?

react-table reactjs
0 Answers
Related