React-table: Nested data

[axhamre]

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",
      }
    }
]

[gary-menzel]

Please check the documentation on accessor and the samples. This is all available there. Otherwise, it is best to ask this in the #react-table Slack channel (badge in the doco).

Short answer, all possible with accessor and/or Cell.

[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.

[lakshajit]

Hi Gary,

I am using React Table and setting columns dynamically, by mapping first object of my response for column names and creating array of object like react table requires.

So, if I take @hundsim data example, and if we add parts info array object, how do I set accessor for it. I tried a lot. console showing values but, cant able to see data which comes in 3rd level nest.

Could you please help to understand it.

Thanks,
Ajit

[Royalza]

Hi Gary,

I am using React Table and setting columns dynamically, by mapping first object of my response for column names and creating array of object like react table requires.

So, if I take @hundsim data example, and if we add parts info array object, how do I set accessor for it. I tried a lot. console showing values but, cant able to see data which comes in 3rd level nest.

Could you please help to understand it.

Thanks,
Ajit

Hi.

I've managed to show 2nd level nested objects. 3rd level objects causes an error "object child components cannot be rendered". Did you manage to solve this?

[cristianounix]

Same problem react-table v7