Tengo una tabla que contiene una lista de tld que se pueden filtrar mediante un cuadro de búsqueda o botones para categorías específicas. Los botones filtran en función de una lista de tld, mientras que el cuadro de búsqueda debe coincidir de forma aproximada con los tld.
const columns = useMemo( () => [ { Header: 'TLD', accessor: 'tld', filter: multiFilter, Cell: (props) => { const onSale = props.row.original.sale return ( <div> .{props.value} {onSale ? <span className="font-bold text-purple m-left-1">Sale</span> : null} </div> ) }, },Filtrado de botones
<button autoFocus className="py-1 px-4 text-sm focus:bg-blue focus:rounded-full" onClick={() => setFilter('tld', undefined)}>All</button> <button className="py-1 px-4 text-sm focus:bg-blue focus:rounded-full" onClick={() => setFilter('tld', sale)}>Sale</button>Filtrado de cuadro de búsqueda
<input id="tld-search-box" value={searchFilterInput} onChange={handleSearchFilterChange} placeholder={'Enter a domain extension here'} className="border border-gray-300 p-2 w-[640px] rounded-full" />Para los botones tuve que hacer un método de filtro personalizado.
function multiFilter(rows, columnIds, filterValue) { return filterValue.length === 0 ? rows : rows.filter((row) => filterValue.includes(String(row.original[columnIds])), ); }Y este es el método de filtro de búsqueda que termina usando setFilter para que fluya a través del método de filtro personalizado eventualmente también
const handleSearchFilterChange = (e) => { const value = e.target.value || undefined const trimmedValue = value ? value.replace(/^\./g, '') : undefined setFilter('tld', trimmedValue) setSearchFilterInput(value) } El problema que tengo es que, dado que ambos usan el método de filtro personalizado al final, el filtrado del cuadro de búsqueda coincide exactamente con el método filterValue.includes(String(row.original[columnIds])), . Sin embargo, quiero que el cuadro de búsqueda coincida con cualquier cosa que contenga el valor ingresado y no estoy seguro de cómo hacerlo, ya que ambos actúan en la columna. Cualquier consejo sería muy apreciado.
Supongo que el filtrado global también podría resolver este problema, pero terminé descubriendo que los dos tipos de búsqueda eran de diferentes tipos de JS. Los botones eran de tipo objeto mientras que la barra de búsqueda era una cadena, por lo que esto resolvió el problema:
function multiFilter(rows, columnIds, filterValue) { return filterValue.length === 0 ? rows : rows.filter((row) => { let match = String(row.original[columnIds]) return typeof filterValue === 'object' ? filterValue.includes(match) // Check to see if match is in array : match.includes(filterValue) // do sub string match for strings }) }