AllenFang

class CustomStyleNavTable extends React.Component {

  customStyle = (cell, row) => {
    return {
      backgroundColor: 'red'
    };
  }

  render() {
    const keyBoardNav = {

AllenFang

class RowSelectionNavTable extends React.Component {
  render() {
    const selectRow = {
      mode: 'checkbox'
    };
    return (
      <BootstrapTable data={ products } selectRow={ selectRow } keyBoardNav>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>

AllenFang

class PaginationNavTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } pagination keyBoardNav>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

class SimpleNavTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } keyBoardNav>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

class ComplexHeaderGroup extends React.Component {
  render() {
    const selectRow = {
      mode: 'checkbox',
      bgColor: 'rgb(238, 193, 213)'
    };

    const cellEdit = {
      mode: 'click',
      blurToSave: true

AllenFang

class SimpleHeaderGroupTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
        <TableHeaderColumn row='0' rowSpan='2' dataField='id' isKey>ID</TableHeaderColumn>
        <TableHeaderColumn row='0' colSpan='2'>Product</TableHeaderColumn>
        <TableHeaderColumn row='1' dataField='name'>Name</TableHeaderColumn>
        <TableHeaderColumn row='1' dataField='price'>Price</TableHeaderColumn>
      </BootstrapTable>
    );

AllenFang

class FullyCustomSizePerPageDropDown extends React.Component {
  constructor(props) {
    super(props);
  }

  renderSizePerPageDropDown = props => {
    return (
      <div className='btn-group'>
        {
          [ 10, 25, 30 ].map((n, idx) => {

AllenFang

// validator function pass the user input value and should return true|false.
function jobNameValidator(value) {
  const response = { isValid: true, notification: { type: 'success', msg: '', title: '' } };
  if (!value) {
    response.isValid = false;
    response.notification.type = 'error';
    response.notification.msg = 'Value must be inserted';
    response.notification.title = 'Requested Value';
  } else if (value.length < 10) {
    response.isValid = false;

AllenFang

class RemoteStoreAlternative extends React.Component {
  constructor(props) {
    super(props);
    this.products = getProducts();
    this.state = {
      data: this.products
    };
  }

  onCellEdit = (row, fieldName, value) => {

AllenFang

class EditColumnClassTable extends React.Component {
  render() {
    const cellEditProps = {
      mode: 'click'
    };
    return (
      <BootstrapTable data={ products } cellEdit={ cellEditProps }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price' editColumnClassName='class-for-editing-cell'>Product Price</TableHeaderColumn>