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

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)?

Answer 2

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 3

Your array of objects can be mapped using the columns and dataSource attributes of the Syncfusion React Data Grid.

You must first specify the columns for the grid. With each object standing in for a column in the grid, you can define an array of column objects using the columns property. You must define columns for id_team, nama_team, advisor, penyebab, and kontrol.

// define the columns
const columns = [
  { field: 'id_team', headerText: 'ID Team' },
  { field: 'nama_team', headerText: 'Nama Team' },
  { field: 'adviser', headerText: 'Adviser' },
  { field: 'penyebab', headerText: 'Penyebab', cellTemplate: (rowData: any) => {
      return rowData.penyebab.map((penyebab: any) => penyebab.nama_penyebab).join(', ');
  }},
  { field: 'kontrol', headerText: 'Kontrol', cellTemplate: (rowData: any) => {
      return rowData.kontrol.map((kontrol: any) => kontrol.nama_kontrol).join(', ');
  }},
];

and render the grid as:

// render the grid
return (
  <Grid dataSource={dataSource} allowPaging={true} pageSettings={{ pageSize: 10 }}>
    <ColumnsDirective>
      {columns.map((column) => <ColumnDirective {...column} key={column.field} />)}
    </ColumnsDirective>
  </Grid>
);