Search code examples
reactjsaxioscrudmern

How can I access nested object and render it to datatable?

How can I render the user_id information under the product array? I'm trying to render the nested information of user_id such as the username

enter image description here

enter image description here

The DataGrid is working successfully since I render all non-nested information or non-populated info. But I'm also trying to show the information under user_id

{field: "user_id", headerName: "User Name", width: 250,}

this is the field I used, but it's not working since user_id is an object

Edit Sample

enter image description here

This is what I received

Datagrid.js

<div className="datatable">
  <DataGrid
    className="datagrid"
    rows={list}
    getRowId={(row) => row._id}
    columns={columns.concat(actionColumn)}
    pageSize={9}
    rowsPerPageOptions={[9]}
    checkboxSelection
  />
</div>
Solution

  • So you will have to use renderCell() => ReactElement property and return the nested object string. I've updated your code sandbox with the solution and it is now rendering the username correctly. Below is the code that I've modified in your code sandbox.

    {
      field: "user_id",
      headerName: "User Name",
      width: 250,
      renderCell: (params) => {
        return params.row.user_id.username;
      },
},

    Here is the link to documentation that you may want to go through.