title: Filter functionality of Material UI Datagrid not working correctly
body: <p>I'm using Material UI Data Grid to show a table. By default, it's showing an additional filter for every column for sorting purposes. However, when I click on the filter, it's going behind my Bootstrap Modal. Is there a way to fix it?
  Here's how it looks when I click on the ID filter (the three vertical dots).</p>
  <p><a href="https://i.stack.imgur.com/m9N0k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9N0k.png" alt="enter image description here" /></a></p>
  <p>Here's the code for the DataGrid which is inside my Modal. Removed the html inside header, title, etc which is irrelevant. The return statement looks like this:</p>
  <pre><code>  &lt;Modal show={this.state.menu} dialogClassName=&quot;modal-width&quot;&gt;
                  &lt;div class=&quot;modal-content modal inmodal&quot; &gt;
                      &lt;Modal.Header &gt;
                          &lt;Modal.Title&gt;&lt;/Modal.Title&gt;
                      &lt;/Modal.Header&gt;
                      &lt;Modal.Body class=&quot;modal-body&quot;&gt;
                         {HCPTable}
                      &lt;/Modal.Body&gt;
  </code></pre>
  <p>And this is the HCP table variable inside the render which contains the Data Grid. I'm using a few if conditions to show it which aren't important so haven't included them.</p>
  <pre><code>   HCPTable = 
              &lt;div class=&quot;row&quot; style={{ marginTop: '15px' }}&gt;
                      &lt;div style={{ height: 400, width: '100%' }}&gt;
                          &lt;DataGrid
                              rows={this.state.advancedSearchResults} columns={columns} pageSize={5}
                              onRowSelected = {(rowSelection) =&gt; {this.setState({selectedRow: rowSelection.data,
                                  HCPSelected: new Array(String('[' + rowSelection.data.npi + &quot;]&quot; + rowSelection.data.first_name))
                              }, ()=&gt; {
                                  let HCPSelected = new Array(String('[' + rowSelection.data.npi + &quot;]&quot; + rowSelection.data.first_name))
                                  console.log(HCPSelected);
                                  console.log(typeof(HCPSelected));
                                  console.log('state inside DataGrid: ',this.state);
                              })}}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>I want the filter dropdown to come in front instead of it going behind. I know it should be a small css change but don't know where to make it.</p>
  <p><strong>Edit:</strong></p>
  <p>So I found that changing the z-index in the console is enabling it to come in the front. I change the z-index in this class:</p>
  <p><a href="https://i.stack.imgur.com/MbxfH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MbxfH.png" alt="enter image description here" /></a></p>
  <p>But how to access that class inside my application to make it a permanent change.</p>
  <p><strong>Edit2:</strong></p>
  <p>Here's a screenshot of what I want to change:</p>
  <p><a href="https://i.stack.imgur.com/WFzG6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WFzG6.png" alt="enter image description here" /></a></p>