React MUI v4 Datatable Show Object value in column

Hi,

I have an array of data that looks like this :

[
        {
            "id": 203,
            "category_id": 1,
            "title": "Minimize losses",
            "kpi_unit_of_measure": "KES",
            "updated_by": 9,
            "created_by": 9,
            "date_created": "2021-11-30T21:00:00.000+0000",
            "date_updated": "2021-12-09T21:00:00.000+0000",
            "user_id": 9,
            "account": "Expense",
            "variance": "red",
            "target": "-25",
            "actualYTD": "0",
            "plannedYTD": "1",
            "rootCause": null,
            "action": null,
            "supportRequired": null,
            "categories": {
                "id": 1,
                "description": "Financial"
            }
        },
        {
            "id": 174,
            "category_id": 3,
            "title": "Retain Talent",
            "kpi_unit_of_measure": "%>",
            "updated_by": 9,
            "created_by": 9,
            "date_created": "2021-11-25T21:00:00.000+0000",
            "date_updated": "2021-11-28T21:00:00.000+0000",
            "user_id": 9,
            "account": "Revenue",
            "variance": "blue",
            "target": "70",
            "actualYTD": null,
            "plannedYTD": null,
            "rootCause": "Team Building activities",
            "action": "N/A",
            "supportRequired": "None",
            "categories": {
                "id": 3,
                "description": "Talent and Culture"
            }
        }
    ]

I am trying to display the categories description which is part of an object with no success. This is how my table looks so far :

I have tried the following methods to display the description with no success. Any advise/ useful links will be appreciated. Thanks

My code :

const columns: GridColDef[] = [
    {
        field: 'description',
        headerName: 'Category',
        valueFormatter: (params) => (params.row?.categories?.description, console.log("im here", params)),
        width: 200,
        editable: true,
      },
    {
      field: 'title',
      headerName: 'Title',
      width: 300,
      editable: true,
    },
    {
      field: 'kpi_unit_of_measure',
      headerName: 'Unit Of Measure',
      width: 200,
      editable: true,
    },
    {
      field: 'account',
      headerName: 'Account',
      width: 200,
      sortable: false,
    },
    {
      field: 'plannedYTD',
      headerName: 'Planned YTD',
      width: 200,
      sortable: false,
    },
    {
      field: 'actualYTD',
      headerName: 'Actual YTD',
      width: 200,
      sortable: false,
    },
    {
      field: 'actions',
      headerName: 'Actions',
      width: 200,
      renderCell: (list) => {
        console.log("editing table", list.row)
        return ( <div><IconButton aria-label="edit" className={classes.textGreen} onClick={() => { handleEditClickOpen(); setEditing(list.row)}}><EditIcon /></IconButton>
        <IconButton aria-label="invert" color="primary" onClick={() => { handleInvert(list) }} ><CompareArrows /></IconButton>
        </div>)
      }

    }
  ];

<DataGrid
                rows={items}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                disableSelectionOnClick
                autoHeight={true}
            />

I also tried accessing the description like this :slight_smile:

{
            field: 'categories.0.description',
            headerName: 'Category',
            width: 200,
            editable: true,
          },

I decided to use react material-table instead

{
            field: 'categories.description',
            title: 'Category',
            valueFormatter: (params) => (params.row?.categories?.description, console.log("im here", params)),
            width: 200,
            editable: true,
        }

                  <MaterialTable
                        title="KPI  details."
                        data={items}
                        columns={columns}
                        pageSize={15}
                        rowsPerPageOptions={[15]}
                        options={{
                          search: true,
                          sorting: true
                        }}
                    />

Are you saying it’s working for you now with the new lib?

I’m not sure why the object access would be using a string. Without knowing anything about the lib I would assume it should be categories.description and not a string.