React-virtualized: dataKey should allow for nested properties...

Created on 14 Feb 2019  路  5Comments  路  Source: bvaughn/react-virtualized

We have a scenario where our row data is an object with nested properties, like so:

{
  "name": 'bob',
  "metaData": {
     "foo": 'x',
     "bar": {
        // ... more data ...
      },
     "baz": {
       "blah": false
     }
  }
}

In my table I want to display columns of information for all the data in my object, not just the top-level... also, because dataKey is used to uniquely identify a column to an object property, and because it does not allow nesting, I have to flatten my object and assign a different dataKey for every column...

It would be helpful if instead, I could provide a nested dataKey value and have react-virtualized parse my object accordingly...

Example:

<Column dataKey='name' ... />
<Column dataKey='metaData.foo' ... />
<Column dataKey='metaData.bar' ... />
<Column dataKey='metaData.baz.blah' ... />

Most helpful comment

Another option can be:
<Column label="Eye color" dataKey="someid" cellDataGetter={({rowData})=>rowData.nested.eyeColor} />

All 5 comments

Just started implementing the table in our application and also ran into this. What is the best way to access the nested value? Flatten the object and then display in the table?

@AlexAichinger What we ended up doing is passing in a dataKey that does not map to anything specific, but is unique, and then using a switch statement in our renderer with the dataKey to determine which rowData property value to use... its not great, but it works...

Another option can be:
<Column label="Eye color" dataKey="someid" cellDataGetter={({rowData})=>rowData.nested.eyeColor} />

Definitely, that would be awesome!

Another option can be:
<Column label="Eye color" dataKey="someid" cellDataGetter={({rowData})=>rowData.nested.eyeColor} />

I thought this was a recommendation for a future API, but this is live in master.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rodcorsi picture rodcorsi  路  3Comments

SBoudrias picture SBoudrias  路  3Comments

miraage picture miraage  路  4Comments

zllc picture zllc  路  3Comments

iChip picture iChip  路  3Comments