title: Custom Search box for React Datatables
body: <p>I have a Datatable set up like the default shown <a href="https://www.npmjs.com/package/mui-datatables" rel="nofollow noreferrer">here</a>. I want to have the search bar to filter the data detached from where it is and have it sitting somewhere completely different. So I want to have my own input field used to search the data in the exact way the current default one does.</p>
  
  <p>Here is my code and my current progress...</p>
  
  <pre><code>state = {
      searchValue: ''
  }
  
  const data = [
      ["Gabby", "Data 1", "Pending", "15/01/19", "$100,000"],
      ..........];
  
  let options = {
      .....
      customSearch: (searchQuery, currentRow, columns) =&gt; {
          let isFound = false;
          currentRow.forEach(col =&gt; {
              if (col.toString().indexOf(this.state.searchValue) &gt;= 0) {
                  isFound = true;
              }
          });
      return isFound;
      }
  };
  .....
  &lt;input
      type="text"
      value={this.state.searchValue}
      onChange={(e, value) =&gt; this.handleSearchChange(e, value)}
  /&gt;
  ......
  &lt;MUIDataTable
      title={"My Title"}
      data={data}
      columns={columns}
      options={options}
  /&gt;
  </code></pre>
  
  <p>What this currently does is you can type into my custom input field but you have to open up the default search field and when you type in there it uses my custom search text. So in a way I have it searching using the custom search. I would like it to work just as it does in <a href="https://www.npmjs.com/package/mui-datatables" rel="nofollow noreferrer">the gif</a>.</p>
  
  <p>Sorry if this is noob but I haven't been working with React long.</p>
  
  <p>Thanks</p>