Fix filters on dynamic columns update

Author: Louis Blin

src/BootstrapTable.js

@@ -57,6 +57,18 @@ class BootstrapTable extends Component {
   }
 
   initTable(props) {
+    // If columns changed, clean removed columns that had filters
+    if (props.children !== this.props.children && this.filter) {
+      const nextDataFields = props.children.map(column => column.props.dataField);
+      this.props.children.forEach(column => {
+        const { dataField, filter } = column.props;
+        if (!nextDataFields.includes(dataField)) {
+          // Clear filter
+          this.filter.handleFilter(dataField, '', filter.type, filter);
+        }
+      });
+    }
+
     let { keyField } = props;
 
     const isKeyFieldDefined = typeof keyField === 'string' && keyField.length;

src/TableHeaderColumn.js

@@ -22,6 +22,19 @@ class TableHeaderColumn extends Component {
     if (nextProps.reset) {
       this.cleanFiltered();
     }
+
+    // If column not displaying the same dataField, reset the filter accordingly
+    if (nextProps.dataField !== this.props.dataField) {
+      const emitter = nextProps.filter.emitter || {};
+      const currentFilter = emitter.currentFilter || {};
+      const filter = currentFilter[nextProps.dataField];
+      const value = filter ? filter.value : '';
+
+      const { ref } = this.getFilters() || {};
+      if (this.refs[ref]) {
+        this.refs[ref].setState({ value });
+      }
+    }
   }
 
   handleColumnClick = () => {