How to display a column data in a react_table when the column data is array of object?

divein 0
Viewed 56

I am using s react table to to display a table of data In tags column I want display both the tags present in tags array of object like this. I did tried some ways but didn't get any success as of yet. New to tables, so any better way to do this will be appreciated.

code-sandbox link : CodeSandBox

[
 {
"id": 1,
"first_name": "Torie",
"last_name": "Rustman",
"email": "trustman0@amazon.co.uk",
"date_of_birth": "1979-11-16T23:04:32Z",
"age": 45,
"tags": null,
"phone": "6844103517"
 },
 {
   "id": 2,
   "first_name": "Kordula",
   "last_name": "Gecks",
   "email": "kgecks1@deviantart.com",
   "date_of_birth": "1997-08-06T21:07:34Z",
    "age": 30,
    "tags": null,
   "phone": "8429683893"
  },
 {
   "id": 3,
   "first_name": "Vikki",
   "last_name": "Simoens",
    "email": "vsimoens2@ted.com",
    "date_of_birth": "2016-04-28T16:59:19Z",
    "age": 48,
    "tags": [
     { "id": 0, "name": "tag1" },
     { "id": 1, "name": "tag2" }
    ],
    "phone": "8672773997"
  },
 {
   "id": 4,
   "first_name": "Burnaby",
   "last_name": "Cowern",
   "email": "bcowern3@forbes.com",
   "date_of_birth": "2017-10-25T08:05:50Z",
   "age": 54,
   "tags": [
      { "id": 0, "name": "tag3" },
      { "id": 1, "name": "tag4" }
   ],
     "phone": "4257971694"
  },
 {
    "id": 5,
    "first_name": "Teddie",
     "last_name": "Traice",
    "email": "ttraice4@zdnet.com",
    "date_of_birth": "2015-04-20T11:45:34Z",
    "age": 57,
    "tags": [
       { "id": 0, "name": "tag5" },
       { "id": 1, "name": "tag6" }
    ],
     "phone": "3932158370"
  },

 {
  "id": 7,
  "first_name": "Shayna",
  "last_name": "Dimitresco",
  "email": "sdimitresco6@uiuc.edu",
  "date_of_birth": "1997-10-28T11:25:07Z",
  "age": 21,
  "tags": null,
  "phone": "1216713219"
  }
 ]

enter image description here

reactjs typescript
1 Answers

You could define the cell display function when you are defining the columns like you are doing for the date field.

  {
    Header: "Tags",
    Footer: "Tags",
    accessor: "tags",
    // accessor: "tags[0].name"
    Cell: ({ value }) => {
      const values = value ? value.map((v) => v.name + ' ') : '';
      return values;
    }
  }

Forked sandbox here

Lala0
Related