OnFilter change options of other filters
remoroethlisberger opened this issue ยท 7 comments
Hi I am using the react-bootstrap-table to display some information in a nice table structure. However I am running into the issue that the filter options for the select filter won't update. So I was wondering if there is an easy way of having the options default to the values that are currently available in the table for that column.
I am currently getting the categories by creating a set of each relevant category using this.state.data
, which however won't update when filtering by any category and thus the options in each select filter always stay the same.
<BootstrapTable keyField='id' data={this.state.data} columns={columns} filter={filterFactory()} resize={{extra: 80}} headerClasses='bootstrap-table-header' striped hover condense />
where columns is something like this:
const columns = [
{ dataField: 'category_1',
text: 'Category_1',
headerFormatter: this.headerFormatter,
sort: true,
filter: selectFilter({
placeholder: 'Category 1...',
options: this.getCategory1()
})
},
{ dataField: 'category_2',
text: 'category_2',
headerFormatter: this.headerFormatter,
sort: true,
filter: selectFilter({
placeholder: 'Category 2...',
options: this.getCategory2()
})
},
{ dataField: 'category_3',
text: 'category_3',
headerFormatter: this.headerFormatter,
sort: true,
filter: selectFilter({
placeholder: 'Category 3...',
options: this.getCategory3()
})
}
]
So is there an easy way of having the options default to the different values in the dataFields and if not, how can I access the filtered data that is currently displayed and use those as base for the options in those filters.
Appreciate your help.
Here is a small example for better understanding of my ask: https://codesandbox.io/embed/snowy-shadow-1d8xs-1d8xs
When filtering I want the other optionsFilter to only include the values that are in the table and not all of the possible values...
@remoroethlisberger firstly, sorry for lately reply, I think this is not an issue in my opinion, the select filter is stateless and design for user to filter data with a set of options.
So is there an easy way of having the options default to the different values in the dataFields
No
how can I access the filtered data that is currently displayed and use those as base for the options in those filters.
So far we only have a way to access the current filtered data is via ref
, we didn't support a hook or a listener to get all the display data yet.
The way I mentioned above is though exposed API: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/exposed-api.html#get-current-filters
But I guess this is hard to you to leverage.
About how to update the selection options, I think it's very easy, just keep the options in state and call setState when data change.
In this issue, I will figure out how to get/listen a data change so that developer can get the newest display data on table. Thanks
This was very helpful, as I wasn't aware of the exposed API... So I did what you suggested and it works just fine. Thanks a lot Allen!
Hi @AllenFang,
I hope you are well. I am reaching out to you because the suggested solution is no longer working as I get an Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. sentryWrapped โ index.js:3228 https://sentry.io/api/1856747/store/?sentry_key=9b1db9352712488e9e190380330539ee&sentry_version=7
I assume that the change in the options, which I keep in the component's state, are triggering a re-render of the component and therefore cause a recursive call and finally a stack overflow...
I tried multiple different tricks, but nothing seems to be working. Is someone aware of the fact that updating a component state inside the onFilter function causes trouble?
Highly appreciate your help.
Thanks,
Remo
I actually found a work around. However, I am still curious why the above happens when following your guidelines... Did something change?
Also more general question: Is the onFilter function not called if I pick the "all value" / "placeholder" value? I think I need that in order to reset the options.
Or if anyone has a better idea, please let me know how I can achieve the dynamic options for select filters.
Keep up the great work!
Cheers,
Remo
I am effectively trying to accomplish the same thing as @remoroethlisberger
I got to the point of getting the Maximum update depth exceeded
error as well from updating a component state from within the onFilter function. @remoroethlisberger how did you end up bypassing this error?
Or is there a better solution to creating a dynamic filtering option? I followed the above guidelines; saved the 'options' as a state, and called this.setState()
from within onFilter
, which is resulting in the StackOverflow. I have a similar suspicion to the above as to why this is occurring. I would like to not us a gimmicky/hacky boolean trick to get this to work.
Thanks.
@remoroethlisberger
Hi Remo, I'm also curious how you solve this problem finally. Could you share some hints with us?
Thanks.