Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
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:
Select filter:
It renders a
select
input field.Add to the TableHeaderColumn
filter={{type: "SelectFilter", options: {...}}}
.It accepts the following properties:
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 aninput 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"}}
orfilter={{type: "NumberFilter", options: [...]}}
.It accepts the following properties:
options
is not passed, i.e. the delay has effect only on theinput type="number"
. If it is not provided, then default delay is 500 ms.options
props is provided and "Enter [columnName]..." elsewhere.comparator
andnumber
.comparator
value must be in the list of the legal comparators.select
input field is rendered and not aninput type="number"
. This is an array of numbers.Date filter:
It renders an
input type="date"
field.Add to the TableHeaderColumn
filter={{type: "DateFilter"}}
.It accepts the following properties:
Custom filter:
Any React component.
Add to the TableHeaderColumn
filter={{type: "CustomFilter", getElement: getCustomFilterFunc}}
It has the following properties:
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!