如何动态地将href添加到react-bootstrap-table列？

Question

I'm using react-bootstrap-table for datatable in react, Here am getting c=data from the backend as JSON object. How to add ahref to a column in react-bootstrap-table dynamically

 const data = [ { id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending' }, { id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active' } ] <BootstrapTable data={this.data} version="4" striped hover pagination search options={this.options}> <TableHeaderColumn dataField="name" dataSort>Name</TableHeaderColumn> <TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn> <TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn> <TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn> </BootstrapTable>

when user click on name column it should redirect to user/:id, so I want to add ahref to name column dynamically . can any help in adding href to react-bootstrap-table

Answer 1

after 2 hours of my research, just adding dataFormat into your column solved my solution. Here Cell has the column data and Row has total row data.

CellFormatter(cell, row) {
    return (<div><a href={cell+"/"+row.age}>{cell}</a></div>);
  }

 <BootstrapTable data={this.table} version="4" striped hover pagination search options={this.options}>
                  <TableHeaderColumn dataField="name"  dataFormat={this.CellFormatter}   dataSort>Name</TableHeaderColumn>
                  <TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn>
                  <TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn>
                  <TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn>
                </BootstrapTable>