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>
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>
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>";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.