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

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

score 12 · Answer 1 · answered Jun 17 '16 at 15:05

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

score 1 · Answer 2 · answered Jul 22 '17 at 00:13

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

}

score 0 · Answer 3 · answered Mar 29 '19 at 11:34

I have done something like this with https://github.com/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>

could you explain this further? – AmandaConda Jul 30 '21 at 18:41 — AmandaConda, Jul 30 '21 at 18:41

Unable to access nested fields in react-bootstrap-table

3 Answers3