AllenFang / AllenFang/react-bootstrap-table

Search with filterValue on array of objects(complex data)

Abierto
#1,833 5 comentarios 0 reacciones 0 asignados Ver en GitHub
question react-bootstrap-table2
Lenguaje dominante
JavaScript
Estrellas
2.2k
Forks
761
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

I've read a lot of closed issues in similar search and filtering data, but can't make mine to work. Sorry for long post, but I want to make this as clear as possible.

### ISSUE: When `searching`(main search on top), I'd like `filterValue` to be used on some columns. It does not work(at least in my case).

What's complex on my end is that I have this type of data:
```
{
"id" : "B001D8HP60",
"note" : "This is a note #1",
"links" : [
{
"url" : "https://google.com/v",
"urlNote" : "Url note",
"businessId" : "7563iTq9qhBtumv8q"
},
{
"url" : "https://google.com/v1",
"urlNote" : "Url note1",
"businessId" : "u5hxZ562NHnZj849k"
},
{
"url" : "https://google.com/v3",
"businessId" : "pgCdDSXCcLYWxkmrw"
}
]
}
```
Here's how I display it(love this project, btw):
![image](https://user-images.githubusercontent.com/3100599/34449092-5beda988-eca9-11e7-842f-feda0a6aab05.png)

**Searching works perfectly on simple data such as PID column.**(shown on screenshot).

However, **_it does NOT work_** on URLs and Business columns.

Here are some of the snippets of my code:
HTML:
```

ID
PID

URLs

Business

Actions

```
**NOTICE**, on 3rd and 4th `TableHeaderColumn` I had to make custom `dataField`. Initially I had the both equal to `links`, but my filtering did NOT work properly for both columns(only last `filterValue` would be used). So I used **custom names**.

JS:
```
filterUrlValue(cell, row) {
const links = row && row.links;
// option 1: returning the array value (commented out)
// return links && links.map(link => link.url);

// option 2: returning the single string to be searched on(array is separated by random chars: `:::`)
const urls = links && links.map(link => link.url);
return urls && urls.join(":::");
}

filterBusinessValue(cell, row) {
const links = row && row.links;
return links && links.map(link => {
const business = this.getBusiness(link.businessId);
return business && business.name;
});
}
```

.

### So, when I use filters on URLs or Business, it works AWESOME. But when I try to search for the same values in main search these do not work. Any help?

My guess is that it's related to custom `dataField` names that I use.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.