Bind column filter onKeyUp to a dropdown menu click

[alisan617]

Let's say I have a column with category data, I have a dropdown menu pre-populated with those category names. How do I bind the column filter input onKeyUp event with the dropdown menu click event?

[AllenFang]

@alisan617, you can use afterColumnFilter. It's a hook for after column filtering. for examples:

function afterColFilter(filterConds, result){
    //do your stuff
}
var options = {
    afterColumnFilter: afterColFilter
}
<BootstrapTable data={data} options={options}>
//....

You can check the docs

[alisan617]

My apology. My question wasn't clear enough. The goal is to have a dropdown menu, so that one doesn't have to type into the filter input text box to filter, but clicking a dropdown will filter the column. "afterColumnFilter" is tied to the keyup event of the input text box, which doesn't exist.

Thanks Allen.

[AllenFang]

Sorry my english is not very good ;(
Say you want to select an item in dropdown(a Dropdown you render it in somewhere) to do a column filtering, is that your purpose?

[alisan617]

Yes.

[AllenFang]

try this

export default class FilterTable extends React.Component{

  // handle dropdown on select
  handleDropDownSelect(e){
   // find name eq 123
    this.refs.table.handleFilterData({
      name: "123"
    });
  }

  render(){
    return (
      <div>
      // your dropdown....
      // table as following
      <BootstrapTable ref="table" data={products}>
          <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
      </BootstrapTable>
      </div>
    );
  }
};

[alisan617]

That works. Thank you.

[hctslm]

Hi

I am trying to add a custom filter with multiple selection like excel checkbox filter for table header, So I am using bootstrap dropdown menu for styling, but it is behind the table body

I have tried the following code for header and body as well but it's not working
.react-bs-container-body{
overflow: inherit !important;
}
Can anyone give solution

Thanks in advance

[AllenFang]

@hctslm, could you please open a new issue and I'll reply you. BTW, if a minimal and simple codes let me try it will be better :)