AllenFang

class DefaultCustomShowSelectButtonTable extends React.Component {

  handleShowSelectButtonClick = (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 ShowSelectedOnlyButton click event');
    onClick();
  }

  createCustomShowSelectButton = (onClick, showSelected) => {

AllenFang

class FullyCustomInsertButtonTable extends React.Component {

  createCustomDeleteButton = (onBtnClick) => {
    return (
      <button style={ { color: 'red' } } onClick={ onBtnClick }>Delete it!!!</button>
    );
  }

  render() {
    const options = {

AllenFang

class DefaultCustomDeleteButtonTable extends React.Component {

  handleDeleteButtonClick = (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 DeleteButton click event');
    onClick();
  }

  createCustomDeleteButton = (onClick) => {

AllenFang

class FullyCustomInsertButtonTable extends React.Component {

  createCustomInsertButton = (openModal) => {
    return (
      <button style={ { color: 'red' } } onClick={ openModal }>Add rows</button>
    );
  }

  render() {
    const options = {

AllenFang

class DefaultCustomInsertButtonTable extends React.Component {

  handleInsertButtonClick = (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 InserButton click event');
    onClick();
  }

  createCustomInsertButton = (onClick) => {

AllenFang

class CustomInsertModal extends React.Component {

  handleSaveBtnClick = () => {
    const { columns, onSave } = this.props;
    const newRow = {};
    columns.forEach((column, i) => {
      newRow[column.field] = this.refs[column.field].value;
    }, this);
    // You should call onSave function and give the new row
    onSave(newRow);

AllenFang

class MyCustomBody extends React.Component {

  getFieldValue() {
    const newRow = {};
    this.props.columns.forEach((column, i) => {
      newRow[column.field] = this.refs[column.field].value;
    }, this);
    return newRow;
  }

AllenFang

class DefaultCustomInsertModalFooterTable extends React.Component {

  createCustomModalFooter = (onClose, onSave) => {
    const style = {
      backgroundColor: '#ffffff'
    };
    return (
      <div className='modal-footer' style={ style }>
        <h3>Its a Custom footer</h3>
        <button className='btn btn-xs btn-info' onClick={ onClose }>Leave</button>

AllenFang

class DefaultCustomInsertModalFooterTable extends React.Component {

  beforeClose(e) {
    alert(`[Custom Event]: Modal close event triggered!`);
  }

  beforeSave(e) {
    alert(`[Custom Event]: Modal save event triggered!`);
  }

AllenFang

class FullyCustomInsertModalHeaderTable extends React.Component {

  createCustomModalHeader(onClose, onSave) {
    const headerStyle = {
      fontWeight: 'bold',
      fontSize: 'large',
      textAlign: 'center',
      backgroundColor: '#eeeeee'
    };
    return (