react-bootstrap-table2 search on column with complex (nested object) data

Question

I am using react-bootstrap-table2 for table in react project and using search on table. On columns with single and straight data, search is working fine. But on columns with formatted value, search is not working.

Below is structure of my data (sample) to display on table:

[
{
  "id": 121212,
  "user": "Test1",
  "plates": [
    {
      "id": 101,
      "plate": "AA-1122",
    },
    {
      "id": 102,
      "plate": "AB-1100",
    }
  ]
},
...]

Below is code for Columns:

columns = [
{ dataField: "id", text: "Id", hidden: true },
{
  dataField: "user",
  text: "User",
  sort: true,
},
{
  dataField: "plates",
  text: "Plates Test",
  formatter: (cell, row) => row.plates.map(x => <>{x.plate}</>),
  filterValue: (cell, row) => formatterFilter(cell, row),
}, ];

function formatterFilter(cell, row) {
  return cell.plate;
}

Below is code for ToolkitProvider:

<ToolkitProvider
  keyField="id"
  data={props.data}
  columns={props.columns}
  // search
  search={{ searchFormatted: true }}
>
...
<SearchBar
    {...props.searchProps}
    style={styles.search}
    placeholder="Type Search criteria to filter data"
  />
...
</ToolkitProvider>

As in above code, I am displaying list of plates in a column and want to search on all the columns in table. On Id and User column search is working fine, but on Plates Test column its not working.

Any help on this is appreciated.

I have already gone through below code in Storybook, but don't understand how I can utilize this in my case:

formatter: (cell, row) => types[cell],
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called 

Answer 1

I was able to solve this issue with below approach, in case it may help anyone:

columns = [
{ dataField: "id", text: "Id", hidden: true },
{
  dataField: "user",
  text: "User",
  sort: true,
},
{
  dataField: "plates",
  text: "Plates Test",
  hidden: true,
  formatter: (cell, row, rowIndex, extraData) => { 
    //Here I created array and not was able to search on this column.
    let plateArr = [];
    row.plates.map(x => {
      plateArr.push(x.plate);
    })
    return plateArr.join()
  },
},];

And in this case filterValue property was not required.