Highlight PrimeReact Datatable's Data using react-highlight-words-CodePudding

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

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>
  );

CodePudding user response：

Each column in Primereact Data table takes a prop called body through which we can format the cells, so in your case, you can pass the Highlighter as the body for each column.

Here's an example with the title column.

<Datatable>
  ...
   <Column 
       field="title"
       header="Title"
       body={(rowData) => (
          <Highlighter
             searchWords={[globalFilterValue]}
             textToHighlight={rowData.title}
          />
       )}
   />
  ...
</Datatable>