react-bootstrap-table2 搜索具有复杂（嵌套对象）数据的列

Question

我在反应项目中使用react-bootstrap-table2作为表并在表上使用搜索。 在具有单一和直接数据的列上，搜索工作正常。 但是在具有格式化值的列上，搜索不起作用。

以下是要在表格上显示的数据（样本）的结构：

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

下面是列的代码：

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;
}

下面是 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>

如上面的代码，我在列中显示板块列表，并希望搜索表中的所有列。 在 Id 和 User 列搜索工作正常，但在 Plates Test 列上它不起作用。

对此的任何帮助表示赞赏。

我已经在Storybook中完成了以下代码，但不明白如何在我的情况下使用它：

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

Answer 1

我能够用以下方法解决这个问题，以防它可以帮助任何人：

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()
  },
},];

在这种情况下，不需要 filterValue 属性。