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

【问题标题】：react-bootstrap-table2 search on column with complex (nested object) datareact-bootstrap-table2 搜索具有复杂（嵌套对象）数据的列
【发布时间】：2021-03-15 11:36:20
【问题描述】：

我在 react 项目中使用 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

【问题讨论】：

标签： reactjs react-native react-bootstrap react-bootstrap-table

【解决方案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 属性。

【讨论】：