Estoy usando react-table y globalFilter para configurar un cuadro de búsqueda. Quiero poder buscar nombre y apellido. el problema es que cuando presiono el botón de espacio, la tabla no muestra ningún dato. Intenté usar expresiones regulares para eliminar los espacios en blanco del estado de valor, pero no tuve suerte...
Aquí está mi componente a continuación
/* eslint-disable react/prop-types */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useState } from 'react'; import { FormControl, InputGroup } from 'react-bootstrap'; import { useAsyncDebounce } from 'react-table'; const AdvanceTableSearchBox = ({ globalFilter, setGlobalFilter, placeholder = 'Search...' }) => { const [value, setValue] = useState(globalFilter); console.log(globalFilter) const onChange = useAsyncDebounce(value => { setGlobalFilter(value || undefined); }, 200); return ( <InputGroup className="position-relative"> <FormControl value={value || ''} onChange={({ target: { value } }) => { // tried running regex here to remove whitespace but logging value shows spaces still... setValue(value); onChange(value); }} size="md" id="search" placeholder={placeholder} type="search" className="shadow-none" /> <InputGroup.Text className="bg-transparent"> <FontAwesomeIcon icon="search" className="fs--1 text-600" /> </InputGroup.Text> </InputGroup> ); }; export default AdvanceTableSearchBox;Aquí está la solución que se me ocurrió En lugar de molestarme con GlobalFilter, etc. Simplemente vaya a su componente que contiene su tabla de reacción e intente esto a continuación
Entonces mis datos se llaman contactos, provienen de db como una matriz de objetos así
{ firstName: "kevin", lastName: "Baker", age: "22" }Necesito agregar una nueva clave al objeto, lo llamo nombre, contiene firstName + " " + lastName, así como cualquier otra clave en el obj (usando el operador de propagación)
const contacts = useSelector((state) => state.contacts) // getting data from db const contactsTwo = contacts?.map((el) => { return {...el, name: el.firstName + " " + el.lastName }}) // adding "name" key to dataAhora, contactosTwo contiene una copia de todos mis datos de mi base de datos y cada objeto tiene todas sus propiedades originales más una nueva propiedad llamada nombre, así
{ name: "kevin Baker", firstName: "kevin", lastName: "Baker", age: "22" }Ahora, en el área de la tabla de reacción donde coloca sus datos, simplemente agregue sus datos actualizados, que en mi caso es contactosDos
<AdvanceTableWrapper columns={columns} data={contactsTwo} // here is where I put my data sortable pagination perPage={10} selection selectionColumnWidth={25} selectionCallback={selectionCallback} > <Row className="flex-start-center mb-3 ml-1"> <Col xs="auto" sm={6} lg={4}> <AdvanceTableSearchBox table/> </Col> </Row> <AdvanceTable table headerClassName="bg-200 text-900 font-weight-bold text-nowrap align-middle" rowClassName="btn-reveal-trigger border-top border-200 align-middle white-space-nowrap" tableProps={{ striped: true, className: 'fs--1 font-weight-bold overflow-hidden' }} /> <div className="mt-3 mb-2 pr-2 pl-3 "> <AdvanceTableFooter rowCount={contacts?.length} table rowInfo navButtons rowsPerPageSelection /> </div> </AdvanceTableWrapper>Ahora, finalmente, agregue una columna para el nombre, pero hágalo d-none para que esté oculto
const columns = [ { accessor: 'firstName', Header: 'First Name', Cell: firstNameFormatter }, { accessor: 'lastName', Header: 'Last Name', Cell: lastNameFormatter }, { accessor: 'name', headerProps: { className: "d-none" }, cellProps: { className: 'd-none', } }, ]Ahora, cuando busque, debe filtrar su tabla por nombre y apellido con espacios en blanco, no se necesitan expresiones regulares elegantes