I have PrimeReact DataTable with search/filter functionality. My main goal here is to highlight the text or data in DataTable that matches on the Search Input of the user.

I used react-highlight-words for the highlighting of data. Using the props textToHighlight, I can highlighted the text.

The Problem:

1. textToHighlight only accepts string and I don't have idea how to pass the component DataTable or its data in the props.

I tried the following:

1. I pass the Input state in textToHighlight props but unfortunately it prints the data outside the table.
2. I tried to put the DataTable component inside the Highlighter component, but the table doesn't render.

Here's the image:

ThesisList.jsx

  // Search Box
  const renderHeader = () => {
    return (
      <div className="flex justify-between">
        <Button
          className="p-button-outlined"
          icon="pi pi-filter-slash"
          label="Clear"
          onClick={clearFilter}
        />
        <span className="p-input-icon-left">
          <i className="pi pi-search" />
          <InputText
            placeholder="Search"
            value={globalFilterValue}
            onChange={onGlobalFilterChange}
          />
        </span>
      </div>
    );
  };

 // The function who checks if the input matches the Filters (check initFilter()).
  const onGlobalFilterChange = (e) => {
    const value = e.target.value;

    let _filter = { ...filters };
    _filter["global"].value = value;
    setFilters(_filter);
    setGlobalFilterValue(value);
  };

  return (
    <div className="p-4 w-full h-screen">
      //As you can see here I used the Input state
      <Highlighter
        searchWords={[globalFilterValue]}
        textToHighlight={globalFilterValue}
      />
      <DataTable>
        ...
      </DataTable>
    </div>
  );