I am using react-table and globalFilter to setup a search box. I want to be able to search firstname and lastname. the issue is, when I hit the space button the table doesnt show any data. I have tried using regex to remove whitespaces from the value state but not having any luck...
Here is my component below
/* 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;
Here is the solution I came up with Instead of bothering with the GlobalFilter etc.... Just go to your component that contains your react table and try this below
So my data is called contacts, it comes in from db as array of object like so
{
firstName: "kevin",
lastName: "Baker",
age: "22"
}
I need to add a new key to the object, I call it name, It contains firstName + " " + lastName as well as every other key in the obj (using the spread operator)
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 data
Now, contactsTwo contains a copy of all my data from my db and each object has all its original properties plus a new property called name, like so
{
name: "kevin Baker",
firstName: "kevin",
lastName: "Baker",
age: "22"
}
Now In the react table area where you put your data, just add your updated data, which in my case is contactsTwo
<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>
Now finally add a column for name but make it d-none so it is hidden
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',
}
},
]
Now when you search it should filter your table by first and last name with whitespaces no fancy regex needed