Nested data

Can the data passed to ReactTable be nested?

If so, how would I set the car model in the below example to an accessor?

[
	{
	  "name":"John",
	  "age":30,
	  "car": {
	    "model":"Ford",
	    "color":"green",
	  }
	},
	{
	  "name":"Jane",
	  "age":34,
	  "car": {
	    "model":"Volvo",
	    "color":"blue",
	  }
	}
]

[Akiriki]

I spent some time looking for a code example for this, but I could not find any. The documentation for the accessor does not include calling properties of nested objects.

Since i am using typescript, the simple solution did not work for me:

    accessor: 'car.color'

Instead after some reasearch I found this solution :

    accessor: (originalRow) => {
                return originalRow.car.color;
            },

Hopefully that will save someone else some time 😉

[gary-menzel]

@hundsim I got your reply in a notification but it does not seem to be posted here…

In the above example of data you only need to provide an accessor like accessor: 'car.model' to display your data column by column (e.g. name, age, car.model, car.color) or you can use a Cell renderer to get the whole object out of the row and render it any way you like in that single cell.

You could also use a function for your accessor as well: accessor: row=>row.car.model.

I don’t think what you want to do is an “edge case” as you described in your response.

Search for accessor in the doco and there are examples there of all three styles (straight variable name, a dotted variable, and a function callback.