Bugs with filter

My filter has a few bugs which I'm not sure if they are bad configurations or bugs.

First let me show you what is happening:


## Current Behavior

There are couple of different things

1) After clicking on a filter it doesn't stay on the box. The box gets a blank space. Although I do see a pill.
2) After clicking the reset buttons, nothing happens
3) After clicking the X on the pill, the filter is not removed and a white screen is shown.
4) It would be nice to close the filter window after choosing a filter automatically. Is that possible?

## Steps to Reproduce (for bugs)

Here is my view:

```
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom';
import Money from './Money';
import { CircularProgress, Typography } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';

import { getMids } from '../actions/mids';

class MidsIndex extends Component {
constructor(props){
super(props);
this.state = { pending:undefined,
page: 0,
count: 1,
pageSize: 20,
filters: [],
filterList: [],
data: [["Loading Data..."]],
isLoading: false
};
}

componentDidMount(){
this.setState({ pending:this.props.pending });
this.getData();
}

componentWillReceiveProps(props){
this.setState({ pending:props.pending });
}

getData = () => {
this.setState({ isLoading: true });
this.xhrRequest(this.state).then(res => {
this.setState({ data: res.data, isLoading: false, count: res.total });
});
}

xhrRequest = (query) => {
return new Promise((resolve, reject) => {
query.pending = this.state.pending
this.props.getMids(query).then((response) => {
let data = response && response.data
if(data){
let results = data.results ? data.results : []
let totalCount = data.total_count
resolve({
data: results,
page: query.page,
total: totalCount
})
} else {
resolve({
data: [],
page: 0,
total: 0
})
}
})
})
}

formatFieldWithRow(field, row) {
switch(field){
case 'name':
return (
{row[1]}
);
case 'amount':
return (
row[4] === null ?

-

:
);
case 'status':
var $status = ''
switch(row[5]){
case 1:
$status = 'New'
break;
case 2:
$status = 'Submitted'
break;
case 3:
$status = 'Pending Review'
break;
case 4:
$status = 'Live'
break;
case 5:
$status = 'Declined'
break;
case 6:
$status = 'Closed'
break;
default:
break;
}
return (
$status
);
default:
break;
}
}

statusStringToID(status){
switch(status){
case 'New':
return 1
case 'Submitted':
return 2
case 'Pending Review':
return 3
case 'Live':
return 4
case 'Declined':
return 5
case 'Closed':
return 6
default:
return 0
}
}

render() {
const columns = [
{ label:"Gateway ID", name: 'id', options: { filter: false } },
{ label:"Gateway Alias", name: 'name', options: { filter: false, customBodyRender: (value, tableMeta, updateValue) => {
return this.formatFieldWithRow('name', tableMeta.rowData)
} } },
{ label:"Corporation", name: 'corporation', options: { filter: false } },
{ label:"CRM", name:'crm', options: { filter: false } },
{ label:"MTD", name:'mtd', options: { filter: false, customBodyRender: (value, tableMeta, updateValue) => {
return this.formatFieldWithRow('amount', tableMeta.rowData)
} } },
{ label:"Status", name:'status', options: { customBodyRender: (value, tableMeta, updateValue) => {
return this.formatFieldWithRow('status', tableMeta.rowData)
}, filterOptions: {
names: ['New', 'Submitted', 'Pending Review', 'Live', 'Declined', 'Closed']
}, filterList: this.state.filters,
} }
];
const { data, page, count, pageSize, isLoading , filterList} = this.state;

const options = {
filter: true,
filterType: 'dropdown',
responsive: 'stacked',
serverSide: true,
count: count,
page: page,
rowsPerPage: pageSize,
serverSideFilterList: filterList,
onTableChange: (action, tableState) => {

// a developer could react to change on an action basis or
// examine the state as a whole and do whatever they want

switch (action) {
case 'changePage':
this.changePage(tableState.page);
break;
case 'filterChange':
var filters = []
tableState.columns.map((column, index) => {
if(tableState.filterList[index].length > 0){
var filter = {
column: {
field: column.name
},
value: tableState.filterList[index].map(this.statusStringToID)
}
filters.push(filter)
}
})
this.setState({ filters: filters, filterList: tableState.filterList }, () => {
this.getData();
})
break;
default:
break;
}
}
};

return (

);
}
}

function mapStateToProps(state){
return { mids: state.mids };
}

function mapDispatchToProps(dispatch) {
return bindActionCreators({ getMids } , dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(MidsIndex));

```
## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.6.1 |
| MUI-datatables | 2.12.4 |
| React | 16.8.6 |
| browser | Chrome 78 |
| etc | |

Start by reproducing the supplied MidsIndex example with MUIDataTable 2.12.4, focusing on the filterChange handler, filterList, and serverSideFilterList options. Check how selecting, resetting, and removing filters update the table; done means selected filters remain visible, reset and X clear them without a blank screen, and the filter window closes if that behavior is supported.

Written by the indexing model from the issue text.