AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.24k stars 783 forks source link

How to add url link column dynamically #2050

Closed abhiram5 closed 5 years ago

abhiram5 commented 5 years ago

Data is coming from the backend in the form js object

rows: [ { 'name': 'Wing', 'email': 'tellus.eu.augue@arcu.com', 'regDate': '2016-01-09T14:48:34-08:00', 'city': 'Paglieta', 'age': 25 }, { 'name': 'Whitney', 'email': 'sed.dictum@Donec.org', 'regDate': '2017-01-23T20:09:52-08:00', 'city': 'Bear', 'age': 32 } ]

          <TableHeaderColumn dataField="name"   {  here i need href=".../edit/name"  dynamically }     dataSort>Name</TableHeaderColumn>
          <TableHeaderColumn isKey dataField="email">Email</TableHeaderColumn>
          <TableHeaderColumn dataField="age" dataSort>Age</TableHeaderColumn>
          <TableHeaderColumn dataField="city" dataSort>City</TableHeaderColumn>
xidedix commented 5 years ago

@abhiram5 use dataFormat prop for TableHeaderColumn

<TableHeaderColumn dataField="name" dataFormat={this.nameFormat} >Name</TableHeaderColumn>

and method

...
import { Link } from 'react-router-dom'
...
class ... {
 ...
 nameFormat(cell, row) {
    const id = `/edit/${row.name}`
      return (
      <Link to={id}> {cell} </Link>
    );
  }
...
};