title: How to implement search in material-ui datagrid?
body: <p>I'm trying to implement quick filter/search option in Material-UI datagrid. As of now datagrid doesn't have search option. I'm using <a href="https://www.npmjs.com/package/material-ui-search-bar" rel="nofollow noreferrer">Material-UI-Search-Bar</a> library to add search field and functionality. I'm having this inside custom toolbar, but unfortunately this doesn't work because it has something to do with state. I'm not able to focus the text field. Below my code</p>
  <pre><code>...
  
  const requestSearch = (searchedVal: string) =&gt; {
      const filteredRows = tableData.filter((o: any) =&gt; {
          return Object.keys(o).some((k: any) =&gt; {
              return  o[k].toString().toLowerCase().indexOf(searchedVal.toLowerCase()) != -1;
          })
      });
      console.log(filteredRows);
      // setTableData(filteredRows);
  };
  
  const cancelSearch = () =&gt; {
      setSearchText(&quot;&quot;);
      requestSearch(searchText);
  };
  
  const CustomToolbar = () =&gt; {
      &lt;div className='p-6'&gt;
          &lt;div&gt; ... &lt;/div&gt;
          &lt;SearchBar
              value={searchText}
              onChange={(searchVal: string) =&gt; requestSearch(searchVal)}
              onCancelSearch={() =&gt; cancelSearch()}
           /&gt;
      &lt;/div&gt;
  }
  ...
  return (
      &lt;div ... &gt;
          &lt;div style={{ height: 500, width: '100%', backgroundColor: 'white' }}&gt;
              &lt;DataGrid
                  rows={tableData}
                  columns={columns}
                  components={{ Toolbar: CustomToolbar }}
                  ...
               /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  )
  </code></pre>