react-table globalFilter but with whitespaces

Question

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;

Answer 1

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