Tabulator js: properly show nested arrays as coulmns which could be searchable

I have a json data such as below that I want to generate a table using tabulator js like picture1 below. I followed the documentation to implement nested data, so I changed the data to correct format and pass the other object of the nested arrays to _children property, but the picture 2 has been generated. (dataTree: true,dataTreeStartExpanded: true, passed as options)

[
  {
    id: 1,
    name: "john",
    phone_numbers: [
      {title: "cell", phone_number: "123-456-789"},
      {title: "home", phone_number: "987-654-321"},
      {title: "office", phone_number: "987-654-321"},
    ],
    locations: [
      {title: "home", code: 123, address: "us"},
      {title: "office", code: 321, address: "canada"},
    ]
  },
  {
    id: 2,
    name: "alex",
    phone_numbers: [
      {title: "cell", phone_number: "123-456-789"},
      {title: "home", phone_number: "987-654-321"},
    ],
    locations: [
      {title: "home", code: 123, address: "us"},
      {title: "office", code: 321, address: "canada"},
    ]
  },
]

picture1
picture2

I will be pleased if you you have any idea to generate this which the nested arrays could be treat as a normal column …