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

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:

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:

I pass the Input state in textToHighlight props but unfortunately it prints the data outside the table.
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>
  );

score 1 · Accepted Answer · answered Jul 27 '22 at 12:09

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>

answered Jul 27 '22 at 12:09

Abito Prakash

4,368
2
13
26

Its working sir, thank you. But how I can access the rowData."fieldName" because I loop my columns sir. – John Paulo A. Geronimo Jul 27 '22 at 13:58
1

You can use ````rowData[fieldName]```` – Abito Prakash Jul 27 '22 at 14:43
1

Thank you for this sir. I just want to add, error occurred because ```textToHighlight``` detected that ```rowData[fieldName]``` is a number so I added ```toString()``` to make it a string. Thank you again. – John Paulo A. Geronimo Jul 27 '22 at 14:55

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

1 Answers1