ネストされたフィールドの反応ブートストラップテーブル検索

Question

こんにちは私は反応ブートストラップテーブルモジュールを使用してページにデータを表示しており、検索機能を使用して特定の列で結果をフィルタリングしたいと考えています。ここに私のレンダリング機能の抜粋です：OSとバッテリ状態のフィールドがのように値が入れ子になっている

render() { 
    function showOSName(cell, row) { 
     return cell.name; 
    } 

    function showBatteryCondition(cell, row) { 
     return cell.condition; 
    } 

    var selectRowProp = { 
     mode: "checkbox", 
     bgColor: "rgb(204, 230, 255)" 
    }; 

    var tableOptions = { 
     sizePerPage: 5, 
     deleteText: "✗ Delete Selected", 
     paginationSize: 3, 
     clearSearch: true 
    }; 

    return (
     <BootstrapTable 
      data={this.state.data.systems} 
      striped={true} 
      hover={true} 
      pagination={true} 
      selectRow={selectRowProp} 
      deleteRow={true} 
      multiColumnSearch={true} 
      search={true} 
      ignoreSinglePage={true} 
      options={tableOptions} 
      > 
      <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" 
      dataSort={true} searchable={false}>ID</TableHeaderColumn> 
      <TableHeaderColumn dataField="model" dataAlign="center" 
      dataSort={true}>Model</TableHeaderColumn> 
      <TableHeaderColumn dataField="serialnumber" dataAlign="center" 
      searchable={false}>Serial Number</TableHeaderColumn> 
      <TableHeaderColumn dataField="os" dataAlign="center" dataSort={true} 
      dataFormat={showOSName}>OS</TableHeaderColumn> 
      <TableHeaderColumn dataField="battery" dataAlign="center" dataSort={true} 
      dataFormat={showBatteryCondition}>Battery Condition</TableHeaderColumn> 
     </BootstrapTable> 
    ) 
} 

：

（例えば、データ）

id:   "ABC123" 
model:  "modelName" 
serialnumber: "1223334444" 
os: { 
    name: "Linux" 
} 
battery: { 
    condition: "Good" 
} 

を私が示すことのdataFormat属性を使用します私はこれらの列に必要な情報。私はまた、次の列で検索できるようにしたい：モデル、os &バッテリーの状態。モデルで検索するとすべてうまく動作しますが、ネストされたフィールドでフィルタリングしようとするたびに結果は得られません。誰か助けてくれますか？ありがとうございました！

Answer 1

filterValue属性を各列に追加し、dataFormatで使用したのと同じ関数を渡すことで、これを実行できました。

function filterFunction(cell, row) { 
    // just return type for filtering or searching. 
    return cell.type; 
} 

// add this attribute to TableHeaderColumn: filterValue={ filterFunction }