AllenFang

class CustomButtonGroup extends React.Component {

  createCustomButtonGroup = props => {
    return (
      <ButtonGroup className='my-custom-class' sizeClass='btn-group-md'>
        { props.showSelectedOnlyBtn }
        { props.exportCSVBtn }
        { props.insertBtn }
        { props.deleteBtn }
        <button type='button'

AllenFang

class MySearchPanel extends React.Component {

  cleanBtnClick = () => {
    this.refs.seachInput.value = '';
    this.props.search('');
  }

  seachBanana = () => {
    this.refs.seachInput.value = 'banana';

AllenFang

class MySearchPanel extends React.Component {
  render() {
    return (
      <div>
        <div className='input-group'>
          <span className='input-group-btn'>
            <button
              className='btn btn-primary'
              type='button'>
              CustomButton1

AllenFang

class MySearchField extends React.Component {
  // It's necessary to implement getValue
  getValue() {
    return ReactDOM.findDOMNode(this).value;
  }

  // It's necessary to implement setValue
  setValue(value) {
    ReactDOM.findDOMNode(this).value = value;
  }

AllenFang

class DefaultCustomSearchFieldTable extends React.Component {

  createCustomSearchField = (props) => {
    return (
      <SearchField
        className='my-custom-class'
        defaultValue={ props.defaultSearch }
        placeholder={ props.searchPlaceholder }/>
    );
  }

AllenFang

class FullyCustomClearButtonTable extends React.Component {

  createCustomClearButton = (onClick) => {
    return (
      <button className='btn btn-warning' onClick={ onClick }>Clean</button>
    );
  }

  render() {
    const options = {

AllenFang

class DefaultCustomClearButtonTable extends React.Component {

  handleClearButtonClick = (onClick) => {
    // Custom your onClick event here,
    // it's not necessary to implement this function if you have no any process before onClick
    console.log('This is my custom function for ClearSearchButton click event');
    onClick();
  }

AllenFang

class FullyCustomInsertButtonTable extends React.Component {

  createCustomExportCSVButton = (onClick) => {
    return (
      <button style={ { color: 'red' } } onClick={ onClick }>Custom Export CSV Btn</button>
    );
  }

  render() {
    const options = {

AllenFang

class DefaultCustomExportButtonTable extends React.Component {

  handleExportCSVButtonClick = (onClick) => {
    // Custom your onClick event here,
    // it's not necessary to implement this function if you have no any process before onClick
    console.log('This is my custom function for ExportCSVButton click event');
    onClick();
  }

  createCustomExportCSVButton = (onClick) => {

AllenFang

class FullyCustomShowSelectButtonTable extends React.Component {

  createCustomShowSelectButton = (onClick, showSelected) => {
    return (
      <button style={ { color: 'red' } } onClick={ onClick }>
        { showSelected ? 'Select Only' : 'All' }
      </button>
    );
  }