Unable to access nested fields in react-bootstrap-table

Question

The Mongo database could return an array with nested data. I'd like to display the data contained in: {applications: {data: {description: 'My description}}}

But it doesn't work at all. Do you have an idea about how to do, I found nothing in doc nor in SO.

const Applications = (props) => (
  <div className="applications">
    {props.applications.length === 0 ?
      <div>Aucune candidature</div>
      : <BootstrapTable data={props.applications} striped={true} hover={true}>
        <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn>
        <TableHeaderColumn dataField="data.description" dataSort={true}>description</TableHeaderColumn>
      </BootstrapTable>
    }
  </div>
)

Thank you for help ;)

Answer 1

After few minutes, I've found a solution: I had to use the custom dataFormatter as shown in this part of the documentation: https://github.com/AllenFang/react-bootstrap-table#quick-demo

Just pass the object in the cell, and then use the formatter to extract the data you need

So, here is my final code:

function showDescription(cell, row) {
  return cell.description;
}

const Applications = (props) => (
  <div className="applications">
    {props.applications.length === 0 ?
      <div>Aucune candidature</div>
      : <BootstrapTable data={props.applications} striped={true} hover={true}>
        <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn>
        <TableHeaderColumn dataField="data" dataSort={true} dataFormat={showDescription}>description</TableHeaderColumn>
      </BootstrapTable>
    }
  </div>
)

Answer 2

I had a similar use case, where I get a Address Object, which is a JSON, and I have to format that address into a human readable (general address) format and feed it to the cell. React Bootstrap Table has property called 'dataFormat' on the TableHeaderColumn component which takes a function (or String I am not sure about string) and formats data accordingly. And my sample code is as follows. (Might have some syntactical errors, I was not typing in IDE :#, Hope you can figure those out ;))

render: function () {
const addressFormatter = function (address) {
    return !address ? null : `<div>
                    <div><br>${address.contactName}</br></div>
                    <div><br>${address.address1}</br></div>
                    <div><br>${address.address2}</br></div>
                    <div><br>${address.city}, ${address.state} ${address.zip}. USA</br></div>
                 </div>`;
};

return (
    <div>
        <BootstrapTable data={this.state.districts}>
            <TableHeaderColumn dataField='name' isKey={true} dataAlign='center'
                               tdStyle={{whiteSpace: 'normal', verticalAlign: 'middle'}}>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='shippingAddress' dataAlign='left'
                               tdStyle={{whiteSpace: 'normal', lineHeight: '10px', verticalAlign: 'middle'}}
                               dataFormat={ addressFormatter }>Shipping Info</TableHeaderColumn>
            <TableHeaderColumn dataField='mailingAddress' dataAlign='left'
                               tdStyle={{whiteSpace: 'normal', lineHeight: '10px', verticalAlign: 'middle'}}
                               dataFormat={ addressFormatter }>Mailing Info</TableHeaderColumn>
        </BootstrapTable>
    </div>
);

}