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>
)

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 ;)

• javascript
• reactjs
• react-bootstrap-table

• You specified key as application, but your code is using applications? Either that, or give us more meaningful code. – Yuya Commented Jun 17, 2016 at 14:29
• Yes sorry typo. Fixing. I've found a solution, I'll post it in minutes. Thank you ;) – Vincent Commented Jun 17, 2016 at 15:00

3 Answers 3

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./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>
)

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 ponent 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>
);

}

I have done something like this with https://github./AllenFang/react-bootstrap-table/:

To go furthher into nested fields, i'm passing string and then returning the key/value pair.

const nestedFields = (data, row, field) => {
  let nested_field = field.split(',');
  return data[nested_field[0]][nested_field[1]];
}

<TableHeaderColumn row='1' dataField="torque_sensor" formatExtraData="top_hits,process" dataFormat={nestedFields} dataSort>Process</TableHeaderColumn>