react-bootstrap-table Suche auf verschachtelten Feldern

Question

Hallo Ich benutze das react-bootstrap-table-Modul, um einige Daten auf meiner Seite anzuzeigen, und ich möchte die Suchfunktion verwenden, um die Ergebnisse nach bestimmten Spalten zu filtern. Hier ist ein Ausschnitt meiner Render-Funktion:

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

Das Betriebssystem und Batteriezustand Felder verschachtelt sind Werte wie in:

(Beispieldaten)

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

Ich verwende das dataformat Attribut das zeigen, Info brauche ich in diesen Spalten. Ich möchte auch in der Lage sein, Suchen durch die folgenden Spalten zu machen: Modell, os & Batteriezustand. Alles funktioniert gut, wenn ich nach Modell suche, aber wenn ich versuche, nach den verschachtelten Feldern zu filtern, liefert es keine Ergebnisse. Kann mir jemand helfen? Vielen Dank!

Answer 1

Ich konnte es tun, indem ich jeder Spalte ein FilterValue-Attribut hinzufügte und die gleiche Funktion wie für das dataFormat übergab.

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

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