react-bootstrap-table

Customization

Available Customization Parts

In this document, we only focus on the components which can be customized, so we will not introduce how to add custom css or class even or table styling.

Cell

There are two simple way to custom your column

01. Use dataFormat and return a String

// with es6
function priceFormatter(cell, row) {
  return ` ${cell}`;
}
//...
<TableHeaderColumn dataField='price' dataFormat={priceFormatter}>Price</TableHeaderColumn>

02. Use dataFormat and return a JSX

// with es6
function priceFormatter(cell, row) {
  return (<div>....</div>);
}
//...
<TableHeaderColumn dataField='price' dataFormat={priceFormatter}>Price</TableHeaderColumn>

ToolBar

ToolBar is the area on the top of table, it contain the search panel, buttons for data manipulation. After v3.0.0, you can custom all the components in the ToolBar also itself too. In this section, only the ToolBar itself will be introduced.

Give a toolBar in options props and toolBar only accept a function and a JSX returned value is necessary

createCustomToolBar = props => {
  /**
   *  This function only pass one argument, is props object which has following properties
   *  
   *  {
   *    components: {  // here are all the components
   *      exportCSVBtn,  // export CSV button JSX
   *      insertBtn,  // insert button JSX
   *      deleteBtn,  // delete button JSX
   *      showSelectedOnlyBtn,  // show selected button JSX
   *      searchPanel,  // search panel JSX
   *      btnGroup,  // button groups JSX
   *      searchField,  // search field JSX
   *      clearBtn  // clear search field JSX
   *    },
   *    event: {  // here are all the related event you may use it
   *      openInsertModal,   // call it to open insert modal
   *      closeInsertModal,  // call it to close insert modal
   *      dropRow,   // call it to drop row
   *      showOnlyToogle,   // call it to toogle show only selections
   *      exportCSV,   // call it to export CSV file
   *      search  // call it with search text to search table
   *    }
   *  }
   *
   **/
  return (
    <div style={ { margin: '15px' } }>
      { props.components.btnGroup }
      <div className='col-xs-8 col-sm-4 col-md-4 col-lg-2'>
        { props.components.searchPanel }
      </div>
    </div>
  );
}
// ...
const options = {
  toolBar: this.createCustomToolBar
};
// ...
<BootstrapTable data={rows} options={options}>

ButtonGroup(Left Side)

Button group which contain the insert, drop, show only select and export CSV buttons, these button all grouped as btn-group class in bootstrap. This is a chance that you can custom this button group.

Give a btnGroup in options props and btnGroup only accept a function and a JSX returned value is necessary

createCustomButtonGroup = props => {
  /**
   *  This function only pass one argument, is props object has following properties
   *  {
   *    exportCSVBtn,  // export CSV button JSX
   *    insertBtn,  // insert button JSX
   *    deleteBtn,  // delete button JSX
   *    showSelectedOnlyBtn  // show selected button JSX
   *  }
   ***/
  return (
    ...
  );
}
// ...
const options = {
  btnGroup: this.createCustomButtonGroup
};
// ...
<BootstrapTable data={rows} options={options}>

Insert Button

It's available to custom insert button by configuring insertBtn in options props, insertBtn only accept a function and a JSX returned value is necessary. This function will take one argument: onClick. Following, we have two way to customize the insert button:

01. Use InsertButton by default

This is a simple and default way to custom this component. InsertButton is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • btnText
  • btnContextual
  • className
  • onClick
  • btnGlyphicon
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, InsertButton } from 'react-bootstrap-table';
// ...
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) => {
  return (
    <InsertButton
      btnText='CustomInsertText'
      btnContextual='btn-warning'
      className='my-custom-class'
      btnGlyphicon='glyphicon-edit'
      onClick={ () => this.handleInsertButtonClick(onClick) }/>
  );
}
//...
const options = {
  insertBtn: this.createCustomInsertButton
};
//...
<BootstrapTable data={rows} options={options} insertRow>

02. Customize by yourself

If you think InsertButton is not satisfied to your requirement, you can custom a new one as following 
createCustomInsertButton = (onClick) => {
  return (
    <button style={ { color: 'red' } } onClick={ onClick }>Add rows</button>
  );
}
//...
const options = {
  insertBtn: this.createCustomInsertButton
};
//...
<BootstrapTable data={rows} options={options} insertRow>

Drop Row Button

It's available to custom drop row button by configuring deleteBtn in options props, deleteBtn only accept a function and a JSX returned value is necessary. This function will take one argument: onClick. Following, we have two way to customize the delete row button:

01. Use DeleteButton by default

This is a simple and default way to custom this component. DeleteButton is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • btnText
  • btnContextual
  • className
  • onClick
  • btnGlyphicon
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, DeleteButton } from 'react-bootstrap-table';
// ...
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) => {
  return (
    <DeleteButton
      btnText='CustomDeleteText'
      btnContextual='btn-warning'
      className='my-custom-class'
      btnGlyphicon='glyphicon-edit'
      onClick={ () => this.handleDeleteButtonClick(onClick) }/>
  );
}
//...
const options = {
  deleteBtn: this.createCustomDeleteButton
};
//...
<BootstrapTable data={rows} options={options} deleteRow>

02. Customize by yourself

If you think DeleteButton is not satisfied to your requirement, you can custom a new one as following 
createCustomDeleteButton = (onClick) => {
  return (
    <button style={ { color: 'red' } } onClick={ onClick }>Delete rows</button>
  );
}
//...
const options = {
  deleteBtn: this.createCustomDeleteButton
};
//...
<BootstrapTable data={rows} options={options} deleteRow>

Export CSV Button

It's available to custom export csv button by configuring exportCSVBtn in options props, exportCSVBtn only accept a function and a JSX returned value is necessary. This function will take one argument: onClick. Following, we have two way to customize the export csv button:

01. Use ExportCSVButton by default

This is a simple and default way to custom this component. ExportCSVButton is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • btnText
  • btnContextual
  • className
  • onClick
  • btnGlyphicon
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, ExportCSVButton } from 'react-bootstrap-table';
// ...
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) => {
  return (
    <ExportCSVButton
      btnText='Down CSV'
      onClick={ () => this.handleExportCSVButtonClick(onClick) }/>
  );
}
//...
const options = {
  exportCSVBtn: this.createCustomExportCSVButton
};
//...
<BootstrapTable data={rows} options={options} exportCSV>

02. Customize by yourself

If you think ExportCSVButton is not satisfied to your requirement, you can custom a new one as following 
createCustomExportCSVButton = (onClick) => {
  return (
    <button style={ { color: 'red' } } onClick={ onClick }>Delete rows</button>
  );
}
//...
const options = {
  deleteBtn: this.createCustomExportCSVButton
};
//...
<BootstrapTable data={rows} options={options} exportCSV>

Select Only Toggle

It's available to custom select only toggle button by configuring showSelectedOnlyBtn in options props, showSelectedOnlyBtn only accept a function and a JSX returned value is necessary. This function will take two argument: onClick and showSelected. Following, we have two way to customize the select only toggle button:

01. Use ShowSelectedOnlyButton by default

This is a simple and default way to custom this component. ShowSelectedOnlyButton is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • showAllText
  • showOnlySelectText
  • btnContextual
  • onClick
  • className
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, ShowSelectedOnlyButton } from 'react-bootstrap-table';
// ...
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) => {
  return (
    <ExportCSVButton
      className='my-custom-class'
      onClick={ () => this.handleShowSelectButtonClick(onClick) }/>
  );
}
//...
const selectRow = {
  mode: 'radio',
  showOnlySelected: true
};
const options = {
  showSelectedOnlyBtn: this.createCustomShowSelectButton
};
//...
<BootstrapTable data={rows} options={options} selectRow={selectRow} exportCSV>

02. Customize by yourself

If you think ExportCSVButton is not satisfied to your requirement, you can custom a new one as following 
createCustomExportCSVButton = (onClick) => {
  return (
    <button style={ { color: 'red' } } onClick={ onClick }>Delete rows</button>
  );
}
//...
const options = {
  deleteBtn: this.createCustomExportCSVButton
};
//...
<BootstrapTable data={rows} options={options} exportCSV>

Search Panel

You can custom the whole search panel(right side) by searchPanel in options props. searchPanel only accept a function and a JSX returned value is necessary. This function will take one argument: props. and it have following properties you can use:
  • searchField
  • clearBtn
  • defaultValue
  • placeholder
  • clearBtnClick
  • search
 
renderCustomSearchPanel = props => {
  /**
   *  This function only pass one argument, is props object has following properties
   *  {
   *    searchField,  // the search input field JSX
   *    clearBtn,  // clear search button JSX
   *    defaultValue,  // the default value for searching
   *    placeholder,  // placeholder for search input field
   *    clearBtnClick,  // the callback for triggering clear button click event
   *    search  // the callback function for triggering search event, call it with a string text for searching
   *  }
   ***/
  return (
    ...
  );
}
// ...
const options = {
  searchPanel: this.renderCustomSearchPanel
};
// ...
<BootstrapTable data={rows} options={options} search>

Search Input Field

You can custom the search input field only by searchField in options props. searchField only accept a function and a JSX returned value is necessary. Following, we have two way to customize the search field:

01. Use SearchField by default

This is a simple and default way to custom this component. SearchField is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • className
  • defaultValue
  • placeholder
  • onKeyUp
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, SearchField } from 'react-bootstrap-table';
// ...
createCustomSearchField = (props) => {
  return (
    <SearchField
        className='my-custom-class'
        defaultValue='2000'
        placeholder='Input a number'/>
  );
}
//...
const options = {
  searchField: this.createCustomSearchField
};
//...
<BootstrapTable data={rows} options={options} search>

02. Customize by yourself

If you think SearchField is not satisfied to your requirement, you can custom a new one as following 
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;
  }

  render() {
    return (
      <input
        className={ `form-control` }
        type='text'
        defaultValue={ this.props.defaultValue }
        placeholder={ this.props.placeholder }
        onKeyUp={ this.props.search }/>
    );
  }
}
//...
const options = {
  searchField: (props) => (<MySearchField { ...props }/>)
};
//...
<BootstrapTable data={rows} options={options} search>

Clear Search Button

You can custom the clear button for search field by giving clearSearchBtn in options props. clearSearchBtn only accept a function and a JSX returned value is necessary. Following, we have two way to customize the clear search button:

01. Use ClearSearchButton by default

This is a simple and default way to custom this component. ClearSearchButton is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • btnContextual
  • className
  • btnText
  • onClick
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, ClearSearchButton } from 'react-bootstrap-table';
// ...
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();
}
createCustomClearButton = (onClick) => {
  return (
    <ClearSearchButton
      btnText='MyClear'
      btnContextual='btn-warning'
      className='my-custom-class'
      onClick={ e => this.handleClearButtonClick(onClick) }/>
  );
}
//...
const options = {
  clearSearch: true,
  clearSearchBtn: this.createCustomClearButton
};
//...
<BootstrapTable data={rows} options={options} search>

02. Customize by yourself

If you think ClearSearchButton is not satisfied to your requirement, you can custom a new one as following 
createCustomClearButton = (onClick) => {
  return (
    <button className='btn btn-warning' onClick={ onClick }>Clean</button>
  );
}
//...
const options = {
  clearSearch: true,
  clearSearchBtn: this.createCustomClearButton
};
//...
<BootstrapTable data={rows} options={options} search>

Insert Modal

You can custom all of hte insert modal or one part of the insert model, it depend on your requirement, but react-bootstrap-table all support it.

01. Custom whole insert modal

You can customize everything in the insert modal via options.insertModal and we give you the event callback, props and some informations: onModalClose, onSave, columns, validateState, ignoreEditable
You can follow this example to learn how to custom the insert modal.

Insert Modal Body

01. Custom the body of insert modal

You can customize the body of the insert modal via options.insertModalBody and we give you following arguments: columns, onSave, validateState, ignoreEditable
You can follow this example to learn how to custom the body of insert modal.

Note: You are supposed to be wrapper your custom DOM/JSX as a React Component, for customizing body, we don't have the exposed React Component.
Note: You are supposed to be implemented the getFieldValue method in your custom React Component and return the new row for insert row

Insert Modal Field

01. Custom the feld in the insert modal

You can only custom one input field in the insert modal instead of whole modal body. Use customInsertEditor on <TableHeaderColumn> and give an object which have a getElement property: 
customNameField = (column, attr, editorClass, ignoreEditable) => {
  return (
    <select className={ `${editorClass}` } { ...attr }>
      {
        fruits.map(name => (<option key={ name } value={ name }>{ name }</option>))
      }
    </select>
  );
}
// ...
<TableHeaderColumn dataField='name' customInsertEditor={ { getElement: this.customNameField } }>Product Name</TableHeaderColumn>
attr props have ref attribute and you are supposed to be add them on your input field(input, textarea, select etc.) Because react-bootstrap-table use the ref to get the input value. However, if your custom element is not a standard field for HTML form-control , you can still custom it like following：
class SalesRadioField extends React.Component {

  getFieldValue = () => {
    return this.refs.yes.checked ? 'Yes' : 'No';
  }

  render() {
    return (
      <div>
        <label className='radio-inline'>
          <input ref='yes' type='radio' name='optradio' value='Yes'/>Yes
        </label>
        <label className='radio-inline'>
          <input ref='no' type='radio' name='optradio' value='No'/>No
        </label>
      </div>
    );
  }
}
customSaleField = (column, attr, editorClass, ignoreEditable) => {
  /*
    In this case, you are suppose to be prodived a specific method name for
    react-bootstrap-table to get the value for this field.

    Notes:
    1. You are suppose to be implement getFieldValue function and return the value that user input
  */
  return (
    <SalesRadioField ref={ attr.ref } editorClass={ editorClass } ignoreEditable={ ignoreEditable }/>
  );
}
// ...
<TableHeaderColumn dataField='sales' customInsertEditor={ { getElement: this.customSaleField } }>On Sales?</TableHeaderColumn>


Insert Modal Header

It's available to custom the header of insert modal by configuring options.insertModalHeader, it only accept a function and a JSX returned value is necessary. This function will take two argument: closeModal and save. This both are function, call the first one will trigger closing and the other will save your new data. Following, we have two way to customize the header of insert modal:

01. Use InsertModalHeader by default

This is a simple and default way to custom header of insert modal, check following example to see how to use InsertModalHeader component: 
beforeClose(e) {
  alert(`[Custom Event]: Before modal close event triggered!`);
}

handleModalClose(closeModal) {
  // Custom your onCloseModal event here,
  // it's not necessary to implement this function if you have no any process before modal close
  console.log('This is my custom function for modal close event');
  closeModal();
}

createCustomModalHeader = (closeModal, save) => {
  return (
    <InsertModalHeader
      className='my-custom-class'
      title='This is my custom title'
      beforeClose={ this.beforeClose }
      onModalClose={ () => this.handleModalClose(closeModal) }/>
      // hideClose={ true } to hide the close button
  );

  // If you want have more power to custom the child of InsertModalHeader,
  // you can do it like following
  // return (
  //   <InsertModalHeader
  //     beforeClose={ this.beforeClose }
  //     onModalClose={ () => this.handleModalClose(closeModal) }>
  //     { ... }
  //   </InsertModalHeader>
  // );
}
//...
const options = {
  insertModalHeader: this.createCustomModalHeader
};
<BootstrapTable data={rows} options={options} insertRow>


02. Customize by yourself

You can customize all the content of header of insert modal instead of using InsertModalHeader: 
createCustomModalHeader(onClose, onSave) {
    const headerStyle = {
      fontWeight: 'bold',
      fontSize: 'large',
      textAlign: 'center',
      backgroundColor: '#eeeeee'
    };
    return (
      <div className='modal-header' style={ headerStyle }>
        <h3>That is my custom header</h3>
        <button className='btn btn-info' onClick={ onClose }>Close it!</button>
      </div>
    );
  }
//...
const options = {
  insertModalHeader: this.createCustomModalHeader
};
<BootstrapTable data={rows} options={options} insertRow>


Insert Modal Footer

It's available to custom the footer of insert modal by configuring options.insertModalFooter, it only accept a function and a JSX returned value is necessary. This function will take two argument: closeModal and save. This both are function, call the first one will trigger closing and the other will save your new data. Following, we have two way to customize the footer of insert modal:

01. Use InsertModalFooter by default

This is a simple and default way to custom header of insert modal, check following example to see how to use InsertModalFooter component: 
beforeClose(e) {
  alert(`[Custom Event]: Modal close event triggered!`);
}

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

handleModalClose(closeModal) {
  // Custom your onCloseModal event here,
  // it's not necessary to implement this function if you have no any process before modal close
  console.log('This is my custom function for modal close event');
  closeModal();
}

handleSave(save) {
  // Custom your onSave event here,
  // it's not necessary to implement this function if you have no any process before save
  console.log('This is my custom function for save event');
  save();
}

createCustomModalFooter = (closeModal, save) => {
  return (
    <InsertModalFooter
      className='my-custom-class'
      saveBtnText='CustomSaveText'
      closeBtnText='CustomCloseText'
      closeBtnContextual='btn-warning'
      saveBtnContextual='btn-success'
      closeBtnClass='my-close-btn-class'
      saveBtnClass='my-save-btn-class'
      beforeClose={ this.beforeClose }
      beforeSave={ this.beforeSave }
      onModalClose={ () => this.handleModalClose(closeModal) }
      onSave={ () => this.handleSave(save) }/>
  );

  // If you want have more power to custom the child of InsertModalFooter,
  // you can do it like following
  // return (
  //   <InsertModalFooter
  //     onModalClose={ () => this.handleModalClose(closeModal) }
  //     onSave={ () => this.handleSave(save) }>
  //     { ... }
  //   </InsertModalFooter>
  // );
}
//...
const options = {
  insertModalFooter: this.createCustomModalFooter
};
<BootstrapTable data={rows} options={options} insertRow>


02. Customize by yourself

You can customize all the content of footer of insert modal instead of using InsertModalFooter: 
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>
      <button className='btn btn-xs btn-danger' onClick={ onSave }>Confirm</button>
    </div>
  );
}
//...
const options = {
  insertModalFooter: this.createCustomModalFooter
};
<BootstrapTable data={rows} options={options} insertRow>


Pagination Panel

01. Custom all of the pagination panel

You can custom all of components for pagination, include sizePerPage dropdown and pagination list via options.paginationPanel and we give a props as argument and this argument have following properties: 
{
  currPage,
  sizePerPage,
  sizePerPageList,
  pageStartIndex,
  changePage,   // call it when page change and pass the new value of page
  toggleDropDown,  // call it for toggle sizePerPage dropdown
  changeSizePerPage,  // call it when sizePerPage change and pass the new value of size per page
  components: {   // Default pagination components, you can still use them
    totalText,
    sizePerPageDropdown,
    pageList,
  }
}
Following is a good example to getting started: 
renderPaginationPanel = (props) => {
  return (
    <div>
      <div>{ props.components.pageList }</div>
      <div>
        <span>Change size per page: </span>
        { props.components.sizePerPageDropdown }
      </div>
      <div>
        <button onClick={ () => props.changeSizePerPage(25) } className='btn btn-default'>Click to force size per page as 25</button>
        <button onClick={ () => props.toggleDropDown() } className='btn btn-default'>Click to force toggle dropdown</button>
        <button onClick={ () => props.changePage(3) } className='btn btn-default'>Jump to page 3</button>
      </div>
    </div>
  );
}
//...
const options = {
  paginationPanel: this.renderPaginationPanel
};
//...
<BootstrapTable data={rows} options={options} pagination>


SizePerPage DropDown

You can custom the sizePerPage dropdown via options.sizePerPageDropdown props. options.sizePerPageDropdown only accept a function and a JSX returned value is necessary. Following, we have two way to customize the sizePerPage dropdown:

01. Use SizePerPageDropDown by default

This is a simple and default way to custom this component. SizePerPageDropDown is a exported React component by react-bootstrap-table, and it have following props you can configure:
  • className
  • btnContextual
  • variation
  • onClick
These all props are not required, so you can only configure the props that you want. 
import { BootstrapTable, TableHeaderColumn, SizePerPageDropDown } from 'react-bootstrap-table';
// ...
onToggleDropDown = (toggleDropDown) => {
  // do your stuff here
  console.log('toggle dropdown');
  toggleDropDown();
}

renderSizePerPageDropDown = (props) => {
  return (
    <SizePerPageDropDown
      className='my-size-per-page'
      btnContextual='btn-warning'
      variation='dropup'
      onClick={ () => this.onToggleDropDown(props.toggleDropDown) }/>
  );
}

render() {
  const options = {
    sizePerPageDropDown: this.renderSizePerPageDropDown
  };
  //...
  <BootstrapTable data={rows} options={options} pagination>

02. Customize by yourself

If you think SizePerPageDropDown is not satisfied to your requirement, you can custom a new one as following 
renderSizePerPageDropDown = props => {
  return (
    <div className='btn-group'>
      {
        [ 10, 25, 30 ].map((n, idx) => {
          const isActive = (n === props.currSizePerPage) ? 'active' : null;
          return (
            <button key={ idx } type='button' className={ `btn btn-info ${isActive}` } onClick={ () => props.changeSizePerPage(n) }>{ n }</button>
          );
        })
      }
    </div>
  );
}

//...
const options = {
  sizePerPageDropDown: this.renderSizePerPageDropDown
};
//...
<BootstrapTable data={rows} options={options} pagination>

Column Filter

For the column filter, we support `select`, `text`, `number` and `date` filter by default. But you can still custom the filter for specified reason. In customization case, you need to assign `filter` in `TableHeaderColumn` but give an object which have following properties:
  • type: Give 'CustomFilter' to specify this filter are customization filter
  • getElement: Give a function and a JSX returned value is necessary
  • customFilterParameters(optional): give any custom parameter if necessary
You can check this example to learn how to custom a column filter:

Cell Edit

01. Custom cell editor by default

For the cell edit functionality which configure by cellEdit prop on BootstrapTable, the default editor is basic input field. react-bootstrap-table support some default form input, like: textarea, checkbox, select and checkbox. You can confgiure editable on TableHeaderColumn to specify what kind of editor you want: 
const jobTypes = [ 'A', 'B', 'C', 'D' ];
render() {
  return (
    <BootstrapTable data={ jobs } cellEdit={ cellEditProp }>
      <TableHeaderColumn dataField='id' isKey={ true }}>Job ID</TableHeaderColumn}>
      <TableHeaderColumn dataField='name' editable={ { type: 'textarea' } }}>Job Name</TableHeaderColumn}>
      <TableHeaderColumn dataField='type' editable={ { type: 'select', options: { values: jobTypes } } }}>Job Type</TableHeaderColumn}>
      <TableHeaderColumn dataField='active' editable={ { type: 'checkbox', options: { values: 'Y:N' } } }}>Active</TableHeaderColumn}>
      <TableHeaderColumn dataField='datetime' editable={ { type: 'datetime' } }}>Date Time</TableHeaderColumn}>
    </BootstrapTable>
  );
}


02. Custom cell editor by yourself

If default cell edit type is not match your requirement, you still can custom the cell editor via customEditor on TableHeaderColumn. There are two availabe properties can be configured on customEditor:
  • getElement: Give a function and a JSX returned value is necessary
  • customEditorParameters(optional): give any custom parameter if necessary
You can check this example to learn how to custom a cell editor.
Note: You need to implement updateData() on your customization component and return the cell data. This function will be called automatically before saving cell


Row Selection Column

01. Basic styling customization

For selectRow on BootstrapTable, default will display a selection column on the first column. We only support className and bgColor for adding custom class name or background color on selection row. 
render() {
  const selectRow = {
    mode: 'checkbox',
    bgColor: 'pink',
    className: 'my-selection-custom'
  };
  return (
    <BootstrapTable data={ jobs } selectRow={ selectRow }>
      <TableHeaderColumn dataField='id' isKey={ true }}>Job ID</TableHeaderColumn}>
      <TableHeaderColumn dataField='name'>Job Name</TableHeaderColumn}>
      <TableHeaderColumn dataField='type'>Job Type</TableHeaderColumn}>
    </BootstrapTable>
  );
}


02. Custom seleciton column

For a highly customable reason, we still support you to custom the selection column via selectRow.customComponent. You can check this example to learn how to use it.