title: Implementing a global search filter across react-table : React+ react-table
body: <p>I am trying to implement a global search filter that searches for the key across the entire table. I am attaching a change handler and on every input I trigger a callback that searches that key across that data and the value is being set.It is getting filtered as I type-in the characters  but I want the search to work when I enter multiple serach values like string1,string2 in the search input</p>
  
  <p>Code Sandbox: <a href="https://codesandbox.io/s/jolly-bhabha-iqcx1" rel="nofollow noreferrer">https://codesandbox.io/s/jolly-bhabha-iqcx1</a></p>
  
  <h2>Code</h2>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Input } from "semantic-ui-react";
  import ReactTable from "react-table";
  import "react-table/react-table.css";
  import "./styles.css";
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [
          { firstName: "aaaaa", status: "Pending", visits: 155 },
          { firstName: "aabFaa", status: "Pending", visits: 155 },
          { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
          { firstName: "aAaaaa", status: "Approved", visits: 175 },
          { firstName: "adaSaaa", status: "Cancelled", visits: 165 },
          { firstName: "aasaaa", status: "Cancelled", visits: 157 },
          { firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
          { firstName: "aaaaaa", status: "Submitted", visits: 155 }
        ],
        columns: [],
        searchInput: ""
      };
    }
  
    componentDidMount() {
      let columns = [
        {
          Header: "First Name",
          accessor: "firstName",
          sortable: false,
          show: true,
          displayValue: " First Name"
        },
        {
          Header: "Status",
          accessor: "status",
          sortable: false,
          show: true,
          displayValue: "Status "
        },
        {
          Header: "Visits",
          accessor: "visits",
          sortable: false,
          show: true,
          displayValue: " Visits "
        }
      ];
      this.setState({ columns });
    }
  
    handleChange = event =&gt; {
      this.setState({ searchInput: event.target.value }, () =&gt; {
        this.globalSearch();
      });
    };
  
    globalSearch = () =&gt; {
      let { data, searchInput } = this.state;
      if (searchInput) {
        let filteredData = data.filter(value =&gt; {
          return (
            value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
            value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
            value.visits
              .toString()
              .toLowerCase()
              .includes(searchInput.toLowerCase())
          );
        });
        this.setState({ data: filteredData });
      }
    };
  
    render() {
      let { data, columns, searchInput } = this.state;
      return (
        &lt;div&gt;
          &lt;br /&gt;
          &lt;Input
            size="large"
            name="searchInput"
            value={searchInput || ""}
            onChange={this.handleChange}
            label="Search"
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;ReactTable
            data={data}
            columns={columns}
            defaultPageSize={10}
            className="-striped -highlight"
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>