How to map array of objects to ej2 syncfusion data grid

Question

I want to map my array of object, into ej2 syncfusion react data grid, but my array of object a little complicated.

This is my sample array.

[
{
    "id_team": "1",,
    "nama_team": "Testing",
    "adviser": "Dummy"
    "penyebab": [
        {
            "id_penyebab": "01.55",
            "nama_penyebab": "Testing 1"
        },
        {
            "id_penyebab": "01.57",
            "nama_penyebab": "Testing 2"
        },
        {
            "id_penyebab": "01.59",
            "nama_penyebab": "Testing 3"
        }
    ],
    "kontrol" : [
        {
            "id_kontrol" : "01.444",
            "nama_kontrol" : "Tested 1",
            "lvl_kontrol" : "Kuat"
        },
        {
            "id_kontrol" : "01.445",
            "nama_kontrol" : "Tested 2",
            "lvl_kontrol" : "Lemah"
        },
        {
            "id_kontrol" : "01.446",
            "nama_kontrol" : "Tested 3",
            "lvl_kontrol" : "Lemah"
        }
    ]
}
]

and I want my table look like this in ej2 syncfusion data grid (react)

table image:

Answer 1

not sure if it would work as object.property or object["property"]

array.map(object => (
    <p>{object["id_team"]}</p>
    ......
    {object["penyebab"].map(penyObj => (
       <p>{penyObj["id_penyebab"]} - {penyObj["nama_penyebab"]}</p>
    )
    {object["kontrol"].map(idKontrol => (
       <p>{idKontrol["id_kontrol"]}</p>
    )
    {object["kontrol"].map(namaKontrol => (
       <p>{namKontrol["nama_kontrol"]}</p>
    )
    {object["kontrol"].map(lvlKontrol => (
       <p>{lvlKontrol["lvl_kontrol"]}</p>
    )
))

its up to you to display it correctly in a grid/flex

Answer 2

By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values, and it does not supports array type value. Refer to the below documentation.

columnType: https://ej2.syncfusion.com/documentation/api/grid/columnType/

We can show an array of values in the Grid column using columnTemplate/valueAccessor features. But, this is used only for display purposes. We cannot perform any Grid actions like Filtering, Sorting, column-spanning, Searching, Grouping, etc., on the array type column. This is the behavior of EJ2 Grid.

Is your requirement to show the array of values on penyebab and control columns only for display purposes? Or, are you want to perform any data actions like Sorting, Filtering, Searching, Grouping, etc., on these columns(penyebab and control)?

Regards, Rajapandi