Improved filtering

[dana2208]

Hi,

Would you be interested in a pull request where filters are part of the table header and could be either:

• text input
• select input
• number input together with a select input containing comparators (>, =, >=, <, <=)
• date input
• any other customizable filter written in react

I am actually developing that by hooking the react-bootstrap-table, but I think it would be great if it would be part of it.
What do you think?

[AllenFang]

@dana2208, it's a good features, feel free to contribute and discuss with me :)

[dana2208]

Hello @AllenFang,
I have just commited the beginning of my implementation for improved filtering.
This is WIP, but I'll be glad you'll have a look and tell me if this is a good direction to go to.
This is there:
[https://github.com/dana2208/react-bootstrap-table/tree/filtering]
And here are the changes:
[https://github.com/dana2208/react-bootstrap-table/commit/f5097f88b81ee8b85c26004763b4f40a3571e076]
You can see demo in Examples > filtering when running example-server.

I implemented for the moment 2 types of filters:

1. for text fields: it is an input text that has properties:

• placeholder (for overriding default)
• delay (between the moment we write in the text filter and the moment we actually filter, default is 2000ms)
• for fields with a closed set of values: it is a select input that has properties:
• placeholder (for overriding default)
• options: an object containing the set of values. Example: {0: old, 1: new} will render <select><option value=''>Select Status...</option><option value='0'>old</option><option value='1'>new</option></select>
  I want to implement also a date filter, a number filter and a customizable filter (any react component that can be used as a filter).

The filters are rendered in the render method of TableColumnHeader. Since this React component is not a child of the BootstrapTable I couldn't use the regular React way to communicate between the 2 components.
If TableColumnHeader was a child of BootstrapTable or of TableHeader (which is a child of BootstrapTable) I would have passed a onFilter props with a handleFilter method of BootstrapTable which is responsible for calling this.handleFilterData(currentFilter);.
However since there is no parent-child relationship between the 2 components, I used the EventEmitter: the event emitter is created on the BootstrapTable class if one of the column is filterable and is passed to each TableColumnHeader as props. Indeed, this event emitter has to be known by both components to emit (from the TableColumnHeader) and catch (in the BootstrapTable) the filter event.

Please look at the code and let me know if you agree with the current implementation.

[AllenFang]

@dana2208, thanks this improvement, because chinese new year was coming, I'm going to take vacation in these day. Anyway, if this patch is all work fine, just make a PR, I'll review it.

btw, I've ran up your examples, It's look like perfect :), but some questions as following:

1. the filter field can't be put on the left side ?(I know the column width is a big problem, so dont care about) ;(
2. I thinks you can use bootstrap class prefix xs or sm to make fields smaller :)

Thanks a lots 👍