Publish

- react-bootstrap-table-next@0.1.10

.travis.yml

@@ -11,6 +11,8 @@ branches:
   only:
   - master
   - develop
+  except:
+  - gh-pages-src
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s

docs/columns.md

@@ -34,6 +34,8 @@ Available properties in a column object:
 * [editCellClasses](#editCellClasses)
 * [editorStyle](#editorStyle)
 * [editorClasses](#editorClasses)
+* [editor](#editor)
+* [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
 
@@ -560,6 +562,87 @@ This is almost same as [`column.editCellStyle`](#editCellStyle), but `column.edi
 ## <a name='editorClasses'>column.editorClasses - [Object | Function]</a>
 This is almost same as [`column.editCellClasses`](#editCellClasses), but `column.editorClasses` is custom the class on editor instead of cell(`td`).
 
+## <a name='editor'>column.editor - [Object]</a>
+`column.editor` allow you to custom the type of cell editor by following predefined type:
+
+* Text(Default)
+* Dropdown
+* Date
+* Textarea
+* Checkbox
+
+Following is a quite example: 
+
+```js
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [
+  //...
+  , {
+    dataField: 'done',
+    text: 'Done',
+    editor: {
+      type: Type.CHECKBOX,
+      value: 'Y:N'
+    }
+  }
+];
+```
+
+If you want more information, please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-editor).
+
+## <a name='editorRenderer'>column.editorRenderer - [Function]</a>
+If you feel above predefined editors are not satisfied to your requirement, you can totally custom the editor via `column.editorRenderer`:
+
+```js
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+// Custom Editor
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+
+const columns = [
+  //...
+  , {
+    dataField: 'done',
+    text: 'Done',
+    editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) =>
+      <QualityRanger { ...editorProps } value={ value } />;
+  }
+];
+```
+
 ## <a name='filter'>column.filter - [Object]</a>
 Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
 

docs/row-selection.md

@@ -158,12 +158,12 @@ const selectRow = {
 
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
-`row`, `isSelect` and `rowIndex`.
+`row`, `isSelect`, `rowIndex` and `e`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex) => {
+  onSelect: (row, isSelect, rowIndex, e) => {
     // ...
   }
 };
@@ -175,7 +175,7 @@ This callback function will be called when select/unselect all and it only work
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, results) => {
+  onSelectAll: (isSelect, results, e) => {
     // ...
   }
 };

gulpfile.babel.js

@@ -72,9 +72,15 @@ function styles() {
     .pipe(gulp.dest(PKG_PATH));
 }
 
-function umd() {
-  return gulp.src('./webpack.prod.config.babel.js')
-    .pipe(shell(['webpack --config <%= file.path %>']));
+function umd(done) {
+  gulp.parallel(
+    () => gulp.src('./webpack/next.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
+  )();
+  done();
 }
 
 const buildJS = gulp.parallel(umd, scripts);

package.json

@@ -85,7 +85,8 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "packages/**/*.js"
+      "packages/*/src/*.js",
+      "packages/*/index.js"
     ],
     "roots": [
       "<rootDir>/packages"

packages/react-bootstrap-table2-editor/README.md

@@ -48,6 +48,9 @@ How user save their new editings? We offer two ways:
 * Column Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value)
 * Cell Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function)
 
+## Validation
+
+[column.validator](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it!
 ## Customize Style/Class
 ### Editing Cell
 
@@ -58,6 +61,169 @@ How user save their new editings? We offer two ways:
 * Customize the editor style via [column.editorStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorstyle-object-function)
 * Customize the editor classname via [column.editoClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function)
 
-## Validation
+## Rich Editors
+`react-bootstrap-table2` have following predefined editor:
 
-[`column.validator`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it!
+* Text(Default)
+* Dropdown
+* Date
+* Textarea
+* Checkbox
+
+In a nutshell, you just only give a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) and define the `type`:
+
+```js
+import { Type } from 'react-bootstrap-table2-editor';
+const columns = [
+  ..., {
+    dataField: 'done',
+    text: 'Done',
+    editor: {
+      type: Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE,
+      ... // The rest properties will be rendered into the editor's DOM element
+    }
+  }
+]
+```
+
+In the following, we go though all the predefined editors:
+
+### Dropdown Editor
+Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+
+```js
+import { Type } from 'react-bootstrap-table2-editor';
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    options: [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}];
+```
+
+### Date Editor
+Date editor is use `<input type="date">`, the configuration is very simple:
+
+```js
+const columns = [
+  ..., {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+```
+
+### Textarea Editor
+Textarea editor is use `<input type="textarea">`, user can press `ENTER` to change line and in the `react-bootstrap-table2`, user allow to save result via press `SHIFT` + `ENTER`.
+
+```js
+const columns = [
+  ..., {
+  dataField: 'comment',
+  text: 'Product Comments',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+```
+### Checkbox Editor
+Checkbox editor allow you to have a pair value choice, the `editor.value` is required value to represent the actual value for check and uncheck.
+
+```js
+const columns = [
+  ..., {
+  dataField: 'comment',
+  text: 'Product Comments',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+```
+
+## Customize Editor
+If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accept a function and pass following arguments when function called:
+
+* `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
+* `value`: Current cell value
+* `row`: Current row data 
+* `column`: Current column definition 
+* `rowIndex`: Current row index 
+* `columnIndex`: Current column index
+
+> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
+
+> Note when you want to save value, you can call **editorProps.onUpdate** function
+
+Following is a short example: 
+
+```js
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+```

packages/react-bootstrap-table2-editor/index.js

@@ -1,6 +1,7 @@
 import wrapperFactory from './src/wrapper';
 import editingCellFactory from './src/editing-cell';
 import {
+  EDITTYPE,
   CLICK_TO_CELL_EDIT,
   DBCLICK_TO_CELL_EDIT,
   DELAY_FOR_DBCLICK
@@ -14,3 +15,5 @@ export default (options = {}) => ({
   DELAY_FOR_DBCLICK,
   options
 });
+
+export const Type = EDITTYPE;

packages/react-bootstrap-table2-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

packages/react-bootstrap-table2-editor/src/checkbox-editor.js

@@ -0,0 +1,61 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class CheckBoxEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: props.defaultValue.toString() === props.value.split(':')[0]
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.checkbox.focus();
+  }
+
+  getValue() {
+    const [positive, negative] = this.props.value.split(':');
+    return this.checkbox.checked ? positive : negative;
+  }
+
+  handleChange(e) {
+    if (this.props.onChange) this.props.onChange(e);
+    const { target } = e;
+    this.setState(() => ({ checked: target.checked }));
+  }
+
+  render() {
+    const { defaultValue, className, ...rest } = this.props;
+    const editorClass = cs('editor edit-chseckbox checkbox', className);
+    return (
+      <input
+        ref={ node => this.checkbox = node }
+        type="checkbox"
+        className={ editorClass }
+        { ...rest }
+        checked={ this.state.checked }
+        onChange={ this.handleChange }
+      />
+    );
+  }
+}
+
+CheckBoxEditor.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  value: PropTypes.string,
+  defaultValue: PropTypes.any,
+  onChange: PropTypes.func
+};
+CheckBoxEditor.defaultProps = {
+  className: '',
+  value: 'on:off',
+  defaultValue: false,
+  onChange: undefined
+};
+export default CheckBoxEditor;

packages/react-bootstrap-table2-editor/src/const.js

@@ -2,3 +2,11 @@ export const TIME_TO_CLOSE_MESSAGE = 3000;
 export const DELAY_FOR_DBCLICK = 200;
 export const CLICK_TO_CELL_EDIT = 'click';
 export const DBCLICK_TO_CELL_EDIT = 'dbclick';
+
+export const EDITTYPE = {
+  TEXT: 'text',
+  SELECT: 'select',
+  TEXTAREA: 'textarea',
+  CHECKBOX: 'checkbox',
+  DATE: 'date'
+};

packages/react-bootstrap-table2-editor/src/date-editor.js

@@ -0,0 +1,42 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class DateEditor extends Component {
+  componentDidMount() {
+    const { defaultValue } = this.props;
+    this.date.valueAsDate = new Date(defaultValue);
+    this.date.focus();
+  }
+
+  getValue() {
+    return this.date.value;
+  }
+
+  render() {
+    const { defaultValue, className, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-date', className);
+    return (
+      <input
+        ref={ node => this.date = node }
+        type="date"
+        className={ editorClass }
+        { ...rest }
+      />
+    );
+  }
+}
+
+DateEditor.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  defaultValue: PropTypes.string
+};
+DateEditor.defaultProps = {
+  className: '',
+  defaultValue: ''
+};
+export default DateEditor;

packages/react-bootstrap-table2-editor/src/dropdown-editor.js

@@ -0,0 +1,61 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class DropDownEditor extends Component {
+  componentDidMount() {
+    const { defaultValue } = this.props;
+    this.select.value = defaultValue;
+    this.select.focus();
+  }
+
+  getValue() {
+    return this.select.value;
+  }
+
+  render() {
+    const { defaultValue, className, options, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-select', className);
+
+    const attr = {
+      ...rest,
+      className: editorClass
+    };
+
+    return (
+      <select
+        { ...attr }
+        ref={ node => this.select = node }
+        defaultValue={ defaultValue }
+      >
+        {
+          options.map(({ label, value }) => (
+            <option key={ value } value={ value }>{ label }</option>
+          ))
+        }
+      </select>
+    );
+  }
+}
+
+DropDownEditor.propTypes = {
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.any
+    }))
+  ]).isRequired
+};
+DropDownEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  style: {}
+};
+export default DropDownEditor;

packages/react-bootstrap-table2-editor/src/editing-cell.js

@@ -6,9 +6,13 @@ import React, { Component } from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
 
+import DropdownEditor from './dropdown-editor';
+import TextAreaEditor from './textarea-editor';
+import CheckBoxEditor from './checkbox-editor';
+import DateEditor from './date-editor';
 import TextEditor from './text-editor';
 import EditorIndicator from './editor-indicator';
-import { TIME_TO_CLOSE_MESSAGE } from './const';
+import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
 
 export default _ =>
   class EditingCell extends Component {
@@ -73,8 +77,8 @@ export default _ =>
       }, timeToCloseMessage);
     }
 
-    beforeComplete(row, column, newValue) {
-      const { onUpdate } = this.props;
+    beforeComplete(newValue) {
+      const { onUpdate, row, column } = this.props;
       if (_.isFunction(column.validator)) {
         const validateForm = column.validator(newValue, row, column);
         if (_.isObject(validateForm) && !validateForm.valid) {
@@ -89,28 +93,20 @@ export default _ =>
     }
 
     handleBlur() {
-      const { onEscape, blurToSave, row, column } = this.props;
+      const { onEscape, blurToSave } = this.props;
       if (blurToSave) {
-        const value = this.editor.text.value;
-        if (!_.isDefined(value)) {
-          // TODO: for other custom or embed editor
-        }
-        this.beforeComplete(row, column, value);
+        this.beforeComplete(this.editor.getValue());
       } else {
         onEscape();
       }
     }
 
     handleKeyDown(e) {
-      const { onEscape, row, column } = this.props;
+      const { onEscape } = this.props;
       if (e.keyCode === 27) { // ESC
         onEscape();
       } else if (e.keyCode === 13) { // ENTER
-        const value = e.currentTarget.value;
-        if (!_.isDefined(value)) {
-          // TODO: for other custom or embed editor
-        }
-        this.beforeComplete(row, column, value);
+        this.beforeComplete(this.editor.getValue());
       }
     }
 
@@ -124,17 +120,13 @@ export default _ =>
     }
 
     render() {
-      const { invalidMessage } = this.state;
+      let editor;
       const { row, column, className, style, rowIndex, columnIndex } = this.props;
       const { dataField } = column;
 
       const value = _.get(row, dataField);
-      const editorAttrs = {
-        onKeyDown: this.handleKeyDown,
-        onBlur: this.handleBlur
-      };
+      const hasError = _.isDefined(this.state.invalidMessage);
 
-      const hasError = _.isDefined(invalidMessage);
       let customEditorClass = column.editorClasses || '';
       if (_.isFunction(column.editorClasses)) {
         customEditorClass = column.editorClasses(value, row, rowIndex, columnIndex);
@@ -150,20 +142,51 @@ export default _ =>
         shake: hasError
       }, customEditorClass);
 
+      let editorProps = {
+        ref: node => this.editor = node,
+        defaultValue: value,
+        style: editorStyle,
+        className: editorClass,
+        onKeyDown: this.handleKeyDown,
+        onBlur: this.handleBlur
+      };
+
+      const isDefaultEditorDefined = _.isObject(column.editor);
+
+      if (isDefaultEditorDefined) {
+        editorProps = {
+          ...editorProps,
+          ...column.editor
+        };
+      } else if (_.isFunction(column.editorRenderer)) {
+        editorProps = {
+          ...editorProps,
+          onUpdate: this.beforeComplete
+        };
+      }
+
+      if (_.isFunction(column.editorRenderer)) {
+        editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
+        editor = <DropdownEditor { ...editorProps } />;
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
+        editor = <TextAreaEditor { ...editorProps } />;
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {
+        editor = <CheckBoxEditor { ...editorProps } />;
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) {
+        editor = <DateEditor { ...editorProps } />;
+      } else {
+        editor = <TextEditor { ...editorProps } />;
+      }
+
       return (
         <td
           className={ cs('react-bootstrap-table-editing-cell', className) }
           style={ style }
           onClick={ this.handleClick }
         >
-          <TextEditor
-            ref={ node => this.editor = node }
-            defaultValue={ value }
-            style={ editorStyle }
-            className={ editorClass }
-            { ...editorAttrs }
-          />
-          { hasError ? <EditorIndicator invalidMessage={ invalidMessage } /> : null }
+          { editor }
+          { hasError ? <EditorIndicator invalidMessage={ this.state.invalidMessage } /> : null }
         </td>
       );
     }

packages/react-bootstrap-table2-editor/src/text-editor.js

@@ -10,6 +10,10 @@ class TextEditor extends Component {
     this.text.focus();
   }
 
+  getValue() {
+    return this.text.value;
+  }
+
   render() {
     const { defaultValue, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);

packages/react-bootstrap-table2-editor/src/textarea-editor.js

@@ -0,0 +1,60 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class TextAreaEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    const { defaultValue } = this.props;
+    this.text.value = defaultValue;
+    this.text.focus();
+  }
+
+  getValue() {
+    return this.text.value;
+  }
+
+  handleKeyDown(e) {
+    if (e.keyCode === 13 && !e.shiftKey) return;
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  }
+
+  render() {
+    const { defaultValue, className, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-textarea', className);
+    return (
+      <textarea
+        ref={ node => this.text = node }
+        type="textarea"
+        className={ editorClass }
+        { ...rest }
+        onKeyDown={ this.handleKeyDown }
+      />
+    );
+  }
+}
+
+TextAreaEditor.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  onKeyDown: PropTypes.func
+};
+TextAreaEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  onKeyDown: undefined
+};
+export default TextAreaEditor;

packages/react-bootstrap-table2-editor/test/editing-cell.test.js

@@ -6,7 +6,12 @@ import { shallow, mount } from 'enzyme';
 
 import _ from 'react-bootstrap-table-next/src/utils';
 import editingCellFactory from '../src/editing-cell';
+import * as constants from '../src/const';
 import TextEditor from '../src/text-editor';
+import DateEditor from '../src/date-editor';
+import DropDownEditor from '../src/dropdown-editor';
+import TextAreaEditor from '../src/textarea-editor';
+import CheckBoxEditor from '../src/checkbox-editor';
 import EditorIndicator from '../src/editor-indicator';
 
 const EditingCell = editingCellFactory(_);
@@ -39,7 +44,7 @@ describe('EditingCell', () => {
   beforeEach(() => {
     onEscape = sinon.stub();
     onUpdate = sinon.stub();
-    wrapper = shallow(
+    wrapper = mount(
       <EditingCell
         row={ row }
         rowIndex={ rowIndex }
@@ -74,7 +79,8 @@ describe('EditingCell', () => {
   it('when press ENTER on TextEditor should call onUpdate correctly', () => {
     const newValue = 'test';
     const textEditor = wrapper.find(TextEditor);
-    textEditor.simulate('keyDown', { keyCode: 13, currentTarget: { value: newValue } });
+    sinon.stub(textEditor.instance(), 'getValue').returns(newValue);
+    textEditor.simulate('keyDown', { keyCode: 13 });
     expect(onUpdate.callCount).toBe(1);
     expect(onUpdate.calledWith(row, column, newValue)).toBe(true);
   });
@@ -311,7 +317,7 @@ describe('EditingCell', () => {
             onEscape={ onEscape }
           />
         );
-        wrapper.instance().beforeComplete(row, column, newValue);
+        wrapper.instance().beforeComplete(newValue);
       });
 
       it('should call column.validator successfully', () => {
@@ -357,7 +363,17 @@ describe('EditingCell', () => {
           text: 'ID',
           validator: validatorCallBack
         };
-        wrapper.instance().beforeComplete(row, column, newValue);
+        wrapper = mount(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ column }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+        wrapper.instance().beforeComplete(newValue);
       });
 
       it('should call column.validator successfully', () => {
@@ -370,4 +386,156 @@ describe('EditingCell', () => {
       });
     });
   });
+
+  describe('if column.editorRenderer is defined', () => {
+    const TestEditor = () => <input type="text" />;
+
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editorRenderer: sinon.stub().returns(<TestEditor />)
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should call column.editorRenderer correctly', () => {
+      expect(column.editorRenderer.callCount).toBe(1);
+    });
+
+    it('should render correctly', () => {
+      expect(wrapper.find(TestEditor)).toHaveLength(1);
+    });
+  });
+
+  describe('if column.editor is select', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.SELECT,
+          options: [{
+            value: 1,
+            label: 'A'
+          }]
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render dropdown editor successfully', () => {
+      const editor = wrapper.find(DropDownEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+      expect(editor.props().options).toEqual(column.editor.options);
+    });
+  });
+
+  describe('if column.editor is textarea', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.TEXTAREA
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render textarea editor successfully', () => {
+      const editor = wrapper.find(TextAreaEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+    });
+  });
+
+  describe('if column.editor is checkbox', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.CHECKBOX
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render checkbox editor successfully', () => {
+      const editor = wrapper.find(CheckBoxEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+    });
+  });
+
+  describe('if column.editor is date', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.DATE
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render date editor successfully', () => {
+      const editor = wrapper.find(DateEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+    });
+  });
 });

packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js

@@ -0,0 +1,64 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { todosGenerator } from 'utils/common';
+
+const todos = todosGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Todo ID'
+}, {
+  dataField: 'todo',
+  text: 'Todo Name'
+}, {
+  dataField: 'done',
+  text: 'Done',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Todo ID'
+}, {
+  dataField: 'todo',
+  text: 'Todo Name'
+}, {
+  dataField: 'done',
+  text: 'Done',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ todos }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ todos }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -0,0 +1,130 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint no-return-assign: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator();
+
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js

@@ -0,0 +1,77 @@
+/* eslint prefer-template: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'ID'
+}, {
+  dataField: 'name',
+  text: 'Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'ID'
+}, {
+  dataField: 'name',
+  text: 'Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-table.js

@@ -0,0 +1,100 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    options: [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    options: [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js

@@ -0,0 +1,68 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+let priceFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    getFilter: (filter) => {
+      // pricerFilter was assigned once the component has been mounted.
+      priceFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  priceFilter({
+    number: 2103,
+    comparator: Comparator.GT
+  });
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+
+let priceFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    getFilter: (filter) => {
+      // pricerFilter was assigned once the component has been mounted.
+      priceFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  priceFilter({
+    number: 2103,
+    comparator: Comparator.GT
+  });
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter(0);
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter(0);
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
+
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+let nameFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilter: (filter) => {
+      // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const handleClick = () => {
+  nameFilter(0);
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+let nameFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilter: (filter) => {
+      // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const handleClick = () => {
+  nameFilter(0);
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js

@@ -65,6 +65,7 @@ const options = {
   prePageTitle: 'Pre page',
   firstPageTitle: 'Next page',
   lastPageTitle: 'Last page',
+  showTotal: true,
   sizePerPageList: [{
     text: '5', value: 5
   }, {

packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js

@@ -22,14 +22,16 @@ const columns = [{
 const selectRow = {
   mode: 'checkbox',
   clickToSelect: true,
-  onSelect: (row, isSelect, rowIndex) => {
+  onSelect: (row, isSelect, rowIndex, e) => {
     console.log(row.id);
     console.log(isSelect);
     console.log(rowIndex);
+    console.log(e);
   },
-  onSelectAll: (isSelect, rows) => {
+  onSelectAll: (isSelect, rows, e) => {
     console.log(isSelect);
     console.log(rows);
+    console.log(e);
   }
 };
 
@@ -49,7 +51,18 @@ const columns = [{
 
 const selectRow = {
   mode: 'checkbox',
-  clickToSelect: true
+  clickToSelect: true,
+  onSelect: (row, isSelect, rowIndex, e) => {
+    console.log(row.id);
+    console.log(isSelect);
+    console.log(rowIndex);
+    console.log(e);
+  },
+  onSelectAll: (isSelect, rows, e) => {
+    console.log(isSelect);
+    console.log(rows);
+    console.log(e);
+  }
 };
 
 <BootstrapTable

packages/react-bootstrap-table2-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "",
   "main": "index.js",
   "private": true,

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -1,3 +1,5 @@
+/* eslint no-mixed-operators: 0 */
+
 /**
  * products generator for stories
  * 
@@ -27,12 +29,34 @@ export const productsQualityGenerator = (quantity = 5) =>
     quality: index % 3
   }));
 
+const jobType = ['A', 'B', 'C', 'D', 'E'];
+
+const jobOwner = ['Allen', 'Bob', 'Cindy'];
+
 export const jobsGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,
     name: `Job name ${index}`,
-    owner: Math.floor(Math.random() * 3),
-    type: Math.floor(Math.random() * 5)
+    owner: jobOwner[Math.floor((Math.random() * 2) + 1)],
+    type: jobType[Math.floor((Math.random() * 4) + 1)]
+  }));
+
+export const todosGenerator = (quantity = 5) =>
+  Array.from({ length: quantity }, (value, index) => ({
+    id: index,
+    todo: `Todo item ${index}`,
+    done: Math.random() > 0.4 ? 'Y' : 'N'
+  }));
+
+const startDate = new Date(2017, 0, 1);
+const endDate = new Date();
+
+export const stockGenerator = (quantity = 5) =>
+  Array.from({ length: quantity }, (value, index) => ({
+    id: index,
+    name: `Todo item ${index}`,
+    inStockDate:
+      new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));
 
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

packages/react-bootstrap-table2-example/stories/index.js

@@ -48,6 +48,9 @@ import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import NumberFilter from 'examples/column-filter/number-filter';
 import NumberFilterWithDefaultValue from 'examples/column-filter/number-filter-default-value';
 import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
+import ProgrammaticallyTextFilter from 'examples/column-filter/programmatically-text-filter';
+import ProgrammaticallySelectFilter from 'examples/column-filter/programmatically-select-filter';
+import ProgrammaticallyNumberFilter from 'examples/column-filter/programmatically-number-filter';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -76,6 +79,11 @@ import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table';
 import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
 import EditorStyleTable from 'examples/cell-edit/editor-style-table';
 import EditorClassTable from 'examples/cell-edit/editor-class-table';
+import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
+import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
+import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
+import DateEditorTable from 'examples/cell-edit/date-editor-table';
+import CustomEditorTable from 'examples/cell-edit/custom-editor-table';
 
 // work on row selection
 import SingleSelectionTable from 'examples/row-selection/single-selection';
@@ -166,7 +174,10 @@ storiesOf('Column Filter', module)
   .add('Custom Text Filter', () => <CustomTextFilter />)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)
-  .add('Custom Filter Value', () => <CustomFilterValue />);
+  .add('Custom Filter Value', () => <CustomFilterValue />)
+  .add('Programmatically Text Filter ', () => <ProgrammaticallyTextFilter />)
+  .add('Programmatically Select Filter ', () => <ProgrammaticallySelectFilter />)
+  .add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />);
 
 storiesOf('Work on Rows', module)
   .add('Customize Row Style', () => <RowStyleTable />)
@@ -194,7 +205,12 @@ storiesOf('Cell Editing', module)
   .add('Custom Cell Style', () => <CellEditStyleTable />)
   .add('Custom Cell Classes', () => <CellEditClassTable />)
   .add('Custom Editor Classes', () => <EditorClassTable />)
-  .add('Custom Editor Style', () => <EditorStyleTable />);
+  .add('Custom Editor Style', () => <EditorStyleTable />)
+  .add('Dropdown Editor', () => <DropdownEditorTable />)
+  .add('Textarea Editor', () => <TextareaEditorTable />)
+  .add('Checkbox Editor', () => <CheckboxEditorTable />)
+  .add('Date Editor', () => <DateEditorTable />)
+  .add('Custom Editor', () => <CustomEditorTable />);
 
 storiesOf('Row Selection', module)
   .add('Single Selection', () => <SingleSelectionTable />)

packages/react-bootstrap-table2-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-filter/src/components/number.js

@@ -1,3 +1,4 @@
+/* eslint react/require-default-props: 0 */
 /* eslint no-return-assign: 0 */
 
 import React, { Component } from 'react';
@@ -30,11 +31,25 @@ class NumberFilter extends Component {
   }
 
   componentDidMount() {
-    const { column, onFilter } = this.props;
+    const { column, onFilter, getFilter } = this.props;
     const comparator = this.numberFilterComparator.value;
     const number = this.numberFilter.value;
     if (comparator && number) {
-      onFilter(column, { number, comparator }, FILTER_TYPE.NUMBER);
+      onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator });
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilter) {
+      getFilter((filterVal) => {
+        this.setState(() => ({ isSelected: (filterVal !== '') }));
+        this.numberFilterComparator.value = filterVal.comparator;
+        this.numberFilter.value = filterVal.number;
+
+        onFilter(column, FILTER_TYPE.NUMBER)({
+          number: filterVal.number,
+          comparator: filterVal.comparator
+        });
+      });
     }
   }
 
@@ -53,7 +68,7 @@ class NumberFilter extends Component {
     }
     const filterValue = e.target.value;
     this.timeout = setTimeout(() => {
-      onFilter(column, { number: filterValue, comparator }, FILTER_TYPE.NUMBER);
+      onFilter(column, FILTER_TYPE.NUMBER)({ number: filterValue, comparator });
     }, delay);
   }
 
@@ -65,7 +80,7 @@ class NumberFilter extends Component {
     // if (comparator === '') {
     //   return;
     // }
-    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
   onChangeComparator(e) {
@@ -75,7 +90,7 @@ class NumberFilter extends Component {
     // if (value === '') {
     //   return;
     // }
-    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
   getComparatorOptions() {
@@ -116,7 +131,7 @@ class NumberFilter extends Component {
     this.setState(() => ({ isSelected: (number !== '') }));
     this.numberFilterComparator.value = comparator;
     this.numberFilter.value = number;
-    onFilter(column, { number, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator });
   }
 
   cleanFiltered() {
@@ -126,7 +141,7 @@ class NumberFilter extends Component {
     this.setState(() => ({ isSelected: (value !== '') }));
     this.numberFilterComparator.value = comparator;
     this.numberFilter.value = value;
-    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
   render() {
@@ -224,7 +239,8 @@ NumberFilter.propTypes = {
   comparatorStyle: PropTypes.object,
   comparatorClassName: PropTypes.string,
   numberStyle: PropTypes.object,
-  numberClassName: PropTypes.string
+  numberClassName: PropTypes.string,
+  getFilter: PropTypes.func
 };
 
 NumberFilter.defaultProps = {

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -25,9 +25,21 @@ class SelectFilter extends Component {
   }
 
   componentDidMount() {
+    const { column, onFilter, getFilter } = this.props;
+
     const value = this.selectInput.value;
     if (value && value !== '') {
-      this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+      onFilter(column, FILTER_TYPE.SELECT)(value);
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilter) {
+      getFilter((filterVal) => {
+        this.setState(() => ({ isSelected: filterVal !== '' }));
+        this.selectInput.value = filterVal;
+
+        onFilter(column, FILTER_TYPE.SELECT)(filterVal);
+      });
     }
   }
 
@@ -41,7 +53,7 @@ class SelectFilter extends Component {
     if (needFilter) {
       const value = this.selectInput.value;
       if (value) {
-        this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+        this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
       }
     }
   }
@@ -64,19 +76,19 @@ class SelectFilter extends Component {
     const value = (this.props.defaultValue !== undefined) ? this.props.defaultValue : '';
     this.setState(() => ({ isSelected: value !== '' }));
     this.selectInput.value = value;
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
   applyFilter(value) {
     this.selectInput.value = value;
     this.setState(() => ({ isSelected: value !== '' }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
   filter(e) {
     const { value } = e.target;
     this.setState(() => ({ isSelected: value !== '' }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
   render() {
@@ -90,6 +102,7 @@ class SelectFilter extends Component {
       comparator,
       withoutEmptyOption,
       caseSensitive,
+      getFilter,
       ...rest
     } = this.props;
 
@@ -121,7 +134,8 @@ SelectFilter.propTypes = {
   className: PropTypes.string,
   withoutEmptyOption: PropTypes.bool,
   defaultValue: PropTypes.any,
-  caseSensitive: PropTypes.bool
+  caseSensitive: PropTypes.bool,
+  getFilter: PropTypes.func
 };
 
 SelectFilter.defaultProps = {

packages/react-bootstrap-table2-filter/src/components/text.js

@@ -17,10 +17,21 @@ class TextFilter extends Component {
       value: props.defaultValue
     };
   }
+
   componentDidMount() {
+    const { onFilter, getFilter, column } = this.props;
     const defaultValue = this.input.value;
+
     if (defaultValue) {
-      this.props.onFilter(this.props.column, defaultValue, FILTER_TYPE.TEXT);
+      onFilter(this.props.column, FILTER_TYPE.TEXT)(defaultValue);
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilter) {
+      getFilter((filterVal) => {
+        this.setState(() => ({ value: filterVal }));
+        onFilter(column, FILTER_TYPE.TEXT)(filterVal);
+      });
     }
   }
 
@@ -40,7 +51,7 @@ class TextFilter extends Component {
     const filterValue = e.target.value;
     this.setState(() => ({ value: filterValue }));
     this.timeout = setTimeout(() => {
-      this.props.onFilter(this.props.column, filterValue, FILTER_TYPE.TEXT);
+      this.props.onFilter(this.props.column, FILTER_TYPE.TEXT)(filterValue);
     }, this.props.delay);
   }
 
@@ -53,12 +64,12 @@ class TextFilter extends Component {
   cleanFiltered() {
     const value = this.props.defaultValue;
     this.setState(() => ({ value }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.TEXT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.TEXT)(value);
   }
 
   applyFilter(filterText) {
     this.setState(() => ({ value: filterText }));
-    this.props.onFilter(this.props.column, filterText, FILTER_TYPE.TEXT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.TEXT)(filterText);
   }
 
   handleClick(e) {
@@ -77,8 +88,10 @@ class TextFilter extends Component {
       onFilter,
       caseSensitive,
       defaultValue,
+      getFilter,
       ...rest
     } = this.props;
+
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
       <input
@@ -105,7 +118,8 @@ TextFilter.propTypes = {
   placeholder: PropTypes.string,
   style: PropTypes.object,
   className: PropTypes.string,
-  caseSensitive: PropTypes.bool
+  caseSensitive: PropTypes.bool,
+  getFilter: PropTypes.func
 };
 
 TextFilter.defaultProps = {

packages/react-bootstrap-table2-filter/src/filter.js

@@ -6,30 +6,37 @@ import { LIKE, EQ, NE, GT, GE, LT, LE } from './comparison';
 export const filterByText = _ => (
   data,
   dataField,
-  { filterVal = '', comparator = LIKE, caseSensitive },
+  { filterVal: userInput = '', comparator = LIKE, caseSensitive },
   customFilterValue
-) =>
-  data.filter((row) => {
-    let cell = _.get(row, dataField);
-    if (customFilterValue) {
-      cell = customFilterValue(cell, row);
-    }
-    const cellStr = _.isDefined(cell) ? cell.toString() : '';
-    if (comparator === EQ) {
-      return cellStr === filterVal;
-    }
-    if (caseSensitive) {
-      return cellStr.includes(filterVal);
-    }
-    return cellStr.toLocaleUpperCase().indexOf(filterVal.toLocaleUpperCase()) !== -1;
-  });
+) => {
+  // make sure filter value to be a string
+  const filterVal = userInput.toString();
+
+  return (
+    data.filter((row) => {
+      let cell = _.get(row, dataField);
+      if (customFilterValue) {
+        cell = customFilterValue(cell, row);
+      }
+      const cellStr = _.isDefined(cell) ? cell.toString() : '';
+      if (comparator === EQ) {
+        return cellStr === filterVal;
+      }
+      if (caseSensitive) {
+        return cellStr.includes(filterVal);
+      }
+
+      return cellStr.toLocaleUpperCase().indexOf(filterVal.toLocaleUpperCase()) !== -1;
+    })
+  );
+};
 
 export const filterByNumber = _ => (
   data,
   dataField,
   { filterVal: { comparator, number } },
   customFilterValue
-) =>
+) => (
   data.filter((row) => {
     if (number === '' || !comparator) return true;
     let valid = true;
@@ -81,7 +88,8 @@ export const filterByNumber = _ => (
       }
     }
     return valid;
-  });
+  })
+);
 
 export const filterFactory = _ => (filterType) => {
   let filterFn;

packages/react-bootstrap-table2-filter/src/wrapper.js

@@ -40,33 +40,43 @@ export default (Base, {
       }
     }
 
-    onFilter(column, filterVal, filterType) {
-      const { store, columns } = this.props;
-      const currFilters = Object.assign({}, this.state.currFilters);
-      const { dataField, filter } = column;
+    /**
+     * filter the table like below:
+     * onFilter(column, filterType)(filterVal)
+     * @param {Object} column
+     * @param {String} filterType
+     * @param {String} filterVal - user input for filtering.
+     */
+    onFilter(column, filterType) {
+      return (filterVal) => {
+        const { store, columns } = this.props;
+        const currFilters = Object.assign({}, this.state.currFilters);
+        const { dataField, filter } = column;
 
-      if (!_.isDefined(filterVal) || filterVal === '') {
-        delete currFilters[dataField];
-      } else {
-        // select default comparator is EQ, others are LIKE
-        const {
-          comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
-          caseSensitive = false
-        } = filter.props;
-        currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
-      }
-      store.filters = currFilters;
+        if (!_.isDefined(filterVal) || filterVal === '') {
+          delete currFilters[dataField];
+        } else {
+          // select default comparator is EQ, others are LIKE
+          const {
+            comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
+            caseSensitive = false
+          } = filter.props;
+          currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
+        }
 
-      if (this.isRemoteFiltering() || this.isRemotePagination()) {
-        this.handleRemoteFilterChange();
-        // when remote filtering is enable, dont set currFilters state
-        // in the componentWillReceiveProps, 
-        // it's the key point that we can know the filter is changed
-        return;
-      }
+        store.filters = currFilters;
 
-      store.filteredData = filters(store, columns, _)(currFilters);
-      this.setState(() => ({ currFilters, isDataChanged: true }));
+        if (this.isRemoteFiltering() || this.isRemotePagination()) {
+          this.handleRemoteFilterChange();
+          // when remote filtering is enable, dont set currFilters state
+          // in the componentWillReceiveProps,
+          // it's the key point that we can know the filter is changed
+          return;
+        }
+
+        store.filteredData = filters(store, columns, _)(currFilters);
+        this.setState(() => ({ currFilters, isDataChanged: true }));
+      };
     }
 
     render() {

packages/react-bootstrap-table2-filter/test/components/number.test.js

@@ -9,7 +9,11 @@ import * as Comparator from '../../src/comparison';
 
 describe('Number Filter', () => {
   let wrapper;
+
+  // onFilter(x)(y) = filter result
   const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
   const column = {
     dataField: 'price',
     text: 'Product Price'
@@ -17,6 +21,9 @@ describe('Number Filter', () => {
 
   afterEach(() => {
     onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
   });
 
   describe('initialization', () => {
@@ -90,6 +97,36 @@ describe('Number Filter', () => {
     });
   });
 
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const comparator = Comparator.EQ;
+    const number = 123;
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <NumberFilter onFilter={ onFilter } column={ column } getFilter={ getFilter } />
+      );
+
+      programmaticallyFilter({ comparator, number });
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith({ comparator, number })).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(wrapper.state().isSelected).toBeTruthy();
+    });
+  });
+
   describe('when defaultValue.number and defaultValue.comparator props is defined', () => {
     const number = 203;
     const comparator = Comparator.EQ;
@@ -110,8 +147,9 @@ describe('Number Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(
-        column, { number: `${number}`, comparator }, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith({ number: `${number}`, comparator })).toBeTruthy();
     });
   });
 

packages/react-bootstrap-table2-filter/test/components/select.test.js

@@ -9,19 +9,27 @@ import { FILTER_TYPE } from '../../src/const';
 describe('Select Filter', () => {
   let wrapper;
   let instance;
+
+  // onFilter(x)(y) = filter result
   const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
   const column = {
     dataField: 'quality',
     text: 'Product Quality'
   };
+
   const options = {
     0: 'Bad',
     1: 'Good',
-    2: 'Unknow'
+    2: 'Unknown'
   };
 
   afterEach(() => {
     onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
   });
 
   describe('initialization', () => {
@@ -83,11 +91,48 @@ describe('Select Filter', () => {
 
       it('should calling onFilter on componentDidMount', () => {
         expect(onFilter.calledOnce).toBeTruthy();
-        expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+        expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
       });
     });
   });
 
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const filterValue = 'foo';
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <SelectFilter
+          onFilter={ onFilter }
+          column={ column }
+          options={ options }
+          getFilter={ getFilter }
+        />
+      );
+      instance = wrapper.instance();
+
+      programmaticallyFilter(filterValue);
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterValue)).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(instance.state.isSelected).toBeTruthy();
+    });
+  });
+
   describe('when placeholder is defined', () => {
     const placeholder = 'test';
     beforeEach(() => {
@@ -170,8 +215,9 @@ describe('Select Filter', () => {
 
       it('should update', () => {
         expect(onFilter.callCount).toBe(2);
-        expect(onFilter.calledWith(
-          column, instance.props.defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
       });
     });
 
@@ -198,8 +244,9 @@ describe('Select Filter', () => {
 
       it('should update', () => {
         expect(onFilter.callCount).toBe(2);
-        expect(onFilter.calledWith(
-          column, instance.props.defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
       });
     });
   });
@@ -226,7 +273,9 @@ describe('Select Filter', () => {
 
       it('should calling onFilter correctly', () => {
         expect(onFilter.callCount).toBe(2);
-        expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
       });
     });
 
@@ -249,6 +298,7 @@ describe('Select Filter', () => {
 
       it('should calling onFilter correctly', () => {
         expect(onFilter.callCount).toBe(1);
+        expect(onFilterFirstReturn.callCount).toBe(1);
       });
     });
   });
@@ -268,8 +318,10 @@ describe('Select Filter', () => {
     });
 
     it('should calling onFilter correctly', () => {
-      expect(onFilter.callCount).toBe(1);
-      expect(onFilter.calledWith(column, value, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(value)).toBeTruthy();
     });
   });
 
@@ -289,8 +341,10 @@ describe('Select Filter', () => {
     });
 
     it('should calling onFilter correctly', () => {
-      expect(onFilter.callCount).toBe(1);
-      expect(onFilter.calledWith(column, event.target.value, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(event.target.value)).toBeTruthy();
     });
   });
 });

packages/react-bootstrap-table2-filter/test/components/text.test.js

@@ -9,7 +9,11 @@ jest.useFakeTimers();
 describe('Text Filter', () => {
   let wrapper;
   let instance;
+
+  // onFilter(x)(y) = filter result
   const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
   const column = {
     dataField: 'price',
     text: 'Price'
@@ -17,6 +21,9 @@ describe('Text Filter', () => {
 
   afterEach(() => {
     onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
   });
 
   describe('initialization', () => {
@@ -58,7 +65,39 @@ describe('Text Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
+    });
+  });
+
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const filterValue = 'foo';
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <TextFilter onFilter={ onFilter } column={ column } getFilter={ getFilter } />
+      );
+      instance = wrapper.instance();
+
+      programmaticallyFilter(filterValue);
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterValue)).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(instance.state.value).toEqual(filterValue);
     });
   });
 
@@ -114,7 +153,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter correctly when props.defaultValue is changed', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, nextDefaultValue, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(nextDefaultValue)).toBeTruthy();
     });
   });
 
@@ -133,8 +174,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter correctly', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(
-        column, instance.props.defaultValue, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
     });
   });
 
@@ -154,7 +196,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter correctly', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, filterText, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterText)).toBeTruthy();
     });
   });
 

packages/react-bootstrap-table2-filter/test/filter.test.js

@@ -42,6 +42,19 @@ describe('filter', () => {
       filterFn = filters(store, columns, _);
     });
 
+    describe('when filter value is not a String', () => {
+      it('should transform to string and do the filter', () => {
+        currFilters.name = {
+          filterVal: 3,
+          filterType: FILTER_TYPE.TEXT
+        };
+
+        const result = filterFn(currFilters);
+        expect(result).toBeDefined();
+        expect(result).toHaveLength(2);
+      });
+    });
+
     describe(`when default comparator is ${LIKE}`, () => {
       it('should returning correct result', () => {
         currFilters.name = {

packages/react-bootstrap-table2-filter/test/wrapper.test.js

@@ -167,14 +167,14 @@ describe('Wrapper', () => {
 
       it('should setting store object correctly', () => {
         filterVals.forEach((filterVal) => {
-          instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+          instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
           expect(props.store.filtering).toBeFalsy();
         });
       });
 
       it('should setting state correctly', () => {
         filterVals.forEach((filterVal) => {
-          instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+          instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
           expect(instance.state.isDataChanged).toBeTruthy();
           expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
         });
@@ -185,12 +185,12 @@ describe('Wrapper', () => {
       const filterVal = '3';
 
       it('should setting store object correctly', () => {
-        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
         expect(props.store.filters).toEqual(instance.state.currFilters);
       });
 
       it('should setting state correctly', () => {
-        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
       });
@@ -203,7 +203,7 @@ describe('Wrapper', () => {
         props = createTableProps();
         props.remote = { filter: true };
         createFilterWrapper(props);
-        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
       });
 
       it('should not setting store object correctly', () => {
@@ -222,27 +222,27 @@ describe('Wrapper', () => {
 
     describe('combination', () => {
       it('should setting store object correctly', () => {
-        instance.onFilter(props.columns[1], '3', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('3');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
-        instance.onFilter(props.columns[1], '2', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('2');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
-        instance.onFilter(props.columns[2], '2', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('2');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
 
-        instance.onFilter(props.columns[2], '', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
-        instance.onFilter(props.columns[1], '', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(0);

packages/react-bootstrap-table2-paginator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-paginator/src/page-resolver.js

@@ -1,4 +1,6 @@
 /* eslint no-mixed-operators: 0 */
+import Const from './const';
+
 export default ExtendBase =>
   class PageResolver extends ExtendBase {
     backToPrevPage() {
@@ -27,6 +29,23 @@ export default ExtendBase =>
       return pageStartIndex + totalPages - 1;
     }
 
+    calculateFromTo() {
+      const {
+        dataSize,
+        currPage,
+        currSizePerPage,
+        pageStartIndex
+      } = this.props;
+      const offset = Math.abs(Const.PAGE_START_INDEX - pageStartIndex);
+
+      let from = ((currPage - pageStartIndex) * currSizePerPage);
+      from = dataSize === 0 ? 0 : from + 1;
+      let to = Math.min((currSizePerPage * (currPage + offset) - 1), dataSize);
+      if (to >= dataSize) to -= 1;
+
+      return [from, to];
+    }
+
     calculatePages(
       totalPages = this.state.totalPages,
       lastPage = this.state.lastPage) {

packages/react-bootstrap-table2-paginator/src/pagination-total.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PaginationTotal = props => (
+  <span>
+    &nbsp;Showing rows { props.from } to&nbsp;{ props.to + 1 } of&nbsp;{ props.dataSize }
+  </span>
+);
+
+PaginationTotal.propTypes = {
+  from: PropTypes.number.isRequired,
+  to: PropTypes.number.isRequired,
+  dataSize: PropTypes.number.isRequired
+};
+
+export default PaginationTotal;

packages/react-bootstrap-table2-paginator/src/pagination.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import pageResolver from './page-resolver';
 import SizePerPageDropDown from './size-per-page-dropdown';
 import PaginationList from './pagination-list';
+import PaginationTotal from './pagination-total';
 import Const from './const';
 
 class Pagination extends pageResolver(Component) {
@@ -89,13 +90,14 @@ class Pagination extends pageResolver(Component) {
   render() {
     const { totalPages, lastPage, dropdownOpen: open } = this.state;
     const {
+      showTotal,
       sizePerPageList,
       currSizePerPage,
       hideSizePerPage,
       hidePageListOnlyOnePage
     } = this.props;
     const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage);
-
+    const [from, to] = this.calculateFromTo();
     const pageListClass = cs(
       'react-bootstrap-table-pagination-list',
       'col-md-6 col-xs-6 col-sm-6 col-lg-6', {
@@ -117,6 +119,14 @@ class Pagination extends pageResolver(Component) {
                 />
               ) : null
           }
+          {
+            showTotal ?
+              <PaginationTotal
+                from={ from }
+                to={ to }
+                dataSize={ this.props.dataSize }
+              /> : null
+          }
         </div>
         <div className={ pageListClass }>
           <PaginationList pages={ pages } onPageChange={ this.handleChangePage } />

packages/react-bootstrap-table2-paginator/src/wrapper.js

@@ -145,6 +145,7 @@ export default (Base, {
           alwaysShowAllBtns={ alwaysShowAllBtns }
           hideSizePerPage={ hideSizePerPage }
           hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
+          showTotal={ options.showTotal }
           firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
           prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
           nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }

packages/react-bootstrap-table2-paginator/test/page-resolver.test.js

@@ -110,6 +110,19 @@ describe('PageResolver', () => {
     });
   });
 
+  describe('calculateFromTo', () => {
+    const props = createMockProps();
+    beforeEach(() => {
+      const mockElement = React.createElement(MockComponent, props, null);
+      wrapper = shallow(mockElement);
+    });
+
+    it('should return correct array with from and to value', () => {
+      const instance = wrapper.instance();
+      expect(instance.calculateFromTo()).toEqual([1, props.currSizePerPage - 1]);
+    });
+  });
+
   describe('calculateTotalPage', () => {
     const props = createMockProps();
 

packages/react-bootstrap-table2-paginator/test/wrapper.test.js

@@ -111,6 +111,7 @@ describe('Wrapper', () => {
       expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
       expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
       expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+      expect(pagination.prop('showTotal')).toEqual(undefined);
     });
 
     describe('componentWillReceiveProps', () => {
@@ -247,6 +248,20 @@ describe('Wrapper', () => {
     });
   });
 
+  describe('when options.showTotal is defined', () => {
+    const props = createTableProps({ options: { showTotal: true } });
+    beforeEach(() => {
+      createPaginationWrapper(props);
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(wrapper.length).toBe(1);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('showTotal')).toBeTruthy();
+    });
+  });
+
   describe('when options.pageStartIndex is defined', () => {
     const pageStartIndex = -1;
     const props = createTableProps({ options: { pageStartIndex } });

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2/src/header-cell.js

@@ -127,11 +127,13 @@ HeaderCell.propTypes = {
     sort: PropTypes.bool,
     sortFunc: PropTypes.func,
     onSort: PropTypes.func,
+    editor: PropTypes.object,
     editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     editorStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     editorClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    editorRenderer: PropTypes.func,
     validator: PropTypes.func,
     filter: PropTypes.object,
     filterValue: PropTypes.func

packages/react-bootstrap-table2/src/row-event-delegater.js

@@ -2,6 +2,7 @@ import _ from './utils';
 
 const events = [
   'onClick',
+  'onDoubleClick',
   'onMouseEnter',
   'onMouseLeave'
 ];
@@ -47,7 +48,7 @@ export default ExtendBase =>
           }
           if (selectable) {
             const key = _.get(row, keyField);
-            onRowSelect(key, !selected, rowIndex);
+            onRowSelect(key, !selected, rowIndex, e);
           }
         };
 

packages/react-bootstrap-table2/src/row-selection/selection-cell.js

@@ -28,7 +28,7 @@ export default class SelectionCell extends Component {
     return nextProps.selected !== selected;
   }
 
-  handleClick() {
+  handleClick(e) {
     const {
       mode: inputType,
       rowKey,
@@ -46,7 +46,7 @@ export default class SelectionCell extends Component {
       ? true
       : !selected;
 
-    onRowSelect(rowKey, checked, rowIndex);
+    onRowSelect(rowKey, checked, rowIndex, e);
   }
 
   render() {

packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js

@@ -44,10 +44,10 @@ export default class SelectionHeaderCell extends Component {
     return nextProps.checkedStatus !== checkedStatus;
   }
 
-  handleCheckBoxClick() {
+  handleCheckBoxClick(e) {
     const { onAllRowsSelect } = this.props;
 
-    onAllRowsSelect();
+    onAllRowsSelect(e);
   }
 
   render() {

packages/react-bootstrap-table2/src/row-selection/wrapper.js

@@ -41,7 +41,7 @@ export default Base =>
      * @param {String} rowKey - row key of what was selected.
      * @param {Boolean} checked - next checked status of input button.
      */
-    handleRowSelect(rowKey, checked, rowIndex) {
+    handleRowSelect(rowKey, checked, rowIndex, e) {
       const { selectRow: { mode, onSelect }, store } = this.props;
       const { ROW_SELECT_SINGLE } = Const;
 
@@ -59,7 +59,7 @@ export default Base =>
 
       if (onSelect) {
         const row = getRowByRowId(store)(rowKey);
-        onSelect(row, checked, rowIndex);
+        onSelect(row, checked, rowIndex, e);
       }
 
       this.setState(() => ({
@@ -68,18 +68,16 @@ export default Base =>
     }
 
     /**
-     * handle all rows selection on header cell by store.selected or given specific result.
-     * @param {Boolean} option - customized result for all rows selection
+     * handle all rows selection on header cell by store.selected
      */
-    handleAllRowsSelect(option) {
+    handleAllRowsSelect(e) {
       const { store, selectRow: {
         onSelectAll,
         nonSelectable
       } } = this.props;
       const selected = isAnySelectedRow(store)(nonSelectable);
 
-      // set next status of all row selected by store.selected or customizing by user.
-      const result = option || !selected;
+      const result = !selected;
 
       const currSelected = result ?
         selectableKeys(store)(nonSelectable) :
@@ -89,7 +87,7 @@ export default Base =>
       store.selected = currSelected;
 
       if (onSelectAll) {
-        onSelectAll(result, getSelectedRows(store));
+        onSelectAll(result, getSelectedRows(store), e);
       }
 
       this.setState(() => ({

packages/react-bootstrap-table2/test/row-selection/wrapper.test.js

@@ -162,14 +162,6 @@ describe('RowSelectionWrapper', () => {
       wrapper.instance().handleAllRowsSelect();
       expect(wrapper.state('selectedRowKeys')).toEqual([]);
     });
-
-    it('call handleAllRowsSelect function with a bool args should setting correct state.selectedRowKeys', () => {
-      wrapper.instance().handleAllRowsSelect(true);
-      expect(wrapper.state('selectedRowKeys')).toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
-
-      wrapper.instance().handleAllRowsSelect(false);
-      expect(wrapper.state('selectedRowKeys')).toEqual([]);
-    });
   });
 
   describe('when selectRow.onSelect is defined', () => {
@@ -219,13 +211,14 @@ describe('RowSelectionWrapper', () => {
     });
 
     it('selectRow.onSelect callback should be called correctly when calling handleRowSelect function', () => {
-      wrapper.instance().handleAllRowsSelect();
+      const e = {};
+      wrapper.instance().handleAllRowsSelect(e);
       expect(onSelectAllCallBack.callCount).toEqual(1);
-      expect(onSelectAllCallBack.calledWith(true, data)).toBeTruthy();
+      expect(onSelectAllCallBack.calledWith(true, data, e)).toBeTruthy();
 
-      wrapper.instance().handleAllRowsSelect();
+      wrapper.instance().handleAllRowsSelect(e);
       expect(onSelectAllCallBack.callCount).toEqual(2);
-      expect(onSelectAllCallBack.calledWith(false, [])).toBeTruthy();
+      expect(onSelectAllCallBack.calledWith(false, [], e)).toBeTruthy();
     });
   });
 });

webpack.prod.config.babel.js

@@ -1,64 +0,0 @@
-import * as path from 'path';
-import webpack from 'webpack';
-
-module.exports = {
-  entry: {
-    'react-bootstrap-table2/dist/react-bootstrap-table2': './packages/react-bootstrap-table2/index.js',
-    'react-bootstrap-table2/dist/react-bootstrap-table2.min': './packages/react-bootstrap-table2/index.js',
-    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': './packages/react-bootstrap-table2-editor/index.js',
-    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': './packages/react-bootstrap-table2-editor/index.js',
-    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': './packages/react-bootstrap-table2-filter/index.js',
-    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': './packages/react-bootstrap-table2-filter/index.js',
-    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': './packages/react-bootstrap-table2-overlay/index.js',
-    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': './packages/react-bootstrap-table2-overlay/index.js',
-    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': './packages/react-bootstrap-table2-paginator/index.js',
-    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': './packages/react-bootstrap-table2-paginator/index.js'
-  },
-  devtool: 'source-map',
-  output: {
-    path: path.join(__dirname, 'packages'),
-    filename: '[name].js',
-    library: 'ReactBootstrapTable',
-    libraryTarget: 'umd'
-  },
-  externals: [{
-    'react': {
-      root: 'React',
-      commonjs2: 'react',
-      commonjs: 'react',
-      amd: 'react'
-    }
-  }, {
-    'react-dom': {
-      root: 'ReactDOM',
-      commonjs2: 'react-dom',
-      commonjs: 'react-dom',
-      amd: 'react-dom'
-    }
-  }],
-  module: {
-    rules: [{
-      enforce: 'pre',
-      test: /\.js?$/,
-      exclude: /node_modules/,
-      loader: 'eslint-loader'
-    }, {
-      test: /\.js?$/,
-      use: ['babel-loader'],
-      exclude: /node_modules/
-    }]
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.SourceMapDevToolPlugin(),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.optimize.AggressiveMergingPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      include: /\.min\.js$/,
-      compress: { warnings: false }
-    })
-  ]
-};

webpack/editor.umd.babel.js

@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': './packages/react-bootstrap-table2-editor/index.js',
+    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': './packages/react-bootstrap-table2-editor/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Editor',
+    libraryTarget: 'umd'
+  }
+};

webpack/filter.umd.babel.js

@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': './packages/react-bootstrap-table2-filter/index.js',
+    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': './packages/react-bootstrap-table2-filter/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Filter',
+    libraryTarget: 'umd'
+  }
+};

webpack/next.umd.babel.js

@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2/dist/react-bootstrap-table-next': './packages/react-bootstrap-table2/index.js',
+    'react-bootstrap-table2/dist/react-bootstrap-table-next.min': './packages/react-bootstrap-table2/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2',
+    libraryTarget: 'umd'
+  }
+};

webpack/overlay.umd.babel.js

@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': './packages/react-bootstrap-table2-overlay/index.js',
+    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': './packages/react-bootstrap-table2-overlay/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Overlay',
+    libraryTarget: 'umd'
+  }
+};

webpack/paginator.umd.babel.js

@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': './packages/react-bootstrap-table2-paginator/index.js',
+    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': './packages/react-bootstrap-table2-paginator/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Paginator',
+    libraryTarget: 'umd'
+  }
+};

webpack/webpack.umd.babel.js

@@ -0,0 +1,45 @@
+import webpack from 'webpack';
+
+module.exports = {
+  devtool: 'source-map',
+  externals: [{
+    'react': {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react'
+    }
+  }, {
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom'
+    }
+  }],
+  module: {
+    rules: [{
+      enforce: 'pre',
+      test: /\.js?$/,
+      exclude: /node_modules/,
+      loader: 'eslint-loader'
+    }, {
+      test: /\.js?$/,
+      use: ['babel-loader'],
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.SourceMapDevToolPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.AggressiveMergingPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      include: /\.min\.js$/,
+      compress: { warnings: false }
+    })
+  ]
+};