Antd Table render properties inside and array of objects

Question

I have an Antd Table, with data coming from axios API

 "data": [
    {
        "id": 1,
        "name": "Package 1",
        "services": [
            {
                "id": 1,
                "name": "Evaluation Core",
            }
        ]
    },
    {
        "id": 2,
        "name": "Package 2",
        "services": [
            {
                "id": 1,
                "name": "Evaluation BizCore",
            },
            {
                "id": 2,
                "name": "Certification Fizz"
            }
        ]
    }
],
"meta": {
    "current_page": 1,
    "last_page": 1,
    "per_page": 20,
    "total": 2,
    "total_results": 2
}

} In this Table I'm rendering one column with the name of the Package, and the second column I need to render any name property inside the Services array. That columns has this dataindex:

dataIndex: ['services', 'name'],

If there is more then one property name, should be render separated with ",". I tried differents approaches,but nothing seems to work. Thanks!!

Answer 1

If I understand correctly you want to render a Services column where each package may have a different amount of services. Each service has a name and you want to display the name property of all services for package aggregated. e.g. Package has Service 1 and Service 2 and it should be displayed Service 1,Service 2.

The simple answer is to use render. The column for Services can look like.

  {
    title: "Services",
    dataIndex: "services",
    render: (services) => services.map(service => service.name).join(),
    key: "services"
  }

https://codesandbox.io/s/basic-antd-4-16-3-forked-q6ffo?file=/index.js

Please comment if this was not the intended result.