Tengo PrimeReact DataTable con funcionalidad de búsqueda/filtro. Mi objetivo principal aquí es resaltar el texto o los datos en DataTable que coinciden con la entrada de búsqueda del usuario.

Usé react-highlight-words para resaltar los datos. Usando los accesorios textToHighlight , puedo resaltar el texto.

El problema:

1. textToHighlight solo acepta cadenas y no tengo idea de cómo pasar el componente DataTable o sus datos en los accesorios.

Intenté lo siguiente:

1. Paso el estado de Input en los accesorios textToHighlight pero, lamentablemente, imprime los datos fuera de la tabla.
2. Traté de colocar el componente DataTable dentro del componente Highlighter , pero la tabla no se muestra.

Aquí está la imagen:

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