I have used react-table to create a table. in the last column, i have Tags which I used a custom filter. I used and react-select library for autocomplete searching and multi select option.
{
Header: ' categoury',
accessor: 'tags',
Cell: cells.Tags,
Filter: ({ filter, onChange }) => (
<Select
options={filter}
labelKey="name"
valueKey="key"
clearable={false}
multi={true}
value={filter}
onChange={value => onChange(value)}
/>
),
}, now i don't know how to handle onChange method. i want to when user start typing, request sent server and option's (tags) load to Select. i did this in another columns :
<ReactTable
manual
filterable
onFetchData={this.onFetchData}
columns={columns}
noDataText="No Data!"
{...this.state}
/>
onFetchData :
onFetchData = async state => {
const query = rest.getQueryFromTableState(state);
this.setState({ loading: true });
const data = await this.fetchFrom({ model: 'item', query });
this.setState({
data: data.map(R.merge({ isSelected: false })),
loading: false,
});
};
fetchFrom = ({ model, query }) =>
rest.get(
`/v1/distributor/${model}?${query}`,
null,
rest.getDistKeyFromProps(this.props),
);