AllenFang / AllenFang/react-bootstrap-table

Search with filterValue on array of objects(complex data)

Open
#1,833 5 comments 0 reactions 0 assignees View on GitHub
question react-bootstrap-table2
Dominant language
JavaScript
Stars
2.2k
Forks
761
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.