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
{
field: 'categories.0.description',
headerName: 'Category',
width: 200,
editable: true,
},