Highlight Searched Term in Table (not in Cell)

[szkieb]

Hi y'all,

I have a reusable table and want to highlight search terms. I found only one way to do that and that is by using the cell method when creating the column, e.g. cell with highlighting example.

My problem is that I like to keep all styling inside the table and not have any CSS or HTML in my columns. That way I can separate concerns: do my value formatting inside the columns and my styling inside the table.

I basically want to do something like this:

 {row.getVisibleCells().map((cell) => (
                <td
                  key={cell.id}
                  className="my-custom-table-styles"
                >
                  <Highlighter
                    searchWords={[filtering]}
                    textToHighlight={flexRender(
                      cell.column.columnDef.cell,
                      cell.getContext().toString()
                    )}
                  />
                </td>