Function Request: Multiselect Filter as Dropdown with Checkboxes

[Stefan-Reimer]

I would like to have a multiselect Filter where I can check a box to show, whether I want to show the specific entry or hide it. The same way you do it in excel filters.

Is it possible to implement that in the next month? Otherwise I would have to implement that myself because that is an important request for our webpage.

(There is already an Issue that asks if there is an excel like filter but there is no request for doing it. Issue #331)

[AllenFang]

HI @Stefan-Reimer this is minor feature for me so far, because we support a way to let developer to customize the filter they want. So any PR is welcome 👍

[jatinrathod17]

@Stefan-Reimer You can achieve this functionality using 'multiselect-react-dropdown' Package with custom filter, I do have same requirement and i have achieved it using this combination.

[Bhaskar-Newase-Ext]

@Stefan-Reimer You can achieve this functionality using 'multiselect-react-dropdown' Package with custom filter, I do have same requirement and i have achieved it using this combination.

Can you please share the onSelect & onRemove functions

[sumanthExp]

Here is an example if it helps:

import React from "react";
import Multiselect from "multiselect-react-dropdown";
import filterFactory, { FILTER_TYPES, customFilter } from 'react-bootstrap-table2-filter';

class ProductFilter extends React.Component {
  static propTypes = {
    column: PropTypes.object.isRequired,
    onFilter: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props);
    this.filter = this.filter.bind(this);
  }
  
  filter(selectedList, selectedItem) {
    this.props.onFilter(
      selectedList.map(x => [x.value])  
    );
  }

render(){
    return <Multiselect options={selectOptions} 
            displayValue="label" 
            showCheckbox 
            closeOnSelect={false}
            onSelect={this.filter} 
            onRemove={this.filter}/>;
  }

}
const selectOptions = [
  {value: 0, label: 'good'},
  {value: 1, label: 'Bad'},
  {value: 2, label: 'unknown'}
];

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'quality',
  text: 'Product Quailty',
   filter: customFilter({
          type: FILTER_TYPES.MULTISELECT
        }),
   filterRenderer: (onFilter, column) =>
       <ProductFilter onFilter={onFilter} column={column}/>
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />