AllenFang

const selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true  // enable click to select
};

class ClickToSelectTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } selectRow={ selectRowProp }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>

AllenFang

const selectRowProp = {
  mode: 'checkbox',
  selected: [ 0, 2, 4 ]  // give a array which contain the row key you want to select.
};

class DefaultSelectTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } selectRow={ selectRowProp }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>

AllenFang

const selectRowProp = {
  mode: 'checkbox',
  bgColor: 'pink'
};

class SelectBgColorTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } selectRow={ selectRowProp }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>

AllenFang

function onRowSelect(row, isSelected, e) {
  let rowStr = '';
  for (const prop in row) {
    rowStr += prop + ': "' + row[prop] + '"';
  }
  console.log(e);
  alert(`is selected: ${isSelected}, ${rowStr}`);
}

function onSelectAll(isSelected, rows) {

AllenFang

const selectRowProp = {
  mode: 'checkbox',
  bgColor: 'pink', // you should give a bgcolor, otherwise, you can't regonize which row has been selected
  hideSelectColumn: true,  // enable hide selection column.
  clickToSelect: true  // you should enable clickToSelect, otherwise, you can't select column.
};

class HideSelectionColumnTable extends React.Component {
  render() {
    return (

AllenFang

function onRowSelect(row, isSelected, e) {
  if (isSelected && row.id >= 3) {
    alert('The selection only work on key which less than 3');
    return false;
  }
}

function onSelectAll(isSelected, rows) {
  if (isSelected) {
    alert('The selection only work on key which less than 3');

AllenFang

const options = {
  onRowClick: function(row) {
    alert(`You click row id: ${row.id}`);
  },
  onRowDoubleClick: function(row) {
    alert(`You double click row id: ${row.id}`);
  }
};

class RowClickTable extends React.Component {

AllenFang

const selectRowProp = {
  mode: 'checkbox',
  showOnlySelected: true
};

class ShowOnlySelectTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } selectRow={ selectRowProp }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>

AllenFang

class ExternallyManagedSelection extends React.Component {
  constructor(props) {
    super(props);
    this.onSelectAll = this.onSelectAll.bind(this);
    this.onRowSelect = this.onRowSelect.bind(this);
    this.state = {
      selected: [],
      currPage: 1
    };
  }

AllenFang

require('../../customMultiSelect.css');

class Checkbox extends React.Component {
  componentDidMount() { this.update(this.props.checked); }
  componentWillReceiveProps(props) { this.update(props.checked); }
  update(checked) {
    ReactDOM.findDOMNode(this).indeterminate = checked === 'indeterminate';
  }
  render() {
    return (