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.
Reference: https://github.com/adazzle/react-data-grid/issues/885
```
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) => new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
rowGetter = index => Selectors.getRows(this.state)[index];
rowsCount = () => Selectors.getRows(this.state).length;
handleFilterChange = (filter) => {
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) => {
const values = this.state.rows.map(r => r[columnId]);
return values.filter((item, i, a) => i === a.indexOf(item));
};
handleOnClearFilters = () => {
this.setState({ filters: {} });
};
handleGridSort = (sortColumn, sortDirection) => {
const comparer = (a, b) => {
if (sortDirection === 'ASC') {
return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
} else if (sortDirection === 'DESC') {
return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
}
};
const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);
this.setState({ rows });
};
render() {
return (
<ReactDataGrid
enableCellSelect
columns={this._columns}
rowGetter={this.rowGetter}
rowsCount={this.rowsCount()}
onGridSort={this.handleGridSort}
minHeight={450}
toolbar={<Toolbar enableFilter />}
onAddFilter={this.handleFilterChange}
getValidFilterValues={this.getValidFilterValues}
onClearFilters={this.handleOnClearFilters}
/>);
}
}
```
The above piece of code is being used for rendering the data grid.
