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; |
Hi @AllenFang,
I want to use react-bootstrap-table for the below listed image.
How ever i have concern regarding few things.
- There is a video preview button in each row. How to handle that click ?
- When i select all i should get only the rows from that page. Not all the records.
- After selecting a particular item i will have save button replacing my rename button when click on that i need to save that row. how do i do that.
Please refer the image below.
Hi @AllenFang,
what do to ignore action select row with a column?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@ranjan653 You need to start with the React basics and look into CommonJS.