AllenFang

class ScrollTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } height='120' scrollTop={ 'Bottom' }> <!-- Available value is Top, Bottom or any number value -->
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

export default class ColumnAlignTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products }>
          <TableHeaderColumn dataField='id' isKey={ true } dataAlign='center'>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name' headerAlign='right'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price' headerAlign='center' dataAlign='right'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }

AllenFang

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

AllenFang

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

AllenFang

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

AllenFang

let order = 'desc';
class SortTable extends React.Component {

  handleBtnClick = () => {
    if (order === 'desc') {
      this.refs.table.handleSort('asc', 'name');
      order = 'asc';
    } else {
      this.refs.table.handleSort('desc', 'name');
      order = 'desc';

AllenFang

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

    this.options = {
      defaultSortName: 'name',  // default sort column name
      defaultSortOrder: 'desc'  // default sort order
    };
  }

AllenFang

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

    this.state = {
      sortName: undefined,
      sortOrder: undefined
    };
    this.onSortChange = this.onSortChange.bind(this);
  }

AllenFang

function revertSortFunc(a, b, order) {   // order is desc or asc
  if (order === 'desc') {
    return a.price - b.price;
  } else {
    return b.price - a.price;
  }
}

class CustomSortTable extends React.Component {
  render() {

AllenFang

const qualityType = {
  0: 'good',
  1: 'bad',
  2: 'unknown'
};

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}