React-table: Add Array of Objects to Cell

[shezankazi]

Is it possible to add an array of objects to a cell?

Currently I have
columns = [
           {
               header: 'Tags',
               accessor: 'tag'
           }
]

where tag is an array of objects:

[
    {id: 1, tag: "JS"},
    {id: 2, tag: "React"}
]

I can display the first item from tags with:
accessor: 'tag[0].tag'

But how do I list all of them separated with commas?

[aaronschwartz]

You accessor will stay as accessor: 'tag'.
You will use the render method of the column to take your tag array and display it how you want.

http://codepen.io/anon/pen/MmJzrz?editors=0010

[shezankazi]

Thank you very much Aaron! I had not seen the render function. Sorry for that.

[shezankazi]

What I did not notice at first, is that this does not work with my custom filter:
filterMethod: (filter, row) => (row[filter.id].toLowerCase().includes(filter.value.toLowerCase()))
Is there something I am missing?

[aaronschwartz]

You need to give some more information on what isn't working.
If you're trying to add that custom filter to a column that has an array as a value, row[filter.id] is going to be an array. You can't call toLowerCase() on an array.

[shezankazi]

Hi Aaron, thanks a lot. I was not aware, that is was an array. Since I am using .join(',') on my render function I thought I was creating a string. Also, my console log says it is a string. However, I now realize it is row.tag actually returns an array. Thus I need used this:

filterMethod: (filter, row) => {
    for (var i=0; i<row.business_sector.length; 
        row.business_sector[i].business_sector.toLowerCase().includes(filter.value.
    }
}

This however does not return true..

[aaronschwartz]

row always contains the raw data value that you pass in since render could theoretically render whatever it wants including JSX tags.

Your filter method isn't returning anything. You need to return true if you find a match.

filterMethod: (filter, row) => {
    for (var i=0; i<row.business_sector.length; 
        if(row.business_sector[i].business_sector.toLowerCase().includes(filter.value)) {
          return true;
        }
    }
    return false;
}

Which could also be written:

filterMethod: (filter, row) => {
  return row.business_sector.some(x=>x.toLowerCase().includes(filter.value));
}

[shezankazi]

Thanks again Aaron! I had tried the boolean but set it outside the loop. Now it works :-)

[Bagpuss]

You will use the render method of the column to take your tag array and display it how you want.

It should be mentioned that the render method has now been deprecated and has been replaced with the Cell method. Maybe this will save someone else 5 minutes :)