programmatically select row on react-bootstrap-table

DemoApp.js

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,
How to achieve "require" in
var React = require('react');
var ReactBsTable = require('react-bootstrap-table');

For this what library need to be import what will be the folder structure
I need your help......

@ranjan653 You need to start with the React basics and look into CommonJS.

Hi @AllenFang,
I want to use react-bootstrap-table for the below listed image.
How ever i have concern regarding few things.

1. There is a video preview button in each row. How to handle that click ?
2. When i select all i should get only the rows from that page. Not all the records.
3. 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?