2

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

Abhiram
  • 1,540
  • 1
  • 11
  • 25

1 Answers1

4

Just adding dataFormat into your column will solve your problem. 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>
Asocia
  • 5,935
  • 2
  • 21
  • 46
Abhiram
  • 1,540
  • 1
  • 11
  • 25
  • Hi abhiram, i'm unable to do this.can you please help? here's my code https://github.com/thomas023/React/blob/master/react-bootstrap-table2-%20App.js – Thomas Martin Aug 05 '20 at 06:53
  • i want to make the entries in a column as links(hrefs) and i'm using the react bootstrap-table-2. I already posted a question but no one answered https://stackoverflow.com/questions/63224741/how-to-make-a-column-data-clickable-one-in-react-table – Thomas Martin Aug 05 '20 at 07:05