-
Notifications
You must be signed in to change notification settings - Fork 782
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New filtering behavior + default filter definition #270
Conversation
I updated styling only in react-bootstrap-table.css. |
In issue #249 you asked me for some css changes. |
yes, you should.
ok, follow your solution if you've completed this PR, let me know, I'll merge it. 🚢 |
Hi @AllenFang , I hope you had great time during your holidays! Thanks! |
@dana2208, thanks :) |
@dana2208, I've reviewed your code quickly at first seeing. a good and cleaner separated module design, use If you are in Taiwan, it's necessary shout you a meal 🎉 |
Hi, Thank you very much for the compliment! I am glad you like it! |
Release on v1.5.1 |
@dana2208 Really great, thanks! I'm play with this today and I found one problem. Do you have any idea? Here is code example
|
@Kurtas hello, I need you to provide me with an example that reproduces the issue. Thanks |
I removed all attributes from BoostrapTable because of space, sorry.
Yes, I'm sure when I didn't use
PS: I'm using https://github.com/este/este full dev stack, but I think that it doesn't have any relation. |
Hi @Kurtas and @AllenFang, The issue is the following one:
And from the changelog for React v0.13:
I think the problem is that the state of the number of page is on the PaginationList and not on BootstrapTable. I can make a fix by using What do you think @AllenFang? |
I agree we should make all states on the root component. in the past, I've moved selection row key from |
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.
You can compare here between your master and my branch.
All the examples are under Examples > Column Filter.
Thank you!