react-bootstrap-table / react-bootstrap-table2

Next Generation of react-bootstrap-table
https://react-bootstrap-table.github.io/react-bootstrap-table2/
MIT License
1.27k stars 431 forks source link

Function Request: Multiselect Filter as Dropdown with Checkboxes #1227

Open Stefan-Reimer opened 4 years ago

Stefan-Reimer commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 2 years ago

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() } />