How to add a button inside every row under a particular column in Bootstrap React Table?

问题

I have a React Bootstrap table(http://allenfang.github.io/react-bootstrap-table/index.html) which will get populated from data coming in from an API. I want to add a button to one of the columns and then perform operations on it. For example, once the button is clicked in a particular row, I need to extract data from the particular row and then make an API call. How to the above using React Bootstrap table?

    return (
  <BootstrapTable
    condensed={true}
    data = { tableData } 
  //I use tableData to store information obtained from API

    headerStyle={ { 
      background: '#FFF',
    } }
    containerStyle={ { background: '#FFF' } }
    ref='table'
    >
      <TableHeaderColumn dataField='resourceId' isKey dataAlign='center' dataSort={ true }> ID </TableHeaderColumn>
      <TableHeaderColumn dataField='Name' dataAlign='center'> Name </TableHeaderColumn>
      <TableHeaderColumn dataField='support' dataAlign='center' dataSort={ true }> Support</TableHeaderColumn>
      <TableHeaderColumn dataField='status' dataAlign='center' dataSort={ true }> Status</TableHeaderColumn>


      <TableHeaderColumn 
        dataAlign='center'
        options={ 
      <button> Select </button>}
      >
      File Path
      </TableHeaderColumn>
//Insert button here and access onClick property and make relevant API calls

  </BootstrapTable>

回答1:

You can write a custom dataformatter:

class ActionFormatter extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me!</button>
    );
  }
}

function actionFormatter(cell, row) {
  return (
    <ActionFormatter onClick={()=>doAction(row)} />
  );
}

And in the column:

<TableHeaderColumn dataField='action' dataFormat={ actionFormatter }>Action</TableHeaderColumn>

回答2:

Select you columns either by class or you can use a query selector

var column = document.querySelectorAll("tableHeaderColumn");

Loop through them adding the button to each. Edit properties of button as you see fit.

for(var i = 0; i < column.length; i++){
 column[i].innerHTML += "<button></button>";
}

来源：https://stackoverflow.com/questions/46464713/how-to-add-a-button-inside-every-row-under-a-particular-column-in-bootstrap-reac

标签

javascript

reactjs

web

react-bootstrap-table