How to get the filtered json object after filtering by react-bootstrap-table2-filter

Question I am getting the JSON data from Springboot backend and display in react-bootstrap-table2.

When I filter JSON data using react-bootstrap-table2-filter e.g. filter: textFilter(), I would like to send the filtered JSON data to the backend to update another react component.

However, currently I cannot find a way to get filtered JSON data, but I only have the JSON data returned from the backend.

My question is that how to get the filtered JSON object so that I can send it to the backend.

Screenshots

As per the story book above, I filtered the JSON data by selectFilter()/ textFilter(), how to get the currently filtered JSON data which has only two rows (from the original 10 rows from the backend).

codesandbox Please refer to the similar code in the story book as below. Currently the data={ products } has the original JSON data (not the filtered JSON). How can I get the filtered JSON which has only two rows?

`const selectOptions = { 0: ‘good’, 1: ‘Bad’, 2: ‘unknown’ };

const columns = [{ dataField: ‘id’, text: ‘Product ID’ }, { dataField: ‘name’, text: ‘Product Name’ }, { dataField: ‘quality’, text: ‘Product Quailty’, formatter: cell => selectOptions[cell], filter: selectFilter({ options: selectOptions, defaultValue: 2 }) }];

<BootstrapTable keyField=‘id’ data={ products } columns={ columns } filter={ filterFactory() } />`

Thank you very much for your help.

[jackiehamchen]

BTW, @jackiehamchen when do you want to get the the filtered data? if should be performed automatically when filter trigger? or just press a button by user?

@AllenFang currently the use case is to get the filtered json as shown in the table automatically when filter is triggered. Thus, another react component can get updated automatically too e.g. <ChildComponent filterData={this.state.data}/>

[AllenFang]

@jackiehamchen https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2020/04/18/version-bump.html

docs: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html#afterfilter

online demo: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column Filter&selectedStory=Filter Hooks&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel