Best way to show a nested object inside a datagrid

[prakhargupta1]

I want to do this but in Toolpad. It has nested object and is easier to add in the table the pro-code way.

In Toolpad, I am expected to first transform the nested object to a basic object.
Retool also does it this way: https://community.retool.com/t/nested-json-to-table/8221

My question is: As nested objects are quite common in big data sets. Is transformation the best way to handle it? Or, like pro-code can we have table cell abstractions inside the Table row as well? It will remove the need to write unnecessary transformation code.

[bharatkashyap]

I want to do this

I can't seem to understand what the requirement is since it only seems to show this:

[prakhargupta1]

Please retry, missed saving it.

[bharatkashyap]

I would think that a transform on the query is the best way to accomplish this.

It will remove the need to write unnecessary transformation code

I think we could at some point even auto-suggest the transformation code instead of writing a lot more code to build UI to accomplish tasks that could be done via a single-line of transformation code.

[cherniavskii]

This might be too late, but I think it's still worth answering the question :)
Yes, data transformation is probably the simplest option.

There's one more way of dealing with nested data - you can use valueGetter:

const columns = [
  {
    field: "companyName",
    valueGetter: ({ row }) => row.data.company.name,
  }
]

If you want to also make the column editable - you will need to provide valueSetter:

const columns = [
  {
    field: "companyName",
    editable: true,
    valueGetter: ({ row }) => row.data.company.name,
    valueSetter: ({ row, value }) => {
  	  return {
  	    ...row,
  	    data: {
  	      ...row.data,
  	      company: {
  	        ...row.data.company,
  	        name: value,
  	      }
  	    }
	  }
    }
  }
]

Here's a demo using DataGrid with the data you provided: https://codesandbox.io/s/mui-datagrid-forked-7bgp5e?file=/src/App.js
In this demo, I have abstracted the valueGetter/valueSetter repetitive code to a nested helper function and used lodash to simplify things.

Hope this answers the question, let me know if there are any questions left :)

[Janpot]

Thanks, the main question here will be about how to define it in a low-code way. The solution will naturally use valueGetter under the hood.