title: React Data Grid Multiselect filter alignment issue
body: <p>When we select multiple filter options in React Data Grid, the column headers are getting messed up.
  Is there a way to fix this issue so that the selected filter options appear above a line in a 
  dropdown instead of getting added to column header. The column header size is growing as new filter keys get added to the list.</p>
  
  <p>Reference: <a href="https://github.com/adazzle/react-data-grid/issues/885" rel="nofollow noreferrer">https://github.com/adazzle/react-data-grid/issues/885</a></p>
  
  <p>```</p>
  
  <pre><code>import React from 'react';
  
  var ExecutionEnvironment = require('exenv');
  
  if (ExecutionEnvironment.canUseDOM) {
    var ReactDataGrid = require('react-data-grid');
    var { Toolbar, Filters: { NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter }, Data: { Selectors } } = require('react-data-grid-addons');
  }
  
  export default class ReactGrid extends React.Component {
    constructor(props, context) {
      const { Toolbar, Filters: { NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter }, Data: { Selectors } } = require('react-data-grid-addons');
      super(props, context);
  
      this._columns = [
        {
          key: 'prd_family_name',
          name: 'Product Family Name',
          width: 190,
          filterable: true,
          filterRenderer: MultiSelectFilter,
          sortable: true
        },
        {
          key: 'prd_family_mkt',
          name: 'Market',
          width: 70,
          filterable: true,
          filterRenderer: AutoCompleteFilter,
          sortable: true
        }
      ];
      console.log(`gridvalue${this.props.gridValues}`);
      this.state = { filters: {} };
    }
  
    componentWillReceiveProps(nextProps) {
      this.setState({ rows: nextProps.gridValues });
    }
  
    getRandomDate = (start, end) =&gt; new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
  
    rowGetter = index =&gt; Selectors.getRows(this.state)[index];
  
    rowsCount = () =&gt; Selectors.getRows(this.state).length;
  
    handleFilterChange = (filter) =&gt; {
      const newFilters = Object.assign({}, this.state.filters);
      if (filter.filterTerm) {
        newFilters[filter.column.key] = filter;
      } else {
        delete newFilters[filter.column.key];
      }
      this.setState({ filters: newFilters });
    };
  
    getValidFilterValues = (columnId) =&gt; {
      const values = this.state.rows.map(r =&gt; r[columnId]);
      return values.filter((item, i, a) =&gt; i === a.indexOf(item));
    };
  
    handleOnClearFilters = () =&gt; {
      this.setState({ filters: {} });
    };
  
    handleGridSort = (sortColumn, sortDirection) =&gt; {
      const comparer = (a, b) =&gt; {
        if (sortDirection === 'ASC') {
          return (a[sortColumn] &gt; b[sortColumn]) ? 1 : -1;
        } else if (sortDirection === 'DESC') {
          return (a[sortColumn] &lt; b[sortColumn]) ? 1 : -1;
        }
      };
  
      const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);
  
      this.setState({ rows });
    };
  
    render() {
      return (
        &lt;ReactDataGrid
          enableCellSelect
          columns={this._columns}
          rowGetter={this.rowGetter}
          rowsCount={this.rowsCount()}
          onGridSort={this.handleGridSort}
          minHeight={450}
          toolbar={&lt;Toolbar enableFilter /&gt;}
          onAddFilter={this.handleFilterChange}
          getValidFilterValues={this.getValidFilterValues}
          onClearFilters={this.handleOnClearFilters}
        /&gt;);
    }
  }
  </code></pre>
  
  <p>```</p>
  
  <p>The above piece of code is being used for rendering the data grid.</p>
  
  <p><a href="https://i.stack.imgur.com/hL4j3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hL4j3.png" alt="enter image description here"></a></p>