Last active
October 28, 2016 07:00
-
-
Save AllenFang/e6440666329ac5b27a60 to your computer and use it in GitHub Desktop.
programmatically select row on react-bootstrap-table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var React = require('react'); | |
var ReactBsTable = require('react-bootstrap-table'); | |
var BootstrapTable = ReactBsTable.BootstrapTable; | |
var TableHeaderColumn = ReactBsTable.TableHeaderColumn; | |
var DemoApp = React.createClass({ | |
getInitialState: function () { | |
/* | |
segments is a simple data for table | |
selected is mean that selected row on table. default is empty | |
*/ | |
return { | |
segments:this.props.data, | |
selected: [] | |
}; | |
}, | |
selectFirstRow: function(e){ | |
this.setState({ | |
selected: [this.props.data[0].unitId] | |
}); | |
}, | |
unselectAllRow: function(e){ | |
this.setState({ | |
selected: [] | |
}); | |
}, | |
render: function () { | |
var selectRowProp = { | |
mode: "checkbox", | |
clickToSelect: true, | |
selected: this.state.selected //give a default selected row. | |
}; | |
/* | |
Render the DemoTable and push down the data and selected to it. | |
*/ | |
return ( | |
<div> | |
<div> | |
<button onClick={this.selectFirstRow}>Dynamic select first row</button> | |
<button onClick={this.unselectAllRow}>Dynamic unselect all row</button> | |
</div> | |
<div> | |
<BootstrapTable pagination={true} selectRow={selectRowProp} search={true} data={this.state.segments} hover={true}> | |
<TableHeaderColumn isKey={true} dataField="unitId" dataSort={true}>ID</TableHeaderColumn> | |
<TableHeaderColumn dataField="unitName" dataSort={true}>Name</TableHeaderColumn> | |
<TableHeaderColumn dataField="schemaId" dataSort={true}>Scheme</TableHeaderColumn> | |
</BootstrapTable> | |
</div> | |
</div> | |
); | |
} | |
}); | |
module.exports = DemoApp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @AllenFang,
I want to use react-bootstrap-table for the below listed image.
How ever i have concern regarding few things.
Please refer the image below.