dataField can't access subobject

I have an object which is like that

{
  "person_id": 1,
    "username": "UserTest",
    "created_at": "2015-09-10T21:13:56.000Z",
    "updated_at": "2015-09-10T21:13:56.000Z",
    "deleted_at": null,
    "Person": {
          "id": 1,
          "firstname": "UserTest",
          "lastname": "Obama",
          "note": "DevOps",
          "email": "[e-mail]",
          "created_at": "2015-09-10T21:13:56.000Z",
          "updated_at": "2015-09-10T21:13:56.000Z",
          "deleted_at": null
    }
}

I can’t access the subojbect using

<TableHeaderColumn dataField="Person.firstname">Firstname</TableHeaderColumn>

Is there any workaround not specified in the doc ?

[AllenFang]

sorry guys, as I mention on README, I already decide to create react-bootstrap-table2, I trust it will be better than react-bootstrap-table. A good news is I’ll support the nested data in react-bootstrap-table2 start from v0.0.1, bad news is I will not support the nested data in react-bootstrap-table.

Feel free to let me know your idea and any idea/issues is welcome on react-bootstrap-table2

Sorry for inconvenience.

[ferrwan]

I’m using lodash’s _.get lib to achieve this.

import _ from 'lodash'

const renderCustom = (cell, row, extra) => {
    const value = _.get(row, extra.path)
    return <div>{value}</div>
}

const columns = [
    {path: 'Person.firstname', title: 'Firstname'},
    {path: 'Person.lastname', title: 'Lastname'},
    {path: 'this.is.a.long.path.of.an.object', title: 'Long Path'},
]

const tableColumn = _.map(columns, (column) => (
    <TableHeaderColumn
        dataField={column.path}
        dataFormat={renderCustom}
        formatExtraData={column}
    >{column.title}</TableHeaderColumn>
))