使用 react-highlight-words 突出顯示 PrimeReact 數據表的數據

Question

我有帶有搜索/過濾功能的 PrimeReact DataTable。 我的主要目標是突出顯示 DataTable 中與用戶的搜索輸入匹配的文本或數據。

我使用react-highlight-words來突出顯示數據。 使用道具textToHighlight ，我可以突出顯示文本。

問題：

1. textToHighlight只接受字符串，我不知道如何在道具中傳遞組件DataTable或其數據。

我嘗試了以下方法：

1. 我在textToHighlight道具中傳遞了Input state 但不幸的是它打印了表格外的數據。
2. 我試圖將DataTable組件放在Highlighter組件中，但表格沒有呈現。

這是圖像：

論文列表.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

Primereact Data 表中的每一列都有一個名為body的道具，我們可以通過它格式化單元格，因此在您的情況下，您可以將Highlighter作為每列的正文傳遞。

這是標題列的示例。

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