OnFilter change options of other filters

[remoroethlisberger]

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.

[remoroethlisberger]

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...

[AllenFang]

@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

[remoroethlisberger]

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!

[remoroethlisberger]

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

[remoroethlisberger]

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

[mathewf2]

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.

[aws-haoyuli]

@remoroethlisberger
Hi Remo, I'm also curious how you solve this problem finally. Could you share some hints with us?

Thanks.