Filtering

[dana2208]

Hello,

With this PR, we are able to define for each column header if it is filterable and what type of filter it is. I wrote 4 built-in filters:

1. Text filter
2. Select filter
3. Number filter
4. Date filter

Moreover there is a custom filter that can be any React component you write.
In the UI, filters are part of the column header (and not a separate table as now).

A default value can be passed so that table is filtered as soon as it renders, which is also a new feature.

More info on each filter type:

Text filter:

It renders an input type="text".
Add to the TableHeaderColumn filter={{type: "TextFilter"}}.

It accepts the following properties:

• delay: the filter event is fired after this delay has elapsed from the last change in the input field. If it is not provided, then default delay is 500 ms.
• placeholder: if nothing is provided, then the default "Enter [columnName]..." is displayed.
• defaultValue: a default filter value when the table is rendered first time.

Select filter:

It renders a select input field.
Add to the TableHeaderColumn filter={{type: "SelectFilter", options: {...}}}.

It accepts the following properties:

• placeholder: if nothing is provided, then the default "Select [columnName]..." is displayed.
• defaultValue: a default filter value when the table is rendered first time.
• options: an object where the properties will be the value of the option tags and the values of each property will be the displayed option to the user.
  For example qualityType = {0: good, 1: bad} will display a select input field with 2 options: good with value=0 and bad with value=1.

Number filter:

It may render in 2 different layouts, it depends whether property options is provided or not.
If it is provided, it means that filterable number values are restricted to this list and therefore a select input field is rendered. Elsewhere an input type="number" is displayed.
In both cases, it will be always rendered together with a select input field that contains the legal list of comparators, i.e. =, >, >=, <, <=, !=.
Add to the TableHeaderColumn filter={{type: "NumberFilter"}} or filter={{type: "NumberFilter", options: [...]}}.

It accepts the following properties:

• delay: the filter event is fired after this delay has elapsed from the last change in the input field. This props take effect only if props options is not passed, i.e. the delay has effect only on the input type="number". If it is not provided, then default delay is 500 ms.
• placeholder: if nothing is provided, then the default "Select [columnName]..." is displayed if options props is provided and "Enter [columnName]..." elsewhere.
• defaultValue: a default filter value when the table is rendered first time. This is an object that has 2 properties: comparator and number. comparator value must be in the list of the legal comparators.
• options: if provided, a select input field is rendered and not an input type="number". This is an array of numbers.
• numberComparators: the comparators available to the user. If not provided then the list of comparators is =, >, >=, <, <=, !=. It is an array of strings. If provided, it must be in the list of legal comparators.

Date filter:

It renders an input type="date" field.
Add to the TableHeaderColumn filter={{type: "DateFilter"}}.

It accepts the following properties:

• defaultValue: a default filter value when the table is rendered first time. It is a Date object.

Custom filter:

Any React component.
Add to the TableHeaderColumn filter={{type: "CustomFilter", getElement: getCustomFilterFunc}}

It has the following properties:

• getElement: this is a required property. It is a function that returns the React element that will filter the table. Signature of this function is:
  1. the filter handler callback that you will need to call in your React element when you will fire the filter event.
  2. an object containing any other data you want to pass to your React element, if any.
• customFilterParameters: any other data you want to pass to your React element, if any.

You can also choose to write your own filtering logic.
For this, when calling the filter handler in your React element, you need to pass an object containing 2 properties:
1. callback: the function that will actually do the filtering logic. This function takes as input parameter the targeted value (i.e. the value in the cell) and it must return a boolean (true if the row is filtered and false if the row will be in the result set). It may also take as a second input parameters the callbackParameters parameter (see below).
2. callbackParameters: any extra data you need in the function discussed above.

If you don't need any custom filtering logic (i.e. when you implement the custom filter in order to have a different UI only and not a different filtering logic), then simply pass to the filter handler the value and it will behave like a Text filter.
If you want it to behave like a Select filter, pass 2 parameters: the value and "SelectFilter",
If you want it to behave like a Number filter, pass 2 parameters: an object in this format {number: 2, comparator: ">"}, and "NumberFilter".
If you want it to behave like a Date filter, pass 2 parameters: the value and "DateFilter".

This PR is related to issue #249.
Here is the compare link between your master and my branch:
https://github.com/AllenFang/react-bootstrap-table/compare/master...dana2208:filtering.
All the examples are under Examples > Column Filter.

Thank you!