У меня проблема с поиском в массиве объектов в реагирующей загрузочной таблице, проблема в том, что filterValue просто работает с последним столбцом.
Данные, которые у меня есть:
"customers": [
{
"name": "customer name",
"email": "cname@email.com",
"address": [
{
"country": "cCountry1",
"city": "cCity1"
}
]
}
]
Я делаю dataField='address'
в обоих полях, а затем форматирую каждое поле, используя dataFormat
.
showCountry(cell) {
if (cell.length > 0) {
return cell[0].country
}
return null
}
filterCountry(cell) {
if ( cell.length > 0 ) {
return cell[0].country
}
return null
}
render() {
return (
<BootstrapTable data={data.businessAccount.customers} selectRow={ selectRowProp } options= { options } hover pagination search >
<TableHeaderColumn isKey dataField='id' hidden>ID</TableHeaderColumn>
<TableHeaderColumn width={this.state.cellSize} dataField='name'>Name</TableHeaderColumn>
<TableHeaderColumn width={this.state.cellSize} dataField='email'>Email</TableHeaderColumn>
<TableHeaderColumn width={this.state.cellSize} dataField='phone' dataAlign="center">Phone</TableHeaderColumn>
<TableHeaderColumn width={this.state.cellSize} dataField='address' dataFormat={this.showCountry} filterValue={this.filterCountry} dataAlign="center">Country</TableHeaderColumn>
<TableHeaderColumn width={this.state.cellSize} dataField='address' dataFormat={this.showCity} filterValue={this.filterCity} dataAlign="center">City</TableHeaderColumn>
<TableHeaderColumn width={this.state.cellSize} dataField='status' dataFormat={this.formatStatus} dataAlign="center">Status</TableHeaderColumn>
</BootstrapTable>
)}
Полагаю, проблема в том, что filterValue
, кажется, видит второе поле, потому что оно использует тот же самый DataField, что и страна, поскольку оно продолжает фильтровать address.city
, даже когда я удалил filterValue
из него!
Я также пытался filterFormatted
, но у него та же проблема.
Любая помощь о том, как я могу решить эту проблему, передавая точное поле без использования dataFormat
? или, может быть, другой способ фильтрации.