使用 react-highlight-words 突出显示 PrimeReact 数据表的数据

Question

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

Answer 1

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>