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

Question

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

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

[
{
  "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”和“用户”列上搜索工作正常，但在“板块测试”列上则不起作用。

如有任何帮助，我们将不胜感激。

我已经在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属性。

Answer 2

要解决格式化程序中复杂 JSX 语法的搜索问题，有必要使用 filterValue，并删除 search={{ searchFormatted: true }} 以防 ToolkitProvider 组件中有它（使用 'search' 就足够了）。这里有一个如何使用它的示例：

const columns = [
  {
    dataField: 'Name',
    text: 'Company name',
    formatter: (cell, row) => {
      return(
        <>
          { row.Name } <br/>
          <i>({ row.CategoryName })</i>
        </>
      )
    },
    filterValue: (cell, row) => {
      return `${row.Name} ${row.CategoryName}`;
    }
  },
  { dataField: 'Contact', text: 'Contact' },
  {
    dataField: 'Address',
    text: 'Address',
    formatter: (cell, row) => {
      const address = `
        ${row.Line1 || ''}
        ${row.Line2 || ''}
        `.trim();
      
      const location = `
        ${row.City || ''}
        ${row.State || ''}
        ${row.Zipcode || ''}
      `
      return address || location ? <div>{address} <br/> {location} </div> : null;
    },
    filterValue: (cell, row) => {
      return `${row.Line1} ${row.Line2} ${row.City} ${row.State} ${row.Zipcode}`.toLowerCase();
    }
  }
]