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

Question

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

以下是要在 table 上显示的我的数据（示例）的结构：

[
{
  "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>

与上面的代码一样，我在一列中显示板列表，并希望搜索 table 中的所有列。在 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 属性。

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

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

reactjs

react-bootstrap

react-native

react-bootstrap-table