![](/img/trans.png)
[英]how to use react-highlight-words to highlight multiple keywords with different colors
[英]Highlight PrimeReact Datatable's Data using react-highlight-words
我有带有搜索/过滤功能的 PrimeReact DataTable。 我的主要目标是突出显示 DataTable 中与用户的搜索输入匹配的文本或数据。
我使用react-highlight-words来突出显示数据。 使用道具textToHighlight
,我可以突出显示文本。
问题:
textToHighlight
只接受字符串,我不知道如何在道具中传递组件DataTable
或其数据。我尝试了以下方法:
textToHighlight
道具中传递了Input
state 但不幸的是它打印了表格外的数据。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>
);
Primereact Data 表中的每一列都有一个名为body
的道具,我们可以通过它格式化单元格,因此在您的情况下,您可以将Highlighter
作为每列的正文传递。
这是标题列的示例。
<Datatable>
...
<Column
field="title"
header="Title"
body={(rowData) => (
<Highlighter
searchWords={[globalFilterValue]}
textToHighlight={rowData.title}
/>
)}
/>
...
</Datatable>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.