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

Question

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": "[email protected]",
"date_of_birth": "1979-11-16T23:04:32Z",
"age": 45,
"tags": null,
"phone": "6844103517"
 },
 {
   "id": 2,
   "first_name": "Kordula",
   "last_name": "Gecks",
   "email": "[email protected]",
   "date_of_birth": "1997-08-06T21:07:34Z",
    "age": 30,
    "tags": null,
   "phone": "8429683893"
  },
 {
   "id": 3,
   "first_name": "Vikki",
   "last_name": "Simoens",
    "email": "[email protected]",
    "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": "[email protected]",
   "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": "[email protected]",
    "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": "[email protected]",
  "date_of_birth": "1997-10-28T11:25:07Z",
  "age": 21,
  "tags": null,
  "phone": "1216713219"
  }
 ]

Lala · Accepted Answer · 2022-09-08 12:44:59Z

1

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

edited Sep 8, 2022 at 12:44

answered Sep 8, 2022 at 12:27

Lala

15410 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

divein Over a year ago

Awesome this did work, but in typescript this is giving me an error at 'Binding element 'value' implicitly has an 'any' type' any suggestion?

Lala Over a year ago

I didn't work with typescript, but I guess you have to declare the type in the function signature like ({value: Array<Tag>}) => .... or ({value: any}) => .. using the curly braces, you are basically destructuring the object you are receiving and only take the 'value' param. This might be of help

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related