using react table and react select

2.1k Views Asked by At

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),
    );
0

There are 0 best solutions below