SelectFilter formatter is not working properly

By using multiselectFilter or selectFilter like below, the content of column ‘Category’ isn’t displayed and with selecting an option, no row is displayed.

Here is my code:

render() {
  const selectOptions = {
    0: 'A',
    1: 'B',
    2: 'C'
  };
  const columns = [
    {
      dataField: 'id',
      text: 'ID'
    },
    {
      dataField: 'category',
      text: 'Category',
      formatter: cell => selectOptions[cell],
      filter: multiSelectFilter({
        options: selectOptions,
      })
    }
  ];
  return (
    <BootstrapTable
      keyField='id'
      data={data}
      columns={columns}
      filter={filterFactory()}
    />
  );
}

Here is my source of how to use multiSelectFilter.

If I modify selectOptions to

const selectOptions = {
  "A": "A",
  "B": "B",
  "C": "C"
}

the filter works fine. So I think the formatter is not working as expected and searches for the key instead of the value in the table. This is what my json data looks like:

[{
  "id": 1,
  "category": "A"
}, {...}, {...}]

Do you have any idea how to fix this? Thanks!

[AllenFang]

@NadineSch yes, you are right!

[NadineSch]

@AllenFang thanks for your fast reply. So you’re right with the formatter, my raw data is A, B or C and not 0, 1 or 2. Does that mean it’s necessary that the value i’m filtering for (A, B or C) is the key-attribute of the selectOptions-Object? Like:

const selectOptions = {
  A: 'Filter by A',
  B: 'Filter by B',
  C: 'Filter by C'
}

[key]: what I’m looking for in my raw Data [value]: how to name it in my filter-menu (?)

If I’m getting this right I’m clear now, thanks!