Publish

- react-bootstrap-table2-example@0.1.10
 - react-bootstrap-table2-filter@0.3.0
 - react-bootstrap-table2-paginator@0.1.5
 - react-bootstrap-table-next@0.1.14

docs/README.md

@@ -202,6 +202,7 @@ paginator({
   totalSize, // Total data size. It's necessary when remote is enabled
   pageStartIndex: 0, // first page will be 0, default is 1
   paginationSize: 3,  // the pagination bar size, default is 5
+  showTotal: true, // display pagination information
   sizePerPageList: [ {
     text: '5', value: 5
   }, {
@@ -223,6 +224,7 @@ paginator({
   hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
   onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
   onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
+  paginationTotalRenderer: (from, to, size) => { ... }  // custom the pagination total
 })
 ```
 

docs/columns.md

@@ -648,6 +648,8 @@ Configure `column.filter` will able to setup a column level filter on the header
 
 * Text(`textFilter`)
 * Select(`selectFilter`)
+* Number(`numberFilter`)
+* Date(`dateFilter`)
 
 We have a quick example to show you how to use `column.filter`:
 

docs/migration.md

@@ -72,7 +72,7 @@ Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](ht
 Please see [Work with selection](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-row-select.html).   
 Please see [available selectRow configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html).   
 
-No huge change for row selection, but can not custom the selection column currently. Coming soon!!!
+No huge change for row selection.
 
 ## Column Filter
 
@@ -82,14 +82,14 @@ Please see [available filter configuration](https://react-bootstrap-table.github
 - [x] Text Filter
 - [x] Custom Text Filter
 - [x] Remote Filter
-- [ ] Custom Filter Component
+- [x] Custom Filter Component
 - [ ] Regex Filter
 - [x] Select Filter
 - [x] Custom Select Filter
 - [X] Number Filter
-- [ ] Date Filter
+- [X] Date Filter
 - [ ] Array Filter
-- [ ] Programmatically Filter
+- [X] Programmatically Filter
 
 Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   
 

docs/row-selection.md

@@ -16,6 +16,8 @@
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
 * [hideSelectColumn](#hideSelectColumn)
+* [selectionRenderer](#selectionRenderer)
+* [selectionHeaderRenderer](#selectionHeaderRenderer)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -156,6 +158,34 @@ const selectRow = {
 };
 ```
 
+### <a name='selectionRenderer'>selectRow.selectionRenderer - [Function]</a>
+Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionRenderer: ({ mode, checked, disabled }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='selectionHeaderRenderer'>selectRow.selectionHeaderRenderer - [Function]</a>
+Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionHeaderRenderer: ({ mode, checked, indeterminate }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
 ### <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`, `rowIndex` and `e`.

packages/react-bootstrap-table2-example/examples/column-filter/advance-custom-filter.js

@@ -0,0 +1,184 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter, Comparator, FILTER_TYPES } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.state = { value: 2100 };
+  }
+  onChange(e) {
+    this.setState({ value: e.target.value });
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  filter() {
+    this.props.onFilter({
+      number: this.getValue(),
+      comparator: this.select.value
+    });
+  }
+  render() {
+    return [
+      <input
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="2100"
+        max="2110"
+        onChange={ this.onChange }
+      />,
+      <p
+        key="show"
+        ref={ node => this.showValue = node }
+        style={ { textAlign: 'center' } }
+      >
+        { this.state.value }
+      </p>,
+      <select
+        key="select"
+        ref={ node => this.select = node }
+        className="form-control"
+      >
+        <option value={ Comparator.GT }>&gt;</option>
+        <option value={ Comparator.EQ }>=</option>
+        <option value={ Comparator.LT }>&lt;</option>
+      </select>,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { `Filter ${this.props.column.text}` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter({
+    type: FILTER_TYPES.NUMBER // ask react-bootstrap-table to filter data as number 
+  }),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter, Comparator, FILTER_TYPES } from 'react-bootstrap-table2-filter';
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.state = { value: 2100 };
+  }
+  onChange(e) {
+    this.setState({ value: e.target.value });
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  filter() {
+    this.props.onFilter({
+      number: this.getValue(),
+      comparator: this.select.value
+    });
+  }
+  render() {
+    return [
+      <input
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="2100"
+        max="2110"
+        onChange={ this.onChange }
+      />,
+      <p
+        key="show"
+        ref={ node => this.showValue = node }
+        style={ { textAlign: 'center' } }
+      >
+        { this.state.value }
+      </p>,
+      <select
+        key="select"
+        ref={ node => this.select = node }
+        className="form-control"
+      >
+        <option value={ Comparator.GT }>&gt;</option>
+        <option value={ Comparator.EQ }>=</option>
+        <option value={ Comparator.LT }>&lt;</option>
+      </select>,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { \`Filter $\{this.props.column.text}\` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter({
+    type: FILTER_TYPES.NUMBER // ask react-bootstrap-table to filter data as number 
+  }),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-date-filter.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    delay: 400,
+    placeholder: 'custom placeholder',
+    withoutEmptyComparatorOption: true,
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+    style: { display: 'inline-grid' },
+    className: 'custom-datefilter-class',
+    comparatorStyle: { backgroundColor: 'antiquewhite' },
+    comparatorClassName: 'custom-comparator-class',
+    dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+    dateClassName: 'custom-date-class'
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    delay: 400,
+    placeholder: 'custom placeholder',
+    withoutEmptyComparatorOption: true,
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+    style: { display: 'inline-grid' },
+    className: 'custom-datefilter-class',
+    comparatorStyle: { backgroundColor: 'antiquewhite' },
+    comparatorClassName: 'custom-comparator-class',
+    dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+    dateClassName: 'custom-date-class'
+  })
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  filter={ filterFactory() }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,128 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+  }
+  getValue() {
+    return this.input.value;
+  }
+  filter() {
+    this.props.onFilter(this.getValue());
+  }
+  render() {
+    return [
+      <input
+        key="input"
+        ref={ node => this.input = node }
+        type="text"
+        placeholder="Input price"
+      />,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { `Find ${this.props.column.text}` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter(),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter } from 'react-bootstrap-table2-filter';
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+  }
+  getValue() {
+    return this.input.value;
+  }
+  filter() {
+    this.props.onFilter(this.getValue());
+  }
+  render() {
+    return [
+      <input
+        key="input"
+        ref={ node => this.input = node }
+        type="text"
+        placeholder="Input price"
+      />,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { \`Filter $\{this.props.column.text}\` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter(),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/date-filter-default-value.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
+  })
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  filter={ filterFactory() }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter()
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  filter={ filterFactory() }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+let inStockDateFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    getFilter: (filter) => {
+      // inStockDateFilter was assigned once the component has been mounted.
+      inStockDateFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  inStockDateFilter({
+    date: new Date(2018, 0, 1),
+    comparator: Comparator.GT
+  });
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+let inStockDateFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    getFilter: (filter) => {
+      // inStockDateFilter was assigned once the component has been mounted.
+      inStockDateFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  inStockDateFilter({
+    date: new Date(2018, 0, 1),
+    comparator: Comparator.GT
+  });
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter InStock Date columns which is greater than 2018.01.01 </button>
+
+    <BootstrapTable keyField='id' data={ stocks } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter InStock Date columns which is greater than 2018.01.01 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -24,6 +24,12 @@ import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
 // ...
 
+const customTotal = (from, to, size) => (
+  <span className="react-bootstrap-table-pagination-total">
+    Showing { from } to { to } of { size } Results
+  </span>
+);
+
 const options = {
   paginationSize: 4,
   pageStartIndex: 0,
@@ -39,6 +45,8 @@ const options = {
   prePageTitle: 'Pre page',
   firstPageTitle: 'Next page',
   lastPageTitle: 'Last page',
+  showTotal: true,
+  paginationTotalRenderer: customTotal,
   sizePerPageList: [{
     text: '5', value: 5
   }, {
@@ -50,11 +58,18 @@ const options = {
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginationFactory(options) } />
 `;
+
+const customTotal = (from, to, size) => (
+  <span className="react-bootstrap-table-pagination-total">
+    Showing { from } to { to } of { size } Results
+  </span>
+);
+
 const options = {
   paginationSize: 4,
   pageStartIndex: 0,
-  // alwaysShowAllBtns: true // Always show next and previous button
-  // withFirstAndLast: false // Hide the going to First and Last page button
+  // alwaysShowAllBtns: true, // Always show next and previous button
+  // withFirstAndLast: false, // Hide the going to First and Last page button
   // hideSizePerPage: true, // Hide the sizePerPage dropdown always
   // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
   firstPageText: 'First',
@@ -66,6 +81,7 @@ const options = {
   firstPageTitle: 'Next page',
   lastPageTitle: 'Last page',
   showTotal: true,
+  paginationTotalRenderer: customTotal,
   sizePerPageList: [{
     text: '5', value: 5
   }, {

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

@@ -0,0 +1,107 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-param-reassign: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'radio',
+  clickToSelect: true,
+  selectionHeaderRenderer: () => 'X',
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+    <input
+      type="checkbox"
+      ref={ (input) => {
+        if (input) input.indeterminate = indeterminate;
+      } }
+      { ...rest }
+    />
+  ),
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true,
+  selectionHeaderRenderer: () => 'X',
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+    <input
+      type="checkbox"
+      ref={ (input) => {
+        if (input) input.indeterminate = indeterminate;
+      } }
+      { ...rest }
+    />
+  ),
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

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

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

@@ -48,9 +48,15 @@ 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 DateFilter from 'examples/column-filter/date-filter';
+import DateFilterWithDefaultValue from 'examples/column-filter/date-filter-default-value';
+import CustomDateFilter from 'examples/column-filter/custom-date-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';
+import ProgrammaticallyDateFilter from 'examples/column-filter/programmatically-date-filter';
+import CustomFilter from 'examples/column-filter/custom-filter';
+import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -95,6 +101,7 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
+import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
@@ -171,13 +178,19 @@ storiesOf('Column Filter', module)
   .add('Select Filter with Comparator', () => <SelectFilterComparator />)
   .add('Number Filter', () => <NumberFilter />)
   .add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
+  .add('Date Filter', () => <DateFilter />)
+  .add('Date Filter with Default Value', () => <DateFilterWithDefaultValue />)
   .add('Custom Text Filter', () => <CustomTextFilter />)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)
+  .add('Custom Date Filter', () => <CustomDateFilter />)
   .add('Custom Filter Value', () => <CustomFilterValue />)
-  .add('Programmatically Text Filter ', () => <ProgrammaticallyTextFilter />)
-  .add('Programmatically Select Filter ', () => <ProgrammaticallySelectFilter />)
-  .add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />);
+  .add('Programmatically Text Filter', () => <ProgrammaticallyTextFilter />)
+  .add('Programmatically Select Filter', () => <ProgrammaticallySelectFilter />)
+  .add('Programmatically Number Filter', () => <ProgrammaticallyNumberFilter />)
+  .add('Programmatically Date Filter', () => <ProgrammaticallyDateFilter />)
+  .add('Custom Filter', () => <CustomFilter />)
+  .add('Advance Custom Filter', () => <AdvanceCustomFilter />);
 
 storiesOf('Work on Rows', module)
   .add('Customize Row Style', () => <RowStyleTable />)
@@ -222,6 +235,7 @@ storiesOf('Row Selection', module)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)

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

@@ -19,6 +19,8 @@ You can get all types of filters via import and these filters are a factory func
 * TextFilter
 * SelectFilter
 * NumberFilter
+* DateFilter
+* CustomFilter
 * **Coming soon!**
 
 ## Add CSS
@@ -149,4 +151,93 @@ const numberFilter = numberFilter({
 })
 
 // omit...
-```
+```
+
+## Date Filter
+
+```js
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+  dataField: 'date',
+  text: 'Product date',
+  filter: dateFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+> **Notes:** date filter accept a Javascript Date object in your raw data.
+
+Date filter is same as other filter, you can custom the date filter via `dateFilter` factory function:
+
+```js
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const dateFilter = dateFilter({
+  delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
+  placeholder: 'custom placeholder',  // placeholder for date input
+  withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+  style: { display: 'inline-grid' },  // custom the style on date filter
+  className: 'custom-dateFilter-class',  // custom the class on date filter
+  comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+  comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+  dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
+  dateClassName: 'custom-date-class',  // custom the class on date input
+  defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
+})
+
+// omit...
+```
+
+## Custom Filter
+
+```js
+import filterFactory, { customFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+  dataField: 'date',
+  text: 'Product Name',
+  filter: customFilter(),
+  filterRenderer: (onFilter, column) => .....
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+In custom filter case, you are suppose to finish following two steps:
+1. Call `customFilter` and pass to `column.filter`
+2. Give `column.filterRenderer` as a callback function and return your custom filter element.
+
+### column.filterRenderer
+
+This function will pass two argument to you:
+1. `onFilter`: call it to trigger filter when you need.
+2. `column`: Just the column object!
+
+In the end, please remember to return your custom filter element!
+
+### customFilter
+
+`customFilter` function just same as `textFilter`, `selectFilter` etc, it is for customization reason. However, in the custom filter case, there's only one props is valid: `type`
+
+
+```js
+import filterFactory, { FILTER_TYPES } from 'react-bootstrap-table2-filter';
+
+const customFilter = customFilter({
+  type: FILTER_TYPES.NUMBER,  // default is FILTER_TYPES.TEXT
+})
+```
+
+`type` is a way to ask `react-bootstrap-table` to filter you data as number, select, date or normal text.
+
+### FILTER_TYPES
+
+Following properties is valid in `FILTER_TYPES`:
+* TEXT
+* SELECT
+* NUMBER
+* DATE

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

@@ -1,14 +1,18 @@
 import TextFilter from './src/components/text';
 import SelectFilter from './src/components/select';
 import NumberFilter from './src/components/number';
+import DateFilter from './src/components/date';
 import wrapperFactory from './src/wrapper';
 import * as Comparison from './src/comparison';
+import { FILTER_TYPE } from './src/const';
 
 export default (options = {}) => ({
   wrapperFactory,
   options
 });
 
+export const FILTER_TYPES = FILTER_TYPE;
+
 export const Comparator = Comparison;
 
 export const textFilter = (props = {}) => ({
@@ -25,3 +29,12 @@ export const numberFilter = (props = {}) => ({
   Filter: NumberFilter,
   props
 });
+
+export const dateFilter = (props = {}) => ({
+  Filter: DateFilter,
+  props
+});
+
+export const customFilter = (props = {}) => ({
+  props
+});

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

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

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

@@ -0,0 +1,209 @@
+/* eslint react/require-default-props: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+/* eslint no-return-assign: 0 */
+/* eslint prefer-template: 0 */
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+
+import * as Comparator from '../comparison';
+import { FILTER_TYPE } from '../const';
+
+const legalComparators = [
+  Comparator.EQ,
+  Comparator.NE,
+  Comparator.GT,
+  Comparator.GE,
+  Comparator.LT,
+  Comparator.LE
+];
+
+function dateParser(d) {
+  return `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`;
+}
+
+class DateFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.timeout = null;
+    this.comparators = props.comparators || legalComparators;
+    this.applyFilter = this.applyFilter.bind(this);
+    this.onChangeDate = this.onChangeDate.bind(this);
+    this.onChangeComparator = this.onChangeComparator.bind(this);
+  }
+
+  componentDidMount() {
+    const { getFilter } = this.props;
+    const comparator = this.dateFilterComparator.value;
+    const date = this.inputDate.value;
+    if (comparator && date) {
+      this.applyFilter(date, comparator);
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilter) {
+      getFilter((filterVal) => {
+        this.dateFilterComparator.value = filterVal.comparator;
+        this.inputDate.value = dateParser(filterVal.date);
+
+        this.applyFilter(filterVal.date, filterVal.comparator);
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) clearTimeout(this.timeout);
+  }
+
+  onChangeDate(e) {
+    const comparator = this.dateFilterComparator.value;
+    const filterValue = e.target.value;
+    this.applyFilter(filterValue, comparator);
+  }
+
+  onChangeComparator(e) {
+    const value = this.inputDate.value;
+    const comparator = e.target.value;
+    this.applyFilter(value, comparator);
+  }
+
+  getComparatorOptions() {
+    const optionTags = [];
+    const { withoutEmptyComparatorOption } = this.props;
+    if (!withoutEmptyComparatorOption) {
+      optionTags.push(<option key="-1" />);
+    }
+    for (let i = 0; i < this.comparators.length; i += 1) {
+      optionTags.push(
+        <option key={ i } value={ this.comparators[i] }>
+          { this.comparators[i] }
+        </option>
+      );
+    }
+    return optionTags;
+  }
+
+  getDefaultDate() {
+    let defaultDate = '';
+    const { defaultValue } = this.props;
+    if (defaultValue && defaultValue.date) {
+      // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
+      defaultDate = dateParser(new Date(defaultValue.date));
+    }
+    return defaultDate;
+  }
+
+  applyFilter(value, comparator) {
+    if (!comparator || !value) {
+      return;
+    }
+    const { column, onFilter, delay } = this.props;
+    const execute = () => {
+      const date = typeof value !== 'object' ? new Date(value) : value;
+      onFilter(column, FILTER_TYPE.DATE)({ date, comparator });
+    };
+    if (delay) {
+      this.timeout = setTimeout(() => { execute(); }, delay);
+    } else {
+      execute();
+    }
+  }
+
+  render() {
+    const {
+      placeholder,
+      column: { text },
+      style,
+      comparatorStyle,
+      dateStyle,
+      className,
+      comparatorClassName,
+      dateClassName,
+      defaultValue
+    } = this.props;
+
+    return (
+      <div
+        onClick={ e => e.stopPropagation() }
+        className={ `filter date-filter ${className}` }
+        style={ style }
+      >
+        <select
+          ref={ n => this.dateFilterComparator = n }
+          style={ comparatorStyle }
+          className={ `date-filter-comparator form-control ${comparatorClassName}` }
+          onChange={ this.onChangeComparator }
+          defaultValue={ defaultValue ? defaultValue.comparator : '' }
+        >
+          { this.getComparatorOptions() }
+        </select>
+        <input
+          ref={ n => this.inputDate = n }
+          className={ `filter date-filter-input form-control ${dateClassName}` }
+          style={ dateStyle }
+          type="date"
+          onChange={ this.onChangeDate }
+          placeholder={ placeholder || `Enter ${text}...` }
+          defaultValue={ this.getDefaultDate() }
+        />
+      </div>
+    );
+  }
+}
+
+DateFilter.propTypes = {
+  onFilter: PropTypes.func.isRequired,
+  column: PropTypes.object.isRequired,
+  delay: PropTypes.number,
+  defaultValue: PropTypes.shape({
+    date: PropTypes.oneOfType([PropTypes.object]),
+    comparator: PropTypes.oneOf([...legalComparators, ''])
+  }),
+  /* eslint consistent-return: 0 */
+  comparators: (props, propName) => {
+    if (!props[propName]) {
+      return;
+    }
+    for (let i = 0; i < props[propName].length; i += 1) {
+      let comparatorIsValid = false;
+      for (let j = 0; j < legalComparators.length; j += 1) {
+        if (legalComparators[j] === props[propName][i] || props[propName][i] === '') {
+          comparatorIsValid = true;
+          break;
+        }
+      }
+      if (!comparatorIsValid) {
+        return new Error(`Date comparator provided is not supported.
+          Use only ${legalComparators}`);
+      }
+    }
+  },
+  placeholder: PropTypes.string,
+  withoutEmptyComparatorOption: PropTypes.bool,
+  style: PropTypes.object,
+  comparatorStyle: PropTypes.object,
+  dateStyle: PropTypes.object,
+  className: PropTypes.string,
+  comparatorClassName: PropTypes.string,
+  dateClassName: PropTypes.string,
+  getFilter: PropTypes.func
+};
+
+DateFilter.defaultProps = {
+  delay: 0,
+  defaultValue: {
+    date: undefined,
+    comparator: ''
+  },
+  withoutEmptyComparatorOption: false,
+  comparators: legalComparators,
+  placeholder: undefined,
+  style: undefined,
+  className: '',
+  comparatorStyle: undefined,
+  comparatorClassName: '',
+  dateStyle: undefined,
+  dateClassName: ''
+};
+
+
+export default DateFilter;

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

@@ -1,3 +1,4 @@
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
 /* eslint react/require-default-props: 0 */
 /* eslint no-return-assign: 0 */
 
@@ -167,7 +168,11 @@ class NumberFilter extends Component {
     `;
 
     return (
-      <div className={ `filter number-filter ${className}` } style={ style }>
+      <div
+        onClick={ e => e.stopPropagation() }
+        className={ `filter number-filter ${className}` }
+        style={ style }
+      >
         <select
           ref={ n => this.numberFilterComparator = n }
           style={ comparatorStyle }

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

@@ -116,6 +116,7 @@ class SelectFilter extends Component {
         style={ style }
         className={ selectClass }
         onChange={ this.filter }
+        onClick={ e => e.stopPropagation() }
         defaultValue={ defaultValue !== undefined ? defaultValue : '' }
       >
         { this.getOptions() }

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

@@ -1,7 +1,8 @@
 export const FILTER_TYPE = {
   TEXT: 'TEXT',
   SELECT: 'SELECT',
-  NUMBER: 'NUMBER'
+  NUMBER: 'NUMBER',
+  DATE: 'DATE'
 };
 
 export const FILTER_DELAY = 500;

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

@@ -91,6 +91,102 @@ export const filterByNumber = _ => (
   })
 );
 
+export const filterByDate = _ => (
+  data,
+  dataField,
+  { filterVal: { comparator, date } },
+  customFilterValue
+) => {
+  if (!date || !comparator) return data;
+  const filterDate = date.getDate();
+  const filterMonth = date.getMonth();
+  const filterYear = date.getFullYear();
+
+  return data.filter((row) => {
+    let valid = true;
+    let cell = _.get(row, dataField);
+
+    if (customFilterValue) {
+      cell = customFilterValue(cell, row);
+    }
+
+    if (typeof cell !== 'object') {
+      cell = new Date(cell);
+    }
+
+    const targetDate = cell.getDate();
+    const targetMonth = cell.getMonth();
+    const targetYear = cell.getFullYear();
+
+
+    switch (comparator) {
+      case EQ: {
+        if (
+          filterDate !== targetDate ||
+          filterMonth !== targetMonth ||
+          filterYear !== targetYear
+        ) {
+          valid = false;
+        }
+        break;
+      }
+      case GT: {
+        if (cell <= date) {
+          valid = false;
+        }
+        break;
+      }
+      case GE: {
+        if (targetYear < filterYear) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth < filterMonth) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth === filterMonth &&
+          targetDate < filterDate) {
+          valid = false;
+        }
+        break;
+      }
+      case LT: {
+        if (cell >= date) {
+          valid = false;
+        }
+        break;
+      }
+      case LE: {
+        if (targetYear > filterYear) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth > filterMonth) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth === filterMonth &&
+          targetDate > filterDate) {
+          valid = false;
+        }
+        break;
+      }
+      case NE: {
+        if (
+          filterDate === targetDate &&
+          filterMonth === targetMonth &&
+          filterYear === targetYear
+        ) {
+          valid = false;
+        }
+        break;
+      }
+      default: {
+        console.error('Date comparator provided is not supported');
+        break;
+      }
+    }
+    return valid;
+  });
+};
+
 export const filterFactory = _ => (filterType) => {
   let filterFn;
   switch (filterType) {
@@ -101,6 +197,9 @@ export const filterFactory = _ => (filterType) => {
     case FILTER_TYPE.NUMBER:
       filterFn = filterByNumber(_);
       break;
+    case FILTER_TYPE.DATE:
+      filterFn = filterByDate(_);
+      break;
     default:
       filterFn = filterByText(_);
   }

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

@@ -20,6 +20,7 @@ export default (Base, {
       super(props);
       this.state = { currFilters: {}, isDataChanged: props.isDataChanged || false };
       this.onFilter = this.onFilter.bind(this);
+      this.onExternalFilter = this.onExternalFilter.bind(this);
     }
 
     componentWillReceiveProps({ isDataChanged, store, columns }) {
@@ -78,12 +79,19 @@ export default (Base, {
       };
     }
 
+    onExternalFilter(column, filterType) {
+      return (value) => {
+        this.onFilter(column, filterType)(value);
+      };
+    }
+
     render() {
       return (
         <Base
           { ...this.props }
           data={ this.props.store.data }
           onFilter={ this.onFilter }
+          onExternalFilter={ this.onExternalFilter }
           isDataChanged={ this.state.isDataChanged }
         />
       );

packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss

@@ -5,7 +5,8 @@
 .react-bootstrap-table > table > thead > tr > th .select-filter option[value=''],
 .react-bootstrap-table > table > thead > tr > th .select-filter.placeholder-selected,
 .react-bootstrap-table > table > thead > tr > th .filter::-webkit-input-placeholder,
-.react-bootstrap-table > table > thead > tr > th .number-filter-input::-webkit-input-placeholder {
+.react-bootstrap-table > table > thead > tr > th .number-filter-input::-webkit-input-placeholder,
+.react-bootstrap-table > table > thead > tr > th .date-filter-input::-webkit-input-placeholder {
   color: lightgrey;
   font-style: italic;
 }
@@ -15,17 +16,20 @@
   font-style: initial;
 }
 
-.react-bootstrap-table > table > thead > tr > th .number-filter {
+.react-bootstrap-table > table > thead > tr > th .number-filter,
+.react-bootstrap-table > table > thead > tr > th .date-filter {
   display: flex;
 }
 
-.react-bootstrap-table > table > thead > tr > th .number-filter-input {
+.react-bootstrap-table > table > thead > tr > th .number-filter-input,
+.react-bootstrap-table > table > thead > tr > th .date-filter-input {
   margin-left: 5px;
   float: left;
   width: calc(100% - 67px - 5px);
 }
 
-.react-bootstrap-table > table > thead > tr > th .number-filter-comparator {
+.react-bootstrap-table > table > thead > tr > th .number-filter-comparator,
+.react-bootstrap-table > table > thead > tr > th .date-filter-comparator {
   width: 67px;
   float: left;
 }

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

@@ -0,0 +1,264 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount } from 'enzyme';
+import DateFilter from '../../src/components/date';
+import { FILTER_TYPE } from '../../src/const';
+import * as Comparator from '../../src/comparison';
+
+
+describe('Date Filter', () => {
+  let wrapper;
+
+
+  const onFilterFirstReturn = jest.fn();
+  const onFilter = jest.fn().mockReturnValue(onFilterFirstReturn);
+
+  const column = {
+    dataField: 'price',
+    text: 'Product Price'
+  };
+
+  afterEach(() => {
+    onFilter.mockClear();
+    onFilterFirstReturn.mockClear();
+
+    // onFilter.returns(onFilterFirstReturn);
+  });
+
+  describe('initialization', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter onFilter={ onFilter } column={ column } />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-input')).toHaveLength(1);
+      expect(wrapper.find('.date-filter-comparator')).toHaveLength(1);
+      expect(wrapper.find('.date-filter')).toHaveLength(1);
+    });
+
+    it('should rendering comparator options correctly', () => {
+      const select = wrapper.find('select');
+      expect(select.find('option')).toHaveLength(wrapper.prop('comparators').length + 1);
+    });
+  });
+
+  describe('when withoutEmptyComparatorOption prop is true', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          withoutEmptyComparatorOption
+        />
+      );
+    });
+
+    it('should rendering comparator options correctly', () => {
+      const select = wrapper.find('.date-filter-comparator');
+      expect(select.find('option')).toHaveLength(wrapper.prop('comparators').length);
+    });
+  });
+
+  describe('when defaultValue.date props is defined', () => {
+    const date = new Date(2018, 0, 1);
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          defaultValue={ { date } }
+        />
+      );
+    });
+
+    it('should rendering input successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      const input = wrapper.find('.date-filter-input');
+      expect(input).toHaveLength(1);
+      expect(input.props().defaultValue).toEqual(wrapper.instance().getDefaultDate());
+    });
+  });
+
+  describe('when defaultValue.comparator props is defined', () => {
+    const comparator = Comparator.EQ;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          defaultValue={ { comparator } }
+        />
+      );
+    });
+
+    it('should rendering comparator select successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      const select = wrapper.find('.date-filter-comparator');
+      expect(select).toHaveLength(1);
+      expect(select.props().defaultValue).toEqual(comparator);
+    });
+  });
+
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const comparator = Comparator.EQ;
+    const date = new Date(2018, 0, 1);
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter onFilter={ onFilter } column={ column } getFilter={ getFilter } />
+      );
+
+      programmaticallyFilter({ comparator, date });
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter).toHaveBeenCalledTimes(1);
+      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE);
+      expect(onFilterFirstReturn).toHaveBeenCalledTimes(1);
+      expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date });
+    });
+  });
+
+  describe('when defaultValue.number and defaultValue.comparator props are defined', () => {
+    let date;
+    let comparator;
+
+    beforeEach(() => {
+      date = new Date();
+      comparator = Comparator.EQ;
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          defaultValue={ { date, comparator } }
+        />
+      );
+    });
+
+    it('should calling onFilter on componentDidMount', () => {
+      expect(onFilter).toHaveBeenCalledTimes(1);
+      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE);
+      expect(onFilterFirstReturn).toHaveBeenCalledTimes(1);
+      // expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date });
+    });
+  });
+
+  describe('when style props is defined', () => {
+    const style = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          style={ style }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter').prop('style')).toEqual(style);
+    });
+  });
+
+  describe('when dateStyle props is defined', () => {
+    const dateStyle = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          dateStyle={ dateStyle }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-input').prop('style')).toEqual(dateStyle);
+    });
+  });
+
+  describe('when comparatorStyle props is defined', () => {
+    const comparatorStyle = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          comparatorStyle={ comparatorStyle }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-comparator').prop('style')).toEqual(comparatorStyle);
+    });
+  });
+
+  describe('when className props is defined', () => {
+    const className = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          className={ className }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.hasClass(className)).toBeTruthy();
+    });
+  });
+
+  describe('when dateClassName props is defined', () => {
+    const className = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          dateClassName={ className }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-input').prop('className').indexOf(className) > -1).toBeTruthy();
+    });
+  });
+
+  describe('when comparatorClassName props is defined', () => {
+    const className = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          comparatorClassName={ className }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-comparator').prop('className').indexOf(className) > -1).toBeTruthy();
+    });
+  });
+});

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

@@ -1,4 +1,3 @@
-import sinon from 'sinon';
 import _ from 'react-bootstrap-table-next/src/utils';
 import Store from 'react-bootstrap-table-next/src/store';
 
@@ -11,7 +10,8 @@ for (let i = 0; i < 20; i += 1) {
   data.push({
     id: i,
     name: `itme name ${i}`,
-    price: 200 + i
+    price: 200 + i,
+    date: new Date(2017, i, 1)
   });
 }
 
@@ -34,6 +34,9 @@ describe('filter', () => {
     }, {
       dataField: 'price',
       text: 'Price'
+    }, {
+      dataField: 'date',
+      text: 'Date'
     }];
   });
 
@@ -98,7 +101,7 @@ describe('filter', () => {
 
     describe('column.filterValue is defined', () => {
       beforeEach(() => {
-        columns[1].filterValue = sinon.stub();
+        columns[1].filterValue = jest.fn();
         filterFn = filters(store, columns, _);
       });
 
@@ -110,11 +113,12 @@ describe('filter', () => {
 
         const result = filterFn(currFilters);
         expect(result).toBeDefined();
-        expect(columns[1].filterValue.callCount).toBe(data.length);
-        const calls = columns[1].filterValue.getCalls();
-        calls.forEach((call, i) => {
-          expect(call.calledWith(data[i].name, data[i])).toBeTruthy();
-        });
+        expect(columns[1].filterValue).toHaveBeenCalledTimes(data.length);
+        // const calls = columns[1].filterValue.mock.calls;
+        // calls.forEach((call, i) => {
+        //   expect(call).toEqual([data[i].name, data[i]]);
+        //   expect(call.calledWith(data[i].name, data[i])).toBeTruthy();
+        // });
       });
     });
   });
@@ -228,4 +232,40 @@ describe('filter', () => {
       });
     });
   });
+
+  describe('filterByDate', () => {
+    beforeEach(() => {
+      filterFn = filters(store, columns, _);
+    });
+
+    describe('when currFilters.filterVal.comparator is empty', () => {
+      it('should returning correct result', () => {
+        currFilters.price = {
+          filterVal: { comparator: '', date: new Date() },
+          filterType: FILTER_TYPE.DATE
+        };
+
+        let result = filterFn(currFilters);
+        expect(result).toHaveLength(data.length);
+
+        currFilters.price.filterVal.comparator = undefined;
+        result = filterFn(currFilters);
+        expect(result).toHaveLength(data.length);
+      });
+    });
+
+    describe('when currFilters.filterVal.date is empty', () => {
+      it('should returning correct result', () => {
+        currFilters.price = {
+          filterVal: { comparator: EQ, date: '' },
+          filterType: FILTER_TYPE.DATE
+        };
+
+        const result = filterFn(currFilters);
+        expect(result).toHaveLength(data.length);
+      });
+    });
+
+    // TODO....
+  });
 });

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

@@ -1,16 +1,29 @@
 /* eslint no-return-assign: 0 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import LoadingOverlay from 'react-loading-overlay';
 
-export default options => (element, loading) =>
+export default options => loading =>
   class TableLoadingOverlayWrapper extends React.Component {
+    static propTypes = {
+      children: PropTypes.element.isRequired
+    }
     componentDidMount() {
       if (loading) {
         const { wrapper } = this.overlay;
         const masker = wrapper.firstChild;
         const headerDOM = wrapper.parentElement.querySelector('thead');
         const bodyDOM = wrapper.parentElement.querySelector('tbody');
-        masker.style.marginTop = window.getComputedStyle(headerDOM).height;
+        const captionDOM = wrapper.parentElement.querySelector('caption');
+
+        let marginTop = window.getComputedStyle(headerDOM).height;
+        if (captionDOM) {
+          marginTop = parseFloat(marginTop.replace('px', ''));
+          marginTop += parseFloat(window.getComputedStyle(captionDOM).height.replace('px', ''));
+          marginTop = `${marginTop}px`;
+        }
+
+        masker.style.marginTop = marginTop;
         masker.style.height = window.getComputedStyle(bodyDOM).height;
       }
     }
@@ -22,7 +35,7 @@ export default options => (element, loading) =>
           { ...options }
           active={ loading }
         >
-          { element }
+          { this.props.children }
         </LoadingOverlay>
       );
     }

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-overlay",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "it's a loading overlay addons for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-overlay/test/index.test.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import { shallow, render } from 'enzyme';
+import { render, shallow } from 'enzyme';
 import LoadingOverlay from 'react-loading-overlay';
 
-import overlayFactory from '..';
+import overlayFactory from '../index.js';
 
 describe('overlayFactory', () => {
   let wrapper;
-  // let instance;
 
   const createTable = () => (
     <table>
@@ -27,8 +26,8 @@ describe('overlayFactory', () => {
   describe('when loading is false', () => {
     beforeEach(() => {
       const tableElm = createTable();
-      const Overlay = overlayFactory()(tableElm, false);
-      wrapper = shallow(<Overlay />);
+      const Overlay = overlayFactory()(false);
+      wrapper = shallow(<Overlay>{ tableElm }</Overlay>);
     });
 
     it('should rendering Overlay component correctly', () => {
@@ -42,14 +41,12 @@ describe('overlayFactory', () => {
   describe('when loading is true', () => {
     beforeEach(() => {
       const tableElm = createTable();
-      const Overlay = overlayFactory()(tableElm, true);
-      wrapper = render(<Overlay />);
+      const Overlay = overlayFactory()(true);
+      wrapper = render(<Overlay>{ tableElm }</Overlay>);
     });
 
     it('should rendering Overlay component correctly', () => {
-      const overlay = wrapper.find(LoadingOverlay);
       expect(wrapper.length).toBe(1);
-      expect(overlay.length).toBe(0);
     });
   });
 
@@ -60,8 +57,8 @@ describe('overlayFactory', () => {
     };
     beforeEach(() => {
       const tableElm = createTable();
-      const Overlay = overlayFactory(options)(tableElm, false);
-      wrapper = shallow(<Overlay />);
+      const Overlay = overlayFactory(options)(false);
+      wrapper = shallow(<Overlay>{ tableElm }</Overlay>);
     });
 
     it('should rendering Overlay component with options correctly', () => {

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

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

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

@@ -3,6 +3,8 @@ export default {
   PAGE_START_INDEX: 1,
   With_FIRST_AND_LAST: true,
   SHOW_ALL_PAGE_BTNS: false,
+  SHOW_TOTAL: false,
+  PAGINATION_TOTAL: null,
   FIRST_PAGE_TEXT: '<<',
   PRE_PAGE_TEXT: '<',
   NEXT_PAGE_TEXT: '>',

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const PaginationTotal = props => (
-  <span>
+  <span className="react-bootstrap-table-pagination-total">
     &nbsp;Showing rows { props.from } to&nbsp;{ props.to + 1 } of&nbsp;{ props.dataSize }
   </span>
 );

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

@@ -87,10 +87,28 @@ class Pagination extends pageResolver(Component) {
     }
   }
 
+  defaultTotal = (from, to, size) => (
+    <PaginationTotal
+      from={ from }
+      to={ to }
+      dataSize={ size }
+    />
+  );
+
+  setTotal = (from, to, size, total) => {
+    if (total && (typeof total === 'function')) {
+      return total(from, to, size);
+    }
+
+    return this.defaultTotal(from, to, size);
+  };
+
   render() {
     const { totalPages, lastPage, dropdownOpen: open } = this.state;
     const {
       showTotal,
+      dataSize,
+      paginationTotalRenderer,
       sizePerPageList,
       currSizePerPage,
       hideSizePerPage,
@@ -121,11 +139,12 @@ class Pagination extends pageResolver(Component) {
           }
           {
             showTotal ?
-              <PaginationTotal
-                from={ from }
-                to={ to }
-                dataSize={ this.props.dataSize }
-              /> : null
+              this.setTotal(
+                from,
+                to,
+                dataSize,
+                paginationTotalRenderer
+              ) : null
           }
         </div>
         <div className={ pageListClass }>
@@ -145,6 +164,8 @@ Pagination.propTypes = {
   onSizePerPageChange: PropTypes.func.isRequired,
   pageStartIndex: PropTypes.number,
   paginationSize: PropTypes.number,
+  showTotal: PropTypes.bool,
+  paginationTotalRenderer: PropTypes.func,
   firstPageText: PropTypes.string,
   prePageText: PropTypes.string,
   nextPageText: PropTypes.string,
@@ -164,6 +185,8 @@ Pagination.defaultProps = {
   paginationSize: Const.PAGINATION_SIZE,
   withFirstAndLast: Const.With_FIRST_AND_LAST,
   alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
+  showTotal: Const.SHOW_TOTAL,
+  paginationTotalRenderer: Const.PAGINATION_TOTAL,
   firstPageText: Const.FIRST_PAGE_TEXT,
   prePageText: Const.PRE_PAGE_TEXT,
   nextPageText: Const.NEXT_PAGE_TEXT,

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

@@ -54,11 +54,14 @@ export default (Base, {
       if (typeof page !== 'undefined' && currPage !== page) { // user defined page
         currPage = page;
         needNewState = true;
-      } else if (nextProps.isDataChanged) { // user didn't defined page but data change
-        currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX;
+      } else if (nextProps.isDataChanged) {
         needNewState = true;
       }
 
+      if (typeof currPage === 'undefined') {
+        currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX;
+      }
+
       if (typeof sizePerPage !== 'undefined') {
         currSizePerPage = sizePerPage;
         needNewState = true;
@@ -146,6 +149,7 @@ export default (Base, {
           hideSizePerPage={ hideSizePerPage }
           hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
           showTotal={ options.showTotal }
+          paginationTotalRenderer={ options.paginationTotalRenderer }
           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/wrapper.test.js

@@ -15,7 +15,7 @@ const data = [];
 for (let i = 0; i < 100; i += 1) {
   data.push({
     id: i,
-    name: `itme name ${i}`
+    name: `item name ${i}`
   });
 }
 
@@ -67,29 +67,29 @@ describe('Wrapper', () => {
       createPaginationWrapper(props);
     });
 
-    it('should rendering correctly', () => {
+    it('should render correctly', () => {
       expect(wrapper.length).toBe(1);
     });
 
-    it('should initializing state correctly', () => {
+    it('should initialize state correctly', () => {
       expect(instance.state.currPage).toBeDefined();
       expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX);
       expect(instance.state.currSizePerPage).toBeDefined();
       expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
     });
 
-    it('should saving page and sizePerPage to store correctly', () => {
+    it('should save page and sizePerPage to the store correctly', () => {
       expect(props.store.page).toBe(instance.state.currPage);
       expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
     });
 
-    it('should rendering BootstraTable correctly', () => {
+    it('should render BootstrapTable correctly', () => {
       const table = wrapper.find(BootstrapTable);
       expect(table.length).toBe(1);
       expect(table.prop('data').length).toEqual(instance.state.currSizePerPage);
     });
 
-    it('should rendering Pagination correctly', () => {
+    it('should render Pagination correctly', () => {
       const pagination = wrapper.find(Pagination);
       expect(pagination.length).toBe(1);
       expect(pagination.prop('dataSize')).toEqual(props.store.data.length);
@@ -111,7 +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);
+      expect(pagination.prop('showTotal')).toBeFalsy();
     });
 
     describe('componentWillReceiveProps', () => {
@@ -177,10 +177,11 @@ describe('Wrapper', () => {
         });
       });
 
-      describe('when nextProps.isDataChanged is true and options.pageStartIndex is existing', () => {
+      describe('when nextProps.isDataChanged is true, currPage is undefined and options.pageStartIndex exists', () => {
         beforeEach(() => {
           nextProps.isDataChanged = true;
           nextProps.pagination.options.pageStartIndex = 0;
+          instance.state.currPage = undefined;
           instance.componentWillReceiveProps(nextProps);
         });
 
@@ -254,7 +255,7 @@ describe('Wrapper', () => {
       createPaginationWrapper(props);
     });
 
-    it('should rendering Pagination correctly', () => {
+    it('should render Pagination correctly', () => {
       const pagination = wrapper.find(Pagination);
       expect(wrapper.length).toBe(1);
       expect(pagination.length).toBe(1);

packages/react-bootstrap-table2/package.json

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

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

@@ -29,12 +29,15 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
   render() {
     const { loading, overlay } = this.props;
-    const table = this.renderTable();
-    if (loading && overlay) {
-      const LoadingOverlay = overlay(table, loading);
-      return <LoadingOverlay />;
+    if (overlay) {
+      const LoadingOverlay = overlay(loading);
+      return (
+        <LoadingOverlay>
+          { this.renderTable() }
+        </LoadingOverlay>
+      );
     }
-    return table;
+    return this.renderTable();
   }
 
   renderTable() {
@@ -87,6 +90,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             sortOrder={ store.sortOrder }
             onSort={ this.props.onSort }
             onFilter={ this.props.onFilter }
+            onExternalFilter={ this.props.onExternalFilter }
             selectRow={ headerCellSelectionInfo }
           />
           <Body
@@ -142,7 +146,9 @@ BootstrapTable.propTypes = {
     classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     nonSelectable: PropTypes.array,
     bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    hideSelectColumn: PropTypes.bool
+    hideSelectColumn: PropTypes.bool,
+    selectionRenderer: PropTypes.func,
+    selectionHeaderRenderer: PropTypes.func
   }),
   onRowSelect: PropTypes.func,
   onAllRowsSelect: PropTypes.func,
@@ -157,7 +163,8 @@ BootstrapTable.propTypes = {
   overlay: PropTypes.func,
   onTableChange: PropTypes.func,
   onSort: PropTypes.func,
-  onFilter: PropTypes.func
+  onFilter: PropTypes.func,
+  onExternalFilter: PropTypes.func
 };
 
 BootstrapTable.defaultProps = {

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

@@ -88,7 +88,9 @@ class Cell extends Component {
       cellAttrs.onDoubleClick = this.handleEditingCell;
     }
     return (
-      <td { ...cellAttrs }>{ content }</td>
+      <td { ...cellAttrs }>
+        { typeof content === 'boolean' ? `${content}` : content }
+      </td>
     );
   }
 }

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

@@ -17,13 +17,15 @@ const HeaderCell = (props) => {
     sorting,
     sortOrder,
     isLastSorting,
-    onFilter
+    onFilter,
+    onExternalFilter
   } = props;
 
   const {
     text,
     sort,
     filter,
+    filterRenderer,
     headerTitle,
     headerAlign,
     headerFormatter,
@@ -89,7 +91,11 @@ const HeaderCell = (props) => {
 
   if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
   if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
-  if (filter) {
+
+  if (filterRenderer) {
+    const onCustomFilter = onExternalFilter(column, filter.props.type);
+    filterElm = filterRenderer(onCustomFilter, column);
+  } else if (filter) {
     filterElm = <filter.Filter { ...filter.props } onFilter={ onFilter } column={ column } />;
   }
 
@@ -136,6 +142,7 @@ HeaderCell.propTypes = {
     editorRenderer: PropTypes.func,
     validator: PropTypes.func,
     filter: PropTypes.object,
+    filterRenderer: PropTypes.func,
     filterValue: PropTypes.func
   }).isRequired,
   index: PropTypes.number.isRequired,
@@ -143,7 +150,8 @@ HeaderCell.propTypes = {
   sorting: PropTypes.bool,
   sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
   isLastSorting: PropTypes.bool,
-  onFilter: PropTypes.func
+  onFilter: PropTypes.func,
+  onExternalFilter: PropTypes.func
 };
 
 export default HeaderCell;

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

@@ -15,7 +15,8 @@ const Header = (props) => {
     onFilter,
     sortField,
     sortOrder,
-    selectRow
+    selectRow,
+    onExternalFilter
   } = props;
 
   return (
@@ -39,6 +40,7 @@ const Header = (props) => {
                   onSort={ onSort }
                   sorting={ currSort }
                   onFilter={ onFilter }
+                  onExternalFilter={ onExternalFilter }
                   sortOrder={ sortOrder }
                   isLastSorting={ isLastSorting }
                 />);
@@ -57,7 +59,8 @@ Header.propTypes = {
   onFilter: PropTypes.func,
   sortField: PropTypes.string,
   sortOrder: PropTypes.string,
-  selectRow: PropTypes.object
+  selectRow: PropTypes.object,
+  onExternalFilter: PropTypes.func
 };
 
 export default Header;

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

@@ -14,7 +14,8 @@ export default class SelectionCell extends Component {
     onRowSelect: PropTypes.func,
     disabled: PropTypes.bool,
     rowIndex: PropTypes.number,
-    clickToSelect: PropTypes.bool
+    clickToSelect: PropTypes.bool,
+    selectionRenderer: PropTypes.func
   }
 
   constructor() {
@@ -53,16 +54,25 @@ export default class SelectionCell extends Component {
     const {
       mode: inputType,
       selected,
-      disabled
+      disabled,
+      selectionRenderer
     } = this.props;
 
     return (
       <td onClick={ this.handleClick }>
-        <input
-          type={ inputType }
-          checked={ selected }
-          disabled={ disabled }
-        />
+        {
+          selectionRenderer ? selectionRenderer({
+            mode: inputType,
+            checked: selected,
+            disabled
+          }) : (
+            <input
+              type={ inputType }
+              checked={ selected }
+              disabled={ disabled }
+            />
+          )
+        }
       </td>
     );
   }

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

@@ -22,7 +22,8 @@ export default class SelectionHeaderCell extends Component {
   static propTypes = {
     mode: PropTypes.string.isRequired,
     checkedStatus: PropTypes.string,
-    onAllRowsSelect: PropTypes.func
+    onAllRowsSelect: PropTypes.func,
+    selectionHeaderRenderer: PropTypes.func
   }
 
   constructor() {
@@ -52,25 +53,37 @@ export default class SelectionHeaderCell extends Component {
 
   render() {
     const {
-      CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_SINGLE
+      CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE
     } = Const;
 
-    const { mode, checkedStatus } = this.props;
+    const { mode, checkedStatus, selectionHeaderRenderer } = this.props;
 
     const checked = checkedStatus === CHECKBOX_STATUS_CHECKED;
 
     const indeterminate = checkedStatus === CHECKBOX_STATUS_INDETERMINATE;
 
-    return mode === ROW_SELECT_SINGLE
-      ? <th data-row-selection />
-      : (
-        <th data-row-selection onClick={ this.handleCheckBoxClick }>
-          <CheckBox
-            { ...this.props }
-            checked={ checked }
-            indeterminate={ indeterminate }
-          />
-        </th>
+    const attrs = {};
+    let content;
+    if (selectionHeaderRenderer) {
+      content = selectionHeaderRenderer({
+        mode,
+        checked,
+        indeterminate
+      });
+      attrs.onClick = this.handleCheckBoxClick;
+    } else if (mode === ROW_SELECT_MULTIPLE) {
+      content = (
+        <CheckBox
+          { ...this.props }
+          checked={ checked }
+          indeterminate={ indeterminate }
+        />
       );
+      attrs.onClick = this.handleCheckBoxClick;
+    }
+
+    return (
+      <th data-row-selection { ...attrs }>{ content }</th>
+    );
   }
 }

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

@@ -39,15 +39,17 @@ export default Base =>
     }
 
     componentWillReceiveProps(nextProps) {
-      let sortedColumn;
-      for (let i = 0; i < nextProps.columns.length; i += 1) {
-        if (nextProps.columns[i].dataField === nextProps.store.sortField) {
-          sortedColumn = nextProps.columns[i];
-          break;
+      if (!this.isRemoteSort() && !this.isRemotePagination()) {
+        let sortedColumn;
+        for (let i = 0; i < nextProps.columns.length; i += 1) {
+          if (nextProps.columns[i].dataField === nextProps.store.sortField) {
+            sortedColumn = nextProps.columns[i];
+            break;
+          }
+        }
+        if (sortedColumn && sortedColumn.sort) {
+          nextProps.store.sortBy(sortedColumn);
         }
-      }
-      if (sortedColumn && sortedColumn.sort) {
-        nextProps.store.sortBy(sortedColumn);
       }
     }
 

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

@@ -27,6 +27,25 @@ describe('Cell', () => {
     });
   });
 
+  describe('when content is bool value', () => {
+    const column = {
+      dataField: 'col1',
+      text: 'column 1'
+    };
+    const aRowWithBoolValue = { col1: true };
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <Cell row={ aRowWithBoolValue } columnIndex={ 1 } rowIndex={ 1 } column={ column } />
+      );
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.text()).toEqual(aRowWithBoolValue[column.dataField].toString());
+    });
+  });
+
   describe('when column.formatter prop is defined', () => {
     const rowIndex = 1;
     const column = {

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

@@ -669,4 +669,74 @@ describe('HeaderCell', () => {
       });
     });
   });
+
+  describe('when column.filter is defined', () => {
+    const onFilter = jest.fn();
+    const filterProps = { a: 123 };
+    const Filter = () => <div>test</div>;
+    let column;
+
+    beforeEach(() => {
+      onFilter.mockClear();
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        filter: {
+          props: filterProps,
+          Filter
+        }
+      };
+      wrapper = shallow(<HeaderCell column={ column } index={ index } onFilter={ onFilter } />);
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('th').length).toBe(1);
+    });
+
+    it('should render filter correctly', () => {
+      expect(wrapper.find(Filter).length).toBe(1);
+      expect(wrapper.find(Filter).props()).toEqual({
+        column,
+        onFilter,
+        ...filterProps
+      });
+    });
+  });
+
+  describe('when column.filter and column.filterRenderer is defined', () => {
+    const onExternalFilter = jest.fn();
+    const filterProps = { a: 123 };
+    const Filter = () => <div>test</div>;
+    const filterRenderer = jest.fn().mockReturnValue(<Filter />);
+    let column;
+
+    beforeEach(() => {
+      onExternalFilter.mockClear();
+      filterRenderer.mockClear();
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        filter: {
+          props: filterProps
+        },
+        filterRenderer
+      };
+      wrapper = shallow(
+        <HeaderCell column={ column } index={ index } onExternalFilter={ onExternalFilter } />);
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('th').length).toBe(1);
+    });
+
+    it('should render filter correctly', () => {
+      expect(wrapper.find(Filter).length).toBe(1);
+    });
+
+    it('should call filterRenderer function correctly', () => {
+      expect(filterRenderer).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -193,5 +193,36 @@ describe('<SelectionCell />', () => {
         expect(wrapper.find('input').get(0).props.disabled).toBeTruthy();
       });
     });
+
+    describe('when selectionRenderer prop is defined', () => {
+      const DummySelection = () => <div className="dummy" />;
+      const selectionRenderer = jest.fn().mockReturnValue(<DummySelection />);
+
+      beforeEach(() => {
+        selectionRenderer.mockClear();
+        wrapper = shallow(
+          <SelectionCell
+            rowKey={ 1 }
+            mode={ mode }
+            rowIndex={ rowIndex }
+            selected={ selected }
+            selectionRenderer={ selectionRenderer }
+          />
+        );
+      });
+
+      it('should render component correctly', () => {
+        expect(wrapper.find(DummySelection)).toHaveLength(1);
+      });
+
+      it('should call props.selectionRenderer correctly', () => {
+        expect(selectionRenderer).toHaveBeenCalledTimes(1);
+        expect(selectionRenderer).toHaveBeenCalledWith({
+          mode,
+          checked: selected,
+          disabled: wrapper.prop('disabled')
+        });
+      });
+    });
   });
 });

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

@@ -126,6 +126,36 @@ describe('<SelectionHeaderCell />', () => {
         expect(wrapper.find(CheckBox).get(0).props.indeterminate).toBe(indeterminate);
       });
     });
+
+    describe('when props.selectionHeaderRenderer is defined', () => {
+      const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;
+      const DummySelection = () => <div className="dummy" />;
+      const selectionHeaderRenderer = jest.fn().mockReturnValue(<DummySelection />);
+
+      beforeEach(() => {
+        selectionHeaderRenderer.mockClear();
+        wrapper = shallow(
+          <SelectionHeaderCell
+            mode="checkbox"
+            checkedStatus={ checkedStatus }
+            selectionHeaderRenderer={ selectionHeaderRenderer }
+          />
+        );
+      });
+
+      it('should render correctly', () => {
+        expect(wrapper.find(DummySelection)).toHaveLength(1);
+      });
+
+      it('should call props.selectionHeaderRenderer correctly', () => {
+        expect(selectionHeaderRenderer).toHaveBeenCalledTimes(1);
+        expect(selectionHeaderRenderer).toHaveBeenCalledWith({
+          mode: 'checkbox',
+          checked: checkedStatus === Const.CHECKBOX_STATUS_CHECKED,
+          indeterminate: checkedStatus === Const.CHECKBOX_STATUS_INDETERMINATE
+        });
+      });
+    });
   });
 });