Publish

- react-bootstrap-table2-example@1.0.35
 - react-bootstrap-table-next@3.3.2

docs/README.md

@@ -32,6 +32,7 @@
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
+* [filterPosition](filterPosition)
 * [onTableChange](#onTableChange)
 * [onDataSizeChange](#onDataSizeChange)
 
@@ -208,6 +209,8 @@ const defaultSorted = [{
 }];
 ```
 
+**Note**: Only the first column is sorted currently, see #1083.
+
 ### <a name='defaultSortDirection'>defaultSortDirection - [String]</a>
 Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
 
@@ -327,6 +330,9 @@ Following is a shape of `newState`
 }
 ```
 
+### <a name='filterPosition'>filterPosition - [String]</a>
+Available value is `inline`, `top` and `bottom`, default is `inline`. This prop decide where `react-bootstrap-table` render column filter.
+
 ### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
 This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
 

docs/columns.md

@@ -13,6 +13,7 @@ Available properties in a column object:
 * [formatExtraData](#formatExtraData)
 * [type](#type)
 * [sort](#sort)
+* [sortValue](#sortValue)
 * [sortFunc](#sortFunc)
 * [sortCaret](#sortCaret)
 * [onSort](#onSort)
@@ -141,8 +142,42 @@ Specify the data type on column. Available value so far is `string`, `number`, `
 ## <a name='sort'>column.sort - [Bool]</a>
 Enable the column sort via a `true` value given.
 
+## <a name='sortValue'>column.sortValue - [Function]</a>
+`column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting.
+
+For example, consider following data:
+
+```js
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+const data = [{id: 1, type: 2}, {id: 2, type: 1}, {id: 3, type:0}];
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'type',
+  text: 'Job Type'
+  sort: true,
+  formatter: (cell, row) => types[cell]
+}]
+```
+
+In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via [`column.formatter`](#formatter), which will lead confuse because we are sorting by type value instead of type name. So `sortValue` is a way for you to decide what kind of value should be adopted when sorting on a specify column:
+
+```js
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'type',
+  text: 'Job Type'
+  sort: true,
+  formatter: (cell, row) => types[cell],
+  sortValue: (cell, row) => types[cell] // we use type name to sort.
+}]
+```
+
 ## <a name='sortFunc'>column.sortFunc - [Function]</a>
-`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
+`column.sortFunc` only work when `column.sort` enabled. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
 
 ```js
 {
@@ -421,7 +456,7 @@ If the events is not listed above, the callback function will only pass the `eve
 {
   // omit...
   headerEvents: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex) => { ... }
   }
 }
 ```
@@ -631,7 +666,7 @@ It's also available to custom via a callback function:
 {
   // omit...
   footerEvents: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex) => { ... }
   }
 }
 ```

docs/row-selection.md

@@ -11,6 +11,8 @@
 * [classes)](#classes)
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
+* [nonSelectableStyle](#nonSelectableStyle)
+* [nonSelectableClasses](#nonSelectableClasses)
 * [clickToSelect)](#clickToSelect)
 * [clickToExpand)](#clickToExpand)
 * [clickToEdit](#clickToEdit)
@@ -139,6 +141,54 @@ const selectRow = {
 };
 ```
 
+### <a name='nonSelectableStyle'>selectRow.nonSelectableStyle - [Object | Function]</a>
+This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
+and a callback function for more flexible customization.
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableStyle: { backgroundColor: 'gray' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableStyle: (row, rowIndex) => { return ...; }
+};
+```
+
+### <a name='nonSelectableClasses'>selectRow.nonSelectableClasses - [String | Function]</a>
+This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
+flexible customization
+
+### String
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableClasses: 'my-class'
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5],
+  nonSelectableClasses: (row, rowIndex) => { return ...; }
+};
+```
+
 ### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
 Allow user to select row by clicking on the row.
 

package.json

@@ -80,7 +80,7 @@
     "webpack-dev-server": "2.7.1"
   },
   "dependencies": {
-    "classnames": "2.2.5",
+    "classnames": "^2.2.5",
     "prop-types": "15.5.10",
     "react": "16.4.0",
     "react-dom": "16.4.0",

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

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

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

@@ -1,5 +1,8 @@
+/* eslint disable-next-line: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
+/* eslint camelcase: 0 */
+/* eslint react/no-unused-prop-types: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
@@ -43,7 +46,7 @@ export default (
       };
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.cellEdit && isRemoteCellEdit()) {
         if (nextProps.cellEdit.options.errorMessage) {
           this.setState(() => ({

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

@@ -2,6 +2,7 @@
 /* eslint no-return-assign: 0 */
 /* eslint class-methods-use-this: 0 */
 /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
@@ -51,7 +52,11 @@ export default (_, onStartEdit) =>
       };
     }
 
-    componentWillReceiveProps({ message }) {
+    componentWillUnmount() {
+      this.clearTimer();
+    }
+
+    UNSAFE_componentWillReceiveProps({ message }) {
       if (_.isDefined(message)) {
         this.createTimer();
         this.setState(() => ({
@@ -60,10 +65,6 @@ export default (_, onStartEdit) =>
       }
     }
 
-    componentWillUnmount() {
-      this.clearTimer();
-    }
-
     clearTimer() {
       if (this.indicatorTimer) {
         clearTimeout(this.indicatorTimer);

packages/react-bootstrap-table2-editor/test/context.test.js

@@ -117,7 +117,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().componentWillReceiveProps({});
+        wrapper.instance().UNSAFE_componentWillReceiveProps({});
       });
 
       it('should not set state.message', () => {
@@ -138,7 +138,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().componentWillReceiveProps({
+        wrapper.instance().UNSAFE_componentWillReceiveProps({
           cellEdit: cellEditFactory(defaultCellEdit)
         });
       });
@@ -164,7 +164,7 @@ describe('CellEditContext', () => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
           wrapper.render();
-          wrapper.instance().componentWillReceiveProps({
+          wrapper.instance().UNSAFE_componentWillReceiveProps({
             cellEdit: cellEditFactory({
               ...defaultCellEdit,
               errorMessage: message
@@ -190,7 +190,7 @@ describe('CellEditContext', () => {
         beforeEach(() => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
-          wrapper.instance().componentWillReceiveProps({
+          wrapper.instance().UNSAFE_componentWillReceiveProps({
             cellEdit: cellEditFactory({ ...defaultCellEdit })
           });
           wrapper.update();

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

@@ -0,0 +1,114 @@
+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);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="top"
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="bottom"
+/>
+`;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true,
+  expandColumnPosition: 'right'
+};
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+      filterPosition="top"
+      expandRow={ expandRow }
+      selectRow={ selectRow }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+      filterPosition="bottom"
+      expandRow={ expandRow }
+      selectRow={ selectRow }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -8,14 +8,17 @@ const products = productsGenerator(8);
 
 const columns = [{
   dataField: 'id',
-  text: 'Product ID'
+  text: 'Product ID',
+  footer: 'hello'
 }, {
   dataField: 'name',
   text: 'Product Name',
+  footer: 'hello',
   filter: textFilter()
 }, {
   dataField: 'price',
   text: 'Product Price',
+  footer: 'hello',
   filter: textFilter()
 }];
 
@@ -39,6 +42,11 @@ const columns = [{
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 `;
 
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
 export default () => (
   <div>
     <BootstrapTable
@@ -46,6 +54,8 @@ export default () => (
       data={ products }
       columns={ columns }
       filter={ filterFactory() }
+      filterPosition="bottom"
+      selectRow={ selectRow }
     />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js

@@ -36,11 +36,12 @@ const columns = [{
 
 const MyExportCSV = (props) => {
   const handleClick = () => {
-    props.onExport();
+    // passing my custom data
+    props.onExport(products.filter(r => r.id > 2));
   };
   return (
     <div>
-      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+      <button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
     </div>
   );
 };

packages/react-bootstrap-table2-example/examples/footer/column-event-table.js

@@ -12,7 +12,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   footerEvents: {
-    onClick: () => alert('Click on Product ID footer column')
+    onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
   },
   footer: 'Footer 1'
 }, {
@@ -32,7 +32,7 @@ const columns = [{
     dataField: 'id',
     text: 'Product ID',
     footerEvents: {
-      onClick: () => alert('Click on Product ID footer column')
+      onClick: (e, column, columnIndex) => alert('Click on Product ID footer column')
     },
     footer: 'Footer 1'
   }, {

packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js

@@ -12,7 +12,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   headerEvents: {
-    onClick: () => alert('Click on Product ID header column')
+    onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
   }
 }, {
   dataField: 'name',
@@ -29,7 +29,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   headerEvents: {
-    onClick: () => alert('Click on Product ID header column')
+    onClick: (e, column, columnIndex) => alert('Click on Product ID header column')
   }
 }, {
   dataField: 'name',

packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js

@@ -0,0 +1,61 @@
+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 selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js

@@ -0,0 +1,61 @@
+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 selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  nonSelectable: [0, 2, 4],
+  nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/search/custom-match-function.js

@@ -0,0 +1,116 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+// Implement startWith instead of contain 
+function customMatchFunc({
+  searchText,
+  value,
+  column,
+  row
+}) {
+  if (typeof value !== 'undefined') {
+    return value.startsWith(searchText);
+  }
+  return false;
+}
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { customMatchFunc } }
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+`;
+
+// Implement startWith instead of contain 
+function customMatchFunc({
+  searchText,
+  value,
+  column,
+  row
+}) {
+  if (typeof value !== 'undefined') {
+    return `${value}`.toLowerCase().startsWith(searchText.toLowerCase());
+  }
+  return false;
+}
+
+export default () => (
+  <div>
+    <h1>Custom a search match function by startWith instead of contain</h1>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { onColumnMatch: customMatchFunc } }
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js

@@ -0,0 +1,78 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { jobsGenerator1 } from 'utils/common';
+
+const jobs = jobsGenerator1(8);
+
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  sort: true,
+  formatter: (cell, row) => types[cell],
+  sortValue: (cell, row) => types[cell]
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  sort: true,
+  formatter: (cell, row) => types[cell],
+  sortValue: (cell, row) => types[cell]
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default class Test extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { data: jobs };
+  }
+
+  handleClick = () => {
+    this.setState(() => {
+      const newProducts = jobsGenerator1(21);
+      return {
+        data: newProducts
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
+        <BootstrapTable keyField="id" data={ this.state.data } columns={ columns } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

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

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

@@ -29,6 +29,11 @@ export const withOnSale = rows => rows.map((row) => {
   return row;
 });
 
+export const withRandomPrice = rows => rows.map((row) => {
+  row.price = Math.floor((Math.random() * 10) + 2000);
+  return row;
+});
+
 export const productsQualityGenerator = (quantity = 5, factor = 0) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index + factor,

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

@@ -92,6 +92,7 @@ import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
 import ClearAllFilters from 'examples/column-filter/clear-all-filters';
 import FilterHooks from 'examples/column-filter/filter-hooks';
 import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
+import FilterPosition from 'examples/column-filter/filter-position';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -104,6 +105,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
 import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
+import CustomSortValue from 'examples/sort/custom-sort-value';
 import CustomSortTable from 'examples/sort/custom-sort-table';
 import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
@@ -150,6 +152,8 @@ import HeaderStyleTable from 'examples/row-selection/header-style';
 import HideSelectAllTable from 'examples/row-selection/hide-select-all';
 import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
+import NonSelectableRowsStyleTable from 'examples/row-selection/non-selectable-rows-style';
+import NonSelectableRowsClassTable from 'examples/row-selection/non-selectable-rows-class';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
@@ -195,6 +199,7 @@ import FullyCustomSearch from 'examples/search/fully-custom-search';
 import SearchFormattedData from 'examples/search/search-formatted';
 import CustomSearchValue from 'examples/search/custom-search-value';
 import SearchableColumn from 'examples/search/searchable-column';
+import CustomMatchFunction from 'examples/search/custom-match-function';
 
 // CSV
 import ExportCSV from 'examples/csv';
@@ -312,6 +317,7 @@ storiesOf('Column Filter', module)
   .add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
   .add('Date Filter', () => <DateFilter />)
   .add('Date Filter with Default Value', () => <DateFilterWithDefaultValue />)
+  .add('Filter Position', () => <FilterPosition />)
   .add('Custom Text Filter', () => <CustomTextFilter />)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)
@@ -356,6 +362,7 @@ storiesOf('Sort Table', module)
   .add('Default Sort Table', () => <DefaultSortTable />)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
+  .add('Custom Sort Value', () => <CustomSortValue />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Sort Caret', () => <CustomSortCaretTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
@@ -405,6 +412,8 @@ storiesOf('Row Selection', module)
   .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
+  .add('Not Selectabled Rows Style', () => <NonSelectableRowsStyleTable />)
+  .add('Not Selectabled Rows Class', () => <NonSelectableRowsClassTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />)
   .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
@@ -451,7 +460,8 @@ storiesOf('Table Search', module)
   .add('Searchable Column', () => <SearchableColumn />)
   .add('Fully Custom Search', () => <FullyCustomSearch />)
   .add('Search Formatted Value', () => <SearchFormattedData />)
-  .add('Custom Search Value', () => <CustomSearchValue />);
+  .add('Custom Search Value', () => <CustomSearchValue />)
+  .add('Custom match function', () => <CustomMatchFunction />);
 
 storiesOf('Column Toggle', module)
   .addDecorator(bootstrapStyle())

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

@@ -330,3 +330,29 @@ Following properties is valid in `FILTER_TYPES`:
 * NUMBER
 * DATE
 * MULTISELECT
+
+### Position
+Default filter is rendered inside the table column header, but you can choose to render them as a row by `filterPosition`:
+
+#### Render in the top of table body
+
+```js
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="top"
+/>
+```
+
+#### Render in the bottom of table body
+```js
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="bottom"
+/>
+```

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.1.12",
+  "version": "1.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/text.js

@@ -1,6 +1,7 @@
 /* eslint react/require-default-props: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint no-return-assign: 0 */
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
 
@@ -41,16 +42,16 @@ class TextFilter extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillUnmount() {
+    this.cleanTimer();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.defaultValue !== this.props.defaultValue) {
       this.applyFilter(nextProps.defaultValue);
     }
   }
 
-  componentWillUnmount() {
-    this.cleanTimer();
-  }
-
   filter(e) {
     e.stopPropagation();
     this.cleanTimer();

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

@@ -1,5 +1,6 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
+/* eslint camelcase: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -37,15 +38,6 @@ export default (
       }
     }
 
-    componentWillReceiveProps(nextProps) {
-      // let nextData = nextProps.data;
-      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
-        this.doFilter(nextProps, this.isEmitDataChange);
-      } else {
-        this.data = nextProps.data;
-      }
-    }
-
     onFilter(column, filterType, initialize = false) {
       return (filterVal) => {
         // watch out here if migration to context API, #334
@@ -90,6 +82,15 @@ export default (
       return this.data;
     }
 
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      // let nextData = nextProps.data;
+      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
+        this.doFilter(nextProps, this.isEmitDataChange);
+      } else {
+        this.data = nextProps.data;
+      }
+    }
+
     doFilter(props, ignoreEmitDataChange = false) {
       const { dataChangeListener, data, columns } = props;
       const result = filters(data, columns, _)(this.currFilters);

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

@@ -144,7 +144,7 @@ describe('Text Filter', () => {
         <TextFilter onFilter={ onFilter } column={ column } />
       );
       instance = wrapper.instance();
-      instance.componentWillReceiveProps(nextProps);
+      instance.UNSAFE_componentWillReceiveProps(nextProps);
     });
 
     it('should setting state correctly when props.defaultValue is changed', () => {

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

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

packages/react-bootstrap-table2-paginator/src/data-context.js

@@ -21,8 +21,9 @@ class PaginationDataProvider extends Provider {
     isRemotePagination: PropTypes.func.isRequired
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
-    super.componentWillReceiveProps(nextProps);
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    super.UNSAFE_componentWillReceiveProps(nextProps);
     const { currSizePerPage } = this;
     const { custom, onPageChange } = nextProps.pagination.options;
 

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

@@ -1,4 +1,5 @@
 /* eslint react/prop-types: 0 */
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 
 import pageResolver from './page-resolver';
@@ -12,7 +13,7 @@ export default WrappedComponent =>
       this.state = this.initialState();
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const { dataSize, currSizePerPage } = nextProps;
       if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
         const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);

packages/react-bootstrap-table2-paginator/src/state-context.js

@@ -1,6 +1,7 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
 /* eslint no-lonely-if: 0 */
+/* eslint camelcase: 0 */
 import React from 'react';
 import EventEmitter from 'events';
 import Const from './const';
@@ -45,23 +46,6 @@ class StateProvider extends React.Component {
     this.dataChangeListener.on('filterChanged', this.handleDataSizeChange);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { custom } = nextProps.pagination.options;
-
-    // user should align the page when the page is not fit to the data size when remote enable
-    if (this.isRemotePagination() || custom) {
-      if (typeof nextProps.pagination.options.page !== 'undefined') {
-        this.currPage = nextProps.pagination.options.page;
-      }
-      if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
-        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
-      }
-      if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
-        this.dataSize = nextProps.pagination.options.totalSize;
-      }
-    }
-  }
-
   getPaginationProps = () => {
     const { pagination: { options }, bootstrap4 } = this.props;
     const { currPage, currSizePerPage, dataSize } = this;
@@ -113,6 +97,23 @@ class StateProvider extends React.Component {
 
   getPaginationRemoteEmitter = () => this.remoteEmitter || this.props.remoteEmitter;
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { custom } = nextProps.pagination.options;
+
+    // user should align the page when the page is not fit to the data size when remote enable
+    if (this.isRemotePagination() || custom) {
+      if (typeof nextProps.pagination.options.page !== 'undefined') {
+        this.currPage = nextProps.pagination.options.page;
+      }
+      if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
+        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+      }
+      if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
+        this.dataSize = nextProps.pagination.options.totalSize;
+      }
+    }
+  }
+
   isRemotePagination = () => {
     const e = {};
     this.remoteEmitter.emit('isRemotePagination', e);

packages/react-bootstrap-table2-paginator/test/data-context.test.js

@@ -174,7 +174,7 @@ describe('PaginationDataContext', () => {
           data: [],
           pagination: { ...defaultPagination }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should reset currPage to first page', () => {
@@ -195,7 +195,7 @@ describe('PaginationDataContext', () => {
             data: [],
             pagination: { ...defaultPagination, options: { onPageChange } }
           };
-          instance.componentWillReceiveProps(nextProps);
+          instance.UNSAFE_componentWillReceiveProps(nextProps);
         });
 
         it('should call options.onPageChange correctly', () => {

packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js

@@ -164,13 +164,13 @@ describe('paginationHandler', () => {
       });
 
       it('should setting correct state.totalPages', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         expect(instance.state.totalPages).toEqual(
           instance.calculateTotalPage(nextProps.currSizePerPage));
       });
 
       it('should setting correct state.lastPage', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
         expect(instance.state.lastPage).toEqual(
           instance.calculateLastPage(totalPages));
@@ -186,13 +186,13 @@ describe('paginationHandler', () => {
       });
 
       it('should setting correct state.totalPages', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         expect(instance.state.totalPages).toEqual(
           instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
       });
 
       it('should setting correct state.lastPage', () => {
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
         const totalPages = instance.calculateTotalPage(
           nextProps.currSizePerPage, nextProps.dataSize);
         expect(instance.state.lastPage).toEqual(

packages/react-bootstrap-table2-paginator/test/state-context.test.js

@@ -156,7 +156,7 @@ describe('PaginationStateContext', () => {
           data,
           pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, totalSize: 50 } }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should always reset currPage and currSizePerPage', () => {
@@ -181,7 +181,7 @@ describe('PaginationStateContext', () => {
             options: { page: 3, sizePerPage: 5, custom: true, totalSize: 50 }
           }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should always reset currPage and currSizePerPage', () => {

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

@@ -98,6 +98,33 @@ Accept a string that will be used for default searching when first time table re
 </ToolkitProvider>
 ```
 
+#### onColumnMatch - [function]
+Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:
+
+```js
+function onColumnMatch({
+  searchText,
+  value,
+  column,
+  row
+}) {
+  // implement your custom match logic on every cell value
+}
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    onColumnMatch
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
+> Notes: You have to return `true` when your match logic is positive and vice versa.
+
 #### searchFormatted - [bool]
 If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
 

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-toolkit",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 /* eslint no-return-assign: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -34,10 +35,6 @@ class SearchBar extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.searchText });
-  }
-
   onChangeValue = (e) => {
     this.setState({ value: e.target.value });
   }
@@ -50,6 +47,10 @@ class SearchBar extends React.Component {
     debounceCallback();
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ value: nextProps.searchText });
+  }
+
   render() {
     const {
       className,

packages/react-bootstrap-table2-toolkit/src/search/context.js

@@ -3,11 +3,13 @@
 /* eslint no-continue: 0 */
 /* eslint no-lonely-if: 0 */
 /* eslint class-methods-use-this: 0 */
+/* eslint camelcase: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 
 export default (options = {
-  searchFormatted: false
+  searchFormatted: false,
+  onColumnMatch: null
 }) => (
   _,
   isRemoteSearch,
@@ -35,7 +37,17 @@ export default (options = {
       this.state = { data: initialData };
     }
 
-    componentWillReceiveProps(nextProps) {
+    getSearched() {
+      return this.state.data;
+    }
+
+    triggerListener(result) {
+      if (this.props.dataChangeListener) {
+        this.props.dataChangeListener.emit('filterChanged', result.length);
+      }
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.searchText !== this.props.searchText) {
         if (isRemoteSearch()) {
           handleRemoteSearchChange(nextProps.searchText);
@@ -59,16 +71,6 @@ export default (options = {
       }
     }
 
-    getSearched() {
-      return this.state.data;
-    }
-
-    triggerListener(result) {
-      if (this.props.dataChangeListener) {
-        this.props.dataChangeListener.emit('filterChanged', result.length);
-      }
-    }
-
     search(props) {
       const { data, columns } = props;
       const searchText = props.searchText.toLowerCase();
@@ -82,6 +84,16 @@ export default (options = {
           } else if (column.filterValue) {
             targetValue = column.filterValue(targetValue, row);
           }
+          if (options.onColumnMatch) {
+            if (options.onColumnMatch({
+              searchText,
+              value: targetValue,
+              column,
+              row
+            })) {
+              return true;
+            }
+          } else {
             if (targetValue !== null && typeof targetValue !== 'undefined') {
               targetValue = targetValue.toString().toLowerCase();
               if (targetValue.indexOf(searchText) > -1) {
@@ -89,6 +101,7 @@ export default (options = {
               }
             }
           }
+        }
         return false;
       });
     }

packages/react-bootstrap-table2/package.json

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

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

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 /* eslint arrow-body-style: 0 */
 
 import React, { Component } from 'react';
@@ -5,6 +6,7 @@ import PropTypes from 'prop-types';
 import cs from 'classnames';
 
 import Header from './header';
+import Filters from './filters';
 import Caption from './caption';
 import Body from './body';
 import Footer from './footer';
@@ -18,7 +20,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     this.validateProps();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.onDataSizeChange && !nextProps.pagination) {
       if (nextProps.data.length !== this.props.data.length) {
         nextProps.onDataSizeChange({ dataSize: nextProps.data.length });
@@ -64,7 +66,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       rowEvents,
       selectRow,
       expandRow,
-      cellEdit
+      cellEdit,
+      filterPosition
     } = this.props;
 
     const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
@@ -76,6 +79,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
     }, classes);
 
+    const hasFilters = columns.some(col => col.filter || col.filterRenderer);
+
     const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
 
     const tableCaption = (caption && <Caption>{ caption }</Caption>);
@@ -95,7 +100,21 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             onExternalFilter={ this.props.onExternalFilter }
             selectRow={ selectRow }
             expandRow={ expandRow }
+            filterPosition={ filterPosition }
           />
+          {hasFilters && filterPosition !== Const.FILTERS_POSITION_INLINE && (
+            <Filters
+              columns={ columns }
+              className={ this.props.filtersClasses }
+              onSort={ this.props.onSort }
+              onFilter={ this.props.onFilter }
+              currFilters={ this.props.currFilters }
+              filterPosition={ this.props.filterPosition }
+              onExternalFilter={ this.props.onExternalFilter }
+              selectRow={ selectRow }
+              expandRow={ expandRow }
+            />
+          )}
           <Body
             data={ this.getData() }
             keyField={ keyField }
@@ -134,7 +153,7 @@ BootstrapTable.propTypes = {
   remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     pagination: PropTypes.bool
   })]),
-  noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  noDataIndication: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   striped: PropTypes.bool,
   bordered: PropTypes.bool,
   hover: PropTypes.bool,
@@ -165,6 +184,8 @@ BootstrapTable.propTypes = {
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
     classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     nonSelectable: PropTypes.array,
+    nonSelectableStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    nonSelectableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     hideSelectColumn: PropTypes.bool,
     selectionRenderer: PropTypes.func,
@@ -198,6 +219,12 @@ BootstrapTable.propTypes = {
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   headerClasses: PropTypes.string,
+  filtersClasses: PropTypes.string,
+  filterPosition: PropTypes.oneOf([
+    Const.FILTERS_POSITION_TOP,
+    Const.FILTERS_POSITION_INLINE,
+    Const.FILTERS_POSITION_BOTTOM
+  ]),
   footerClasses: PropTypes.string,
   defaultSorted: PropTypes.arrayOf(PropTypes.shape({
     dataField: PropTypes.string.isRequired,
@@ -239,7 +266,8 @@ BootstrapTable.defaultProps = {
   cellEdit: {
     mode: null,
     nonEditableRows: []
-  }
+  },
+  filterPosition: Const.FILTERS_POSITION_INLINE
 };
 
 export default BootstrapTable;

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

@@ -17,8 +17,8 @@ export default ExtendBase =>
 
     createDefaultEventHandler(cb) {
       return (e) => {
-        const { column, columnIndex } = this.props;
+        const { column, columnIndex, index } = this.props;
-        cb(e, column, columnIndex);
+        cb(e, column, typeof columnIndex !== 'undefined' ? columnIndex : index);
       };
     }
 

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

@@ -12,5 +12,8 @@ export default {
   TYPE_STRING: 'string',
   TYPE_NUMBER: 'number',
   TYPE_BOOLEAN: 'bool',
-  TYPE_DATE: 'date'
+  TYPE_DATE: 'date',
+  FILTERS_POSITION_INLINE: 'inline',
+  FILTERS_POSITION_TOP: 'top',
+  FILTERS_POSITION_BOTTOM: 'bottom'
 };

packages/react-bootstrap-table2/src/contexts/data-context.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -12,10 +13,6 @@ export default () => {
 
     state = { data: this.props.data };
 
-    componentWillReceiveProps(nextProps) {
-      this.setState(() => ({ data: nextProps.data }));
-    }
-
     getData = (filterProps, searchProps, sortProps, paginationProps) => {
       if (paginationProps) return paginationProps.data;
       else if (sortProps) return sortProps.data;
@@ -24,6 +21,10 @@ export default () => {
       return this.props.data;
     }
 
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      this.setState(() => ({ data: nextProps.data }));
+    }
+
     render() {
       return (
         <DataContext.Provider

packages/react-bootstrap-table2/src/contexts/index.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 /* eslint no-return-assign: 0 */
 /* eslint no-param-reassign: 0 */
 /* eslint class-methods-use-this: 0 */
@@ -83,7 +84,7 @@ const withContext = Base =>
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (!nextProps.pagination && this.props.pagination) {
         this.PaginationContext = null;
       }

packages/react-bootstrap-table2/src/contexts/row-expand-context.js

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 /* eslint react/prop-types: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +17,11 @@ class RowExpandProvider extends React.Component {
   state = { expanded: this.props.expandRow.expanded || [],
     isClosing: this.props.expandRow.isClosing || [] };
 
-  componentWillReceiveProps(nextProps) {
+  onClosed = (closedRow) => {
+    this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.expandRow) {
       const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
       const isClosing = this.state.expanded.reduce((acc, cur) => {
@@ -36,10 +41,6 @@ class RowExpandProvider extends React.Component {
     }
   }
 
-  onClosed = (closedRow) => {
-    this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
-  };
-
   handleRowExpand = (rowKey, expanded, rowIndex, e) => {
     const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
     if (nonExpandable && _.contains(nonExpandable, rowKey)) {

packages/react-bootstrap-table2/src/contexts/selection-context.js

@@ -1,7 +1,9 @@
+/* eslint camelcase: 0 */
 /* eslint react/prop-types: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Const from '../const';
+import _ from '../utils';
 
 import dataOperator from '../store/operators';
 import { getSelectionSummary } from '../store/selection';
@@ -19,17 +21,17 @@ class SelectionProvider extends React.Component {
     this.selected = props.selectRow.selected || [];
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.selectRow) {
-      this.selected = nextProps.selectRow.selected || this.selected;
-    }
-  }
-
   // exposed API
   getSelected() {
     return this.selected;
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectRow) {
+      this.selected = nextProps.selectRow.selected || this.selected;
+    }
+  }
+
   handleRowSelect = (rowKey, checked, rowIndex, e) => {
     const { data, keyField, selectRow: { mode, onSelect } } = this.props;
     const { ROW_SELECT_SINGLE } = Const;
@@ -71,7 +73,7 @@ class SelectionProvider extends React.Component {
     if (!isUnSelect) {
       currSelected = selected.concat(dataOperator.selectableKeys(data, keyField, nonSelectable));
     } else {
-      currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
+      currSelected = selected.filter(s => typeof data.find(d => _.get(d, keyField) === s) === 'undefined');
     }
 
     let result;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from './utils';
+
+const FiltersCell = (props) => {
+  const {
+    index, column, onExternalFilter,
+    currFilters, onFilter
+  } = props;
+  const { filterRenderer, filter } = column;
+  let filterElm;
+  const cellAttrs = {};
+  const cellStyle = {};
+  cellAttrs.style = cellStyle;
+  if (column.headerAlign) {
+    cellStyle.textAlign = _.isFunction(column.headerAlign)
+      ? column.headerAlign(column, index)
+      : column.headerAlign;
+  }
+  if (column.filterRenderer) {
+    const onCustomFilter = onExternalFilter(column, filter.props.type);
+    filterElm = filterRenderer(onCustomFilter, column);
+  } else if (filter) {
+    filterElm = (
+      <filter.Filter
+        { ...filter.props }
+        filterState={ currFilters[column.dataField] }
+        onFilter={ onFilter }
+        column={ column }
+      />
+    );
+  }
+  return React.createElement('th', cellAttrs, filterElm);
+};
+
+FiltersCell.propTypes = {
+  index: PropTypes.number.isRequired,
+  column: PropTypes.object.isRequired,
+  currFilters: PropTypes.object.isRequired,
+  onFilter: PropTypes.func,
+  onExternalFilter: PropTypes.func
+};
+
+FiltersCell.defaultProps = {
+  onFilter: () => { },
+  onExternalFilter: () => { }
+};
+
+export default FiltersCell;

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

@@ -0,0 +1,83 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FiltersCell from './filters-cell';
+import Const from './const';
+import RowTemplate from './row/row-template';
+
+const Filters = (props) => {
+  const {
+    columns,
+    onFilter,
+    currFilters,
+    filterPosition,
+    onExternalFilter,
+    className,
+    selectRow,
+    expandRow
+  } = props;
+
+  function renderContent() {
+    const filterColumns = [];
+    let showFiltersRow = false;
+
+    columns.forEach((column, i) => {
+      filterColumns.push(<FiltersCell
+        index={ i }
+        key={ column.dataField }
+        column={ column }
+        currFilters={ currFilters }
+        onExternalFilter={ onExternalFilter }
+        onFilter={ onFilter }
+      />);
+
+      if (column.filterRenderer || column.filter) {
+        if (!showFiltersRow) {
+          showFiltersRow = true;
+        }
+      }
+    });
+    return filterColumns;
+  }
+
+  return (
+    <tbody
+      className={ className }
+      style={ {
+        display:
+        filterPosition === Const.FILTERS_POSITION_TOP
+          ? 'table-header-group'
+          : 'table-footer-group'
+      } }
+    >
+      <RowTemplate
+        renderContent={ renderContent }
+        selectRow={ selectRow }
+        expandRow={ expandRow }
+        cellEl="td"
+      />
+    </tbody>
+  );
+};
+
+Filters.propTypes = {
+  columns: PropTypes.array.isRequired,
+  onFilter: PropTypes.func,
+  filterPosition: PropTypes.oneOf([
+    Const.FILTERS_POSITION_TOP,
+    Const.FILTERS_POSITION_INLINE,
+    Const.FILTERS_POSITION_BOTTOM
+  ]),
+  currFilters: PropTypes.object,
+  onExternalFilter: PropTypes.func,
+  className: PropTypes.string,
+  selectRow: PropTypes.object,
+  expandRow: PropTypes.object
+};
+
+Filters.defaultProps = {
+  position: Const.FILTERS_POSITION_TOP
+};
+
+export default Filters;

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

@@ -4,9 +4,11 @@ import cs from 'classnames';
 import PropTypes from 'prop-types';
 
 import _ from './utils';
+import eventDelegater from './cell-event-delegater';
 
-const FooterCell = (props) => {
+class FooterCell extends eventDelegater(React.Component) {
-  const { index, column, columnData } = props;
+  render() {
+    const { index, column, columnData } = this.props;
 
     const {
       footer,
@@ -19,11 +21,13 @@ const FooterCell = (props) => {
       footerAttrs
     } = column;
 
+    const delegateEvents = this.delegate(footerEvents);
     const cellAttrs = {
       ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
-    ...footerEvents
+      ...delegateEvents
     };
 
+
     let text = '';
     if (_.isString(footer)) {
       text = footer;
@@ -53,7 +57,8 @@ const FooterCell = (props) => {
     const children = footerFormatter ? footerFormatter(column, index) : text;
 
     return React.createElement('th', cellAttrs, children);
-};
+  }
+}
 
 FooterCell.propTypes = {
   columnData: PropTypes.array,

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

@@ -2,20 +2,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Const from './const';
+import RowTemplate from './row/row-template';
 import FooterCell from './footer-cell';
 import _ from './utils';
 
 const Footer = (props) => {
   const { data, className, columns, selectRow, expandRow } = props;
-  const SelectionFooterCellComp = () => <th />;
-  const ExpansionFooterCellComp = () => <th />;
 
-  const isRenderFunctionColumnInLeft = (
+  function renderContent() {
-    position = Const.INDICATOR_POSITION_LEFT
+    return columns.map((column, i) => {
-  ) => position === Const.INDICATOR_POSITION_LEFT;
-
-  const childrens = columns.map((column, i) => {
       if (column.footer === undefined || column.footer === null) {
         return false;
       }
@@ -31,28 +26,17 @@ const Footer = (props) => {
         />
       );
     });
-
-  if (selectRow && selectRow.hideSelectColumn !== true) {
-    if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
-      childrens.unshift(<SelectionFooterCellComp key="selection" />);
-    } else {
-      childrens.push(<SelectionFooterCellComp key="selection" />);
-    }
-  }
-
-  if (expandRow.showExpandColumn) {
-    if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
-      childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
-    } else {
-      childrens.push(<ExpansionFooterCellComp key="expansion" />);
-    }
   }
 
   return (
     <tfoot>
-      <tr className={ className }>
+      <RowTemplate
-        { childrens }
+        renderContent={ renderContent }
-      </tr>
+        selectRow={ selectRow }
+        expandRow={ expandRow }
+        className={ className }
+        cellEl="th"
+      />
     </tfoot>
   );
 };

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

@@ -7,9 +7,11 @@ import Const from './const';
 import SortSymbol from './sort/symbol';
 import SortCaret from './sort/caret';
 import _ from './utils';
+import eventDelegater from './cell-event-delegater';
 
 
-const HeaderCell = (props) => {
+class HeaderCell extends eventDelegater(React.Component) {
+  render() {
     const {
       column,
       index,
@@ -19,8 +21,9 @@ const HeaderCell = (props) => {
       isLastSorting,
       onFilter,
       currFilters,
+      filterPosition,
       onExternalFilter
-  } = props;
+    } = this.props;
 
     const {
       text,
@@ -39,10 +42,16 @@ const HeaderCell = (props) => {
       headerSortingStyle
     } = column;
 
+    const delegateEvents = this.delegate(headerEvents);
+
+    const customAttrs = _.isFunction(headerAttrs)
+      ? headerAttrs(column, index)
+      : (headerAttrs || {});
+
     const cellAttrs = {
-    ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
+      ...customAttrs,
-    ...headerEvents,
+      ...delegateEvents,
-    tabIndex: 0
+      tabIndex: _.isDefined(customAttrs.tabIndex) ? customAttrs.tabIndex : 0
     };
 
     let sortSymbol;
@@ -96,6 +105,7 @@ const HeaderCell = (props) => {
     if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
     if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
 
+    if (filterPosition === Const.FILTERS_POSITION_INLINE) {
       if (filterRenderer) {
         const onCustomFilter = onExternalFilter(column, filter.props.type);
         filterElm = filterRenderer(onCustomFilter, column);
@@ -109,6 +119,7 @@ const HeaderCell = (props) => {
           />
         );
       }
+    }
 
     const children = headerFormatter ?
       headerFormatter(column, index, { sortElement: sortSymbol, filterElement: filterElm }) :
@@ -119,7 +130,8 @@ const HeaderCell = (props) => {
     }
 
     return React.createElement('th', cellAttrs, children, sortSymbol, filterElm);
-};
+  }
+}
 
 HeaderCell.propTypes = {
   column: PropTypes.shape({
@@ -171,6 +183,8 @@ HeaderCell.propTypes = {
   sortCaret: PropTypes.func,
   isLastSorting: PropTypes.bool,
   onFilter: PropTypes.func,
+  filterPosition: PropTypes.oneOf([Const.FILTERS_POSITION_INLINE,
+    Const.FILTERS_POSITION_BOTTOM, Const.FILTERS_POSITION_TOP]),
   currFilters: PropTypes.object,
   onExternalFilter: PropTypes.func
 };

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

@@ -18,9 +18,10 @@ const Header = (props) => {
     sortField,
     sortOrder,
     selectRow,
+    expandRow,
     currFilters,
     onExternalFilter,
-    expandRow
+    filterPosition
   } = props;
 
   let SelectionHeaderCellComp = () => null;
@@ -50,11 +51,12 @@ const Header = (props) => {
           column={ column }
           onSort={ onSort }
           sorting={ currSort }
+          sortOrder={ sortOrder }
+          isLastSorting={ isLastSorting }
           onFilter={ onFilter }
           currFilters={ currFilters }
           onExternalFilter={ onExternalFilter }
-          sortOrder={ sortOrder }
+          filterPosition={ filterPosition }
-          isLastSorting={ isLastSorting }
         />);
     })
   ];
@@ -94,7 +96,12 @@ Header.propTypes = {
   currFilters: PropTypes.object,
   onExternalFilter: PropTypes.func,
   className: PropTypes.string,
-  expandRow: PropTypes.object
+  expandRow: PropTypes.object,
+  filterPosition: PropTypes.oneOf([
+    Const.FILTERS_POSITION_TOP,
+    Const.FILTERS_POSITION_INLINE,
+    Const.FILTERS_POSITION_BOTTOM
+  ])
 };
 
 export default Header;

packages/react-bootstrap-table2/src/props-resolver/column-resolver.js

@@ -1,7 +1,13 @@
 export default ExtendBase =>
   class ColumnResolver extends ExtendBase {
     visibleColumnSize(includeSelectColumn = true) {
-      let columnLen = this.props.columns.filter(c => !c.hidden).length;
+      let columnLen;
+      if (this.props.columnToggle && this.props.columnToggle.toggles) {
+        const columns = this.props.columnToggle.toggles;
+        columnLen = Object.keys(columns).filter(name => columns[name]).length;
+      } else {
+        columnLen = this.props.columns.filter(c => !c.hidden).length;
+      }
       if (!includeSelectColumn) return columnLen;
       if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
         columnLen += 1;

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

@@ -44,7 +44,7 @@ export default class ExpandCell extends Component {
     if (tabIndex !== -1) attrs.tabIndex = tabIndex;
 
     return (
-      <td onClick={ this.handleClick } { ...attrs }>
+      <td className="expand-cell" onClick={ this.handleClick } { ...attrs }>
         {
           expandColumnRenderer ? expandColumnRenderer({
             expandable,

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

@@ -28,7 +28,7 @@ export default class ExpansionHeaderCell extends Component {
     };
 
     return (
-      <th data-row-selection { ...attrs }>
+      <th className="expand-cell-header" data-row-selection { ...attrs }>
         {
           expandHeaderColumnRenderer ?
             expandHeaderColumnRenderer({ isAnyExpands }) :

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

@@ -9,6 +9,7 @@ export default (Component) => {
     const key = props.value;
     const selected = _.contains(selectRow.selected, key);
     const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
+    const notSelectable = _.contains(selectRow.nonSelectable, key);
 
     let {
       style,
@@ -38,6 +39,22 @@ export default (Component) => {
       }
     }
 
+    if (notSelectable) {
+      const notSelectableStyle = _.isFunction(selectRow.nonSelectableStyle)
+        ? selectRow.nonSelectableStyle(props.row, props.rowIndex)
+        : selectRow.nonSelectableStyle;
+
+      const notSelectableClasses = _.isFunction(selectRow.nonSelectableClasses)
+        ? selectRow.nonSelectableClasses(props.row, props.rowIndex)
+        : selectRow.nonSelectableClasses;
+
+      style = {
+        ...style,
+        ...notSelectableStyle
+      };
+      className = cs(className, notSelectableClasses) || undefined;
+    }
+
     return (
       <Component
         { ...props }

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

@@ -86,7 +86,7 @@ export default class SelectionCell extends Component {
       <BootstrapContext.Consumer>
         {
           ({ bootstrap4 }) => (
-            <td onClick={ this.handleClick } { ...attrs }>
+            <td className="selection-cell" onClick={ this.handleClick } { ...attrs }>
               {
                 selectionRenderer ? selectionRenderer({
                   mode: inputType,

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

@@ -112,7 +112,7 @@ export default class SelectionHeaderCell extends Component {
               );
             }
             return (
-              <th data-row-selection { ...attrs }>{ content }</th>
+              <th className="selection-cell-header" data-row-selection { ...attrs }>{ content }</th>
             );
           }
         }

packages/react-bootstrap-table2/src/row/row-template.js

@@ -0,0 +1,48 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Const from '../const';
+
+const RowTemplate = (props) => {
+  const {
+    renderContent,
+    selectRow,
+    expandRow,
+    cellEl,
+    ...rest
+  } = props;
+
+  const isRenderFunctionColumnInLeft = (
+    position = Const.INDICATOR_POSITION_LEFT
+  ) => position === Const.INDICATOR_POSITION_LEFT;
+
+  const childrens = renderContent() || [];
+
+  if (selectRow && selectRow.hideSelectColumn !== true) {
+    if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+      childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
+    } else {
+      childrens.push(React.createElement(cellEl, { key: 'selection' }));
+    }
+  }
+
+  if (expandRow.showExpandColumn) {
+    if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
+      childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
+    } else {
+      childrens.push(React.createElement(cellEl, { key: 'expansion' }));
+    }
+  }
+
+  return <tr { ...rest }>{ childrens }</tr>;
+};
+
+RowTemplate.propTypes = {
+  renderContent: PropTypes.func.isRequired,
+  cellEl: PropTypes.string.isRequired,
+  selectRow: PropTypes.object,
+  expandRow: PropTypes.object
+};
+
+export default RowTemplate;

packages/react-bootstrap-table2/src/store/selection.js

@@ -2,14 +2,14 @@ import _ from '../utils';
 import { getRowByRowId } from './rows';
 
 export const getSelectionSummary = (
-  data,
+  data = [],
   keyField,
   selected = []
 ) => {
   let allRowsSelected = data.length > 0;
   let allRowsNotSelected = true;
 
-  const rowKeys = data.map(d => d[keyField]);
+  const rowKeys = data.map(d => _.get(d, keyField));
   for (let i = 0; i < rowKeys.length; i += 1) {
     const curr = rowKeys[i];
     if (typeof selected.find(x => x === curr) === 'undefined') {
@@ -24,7 +24,7 @@ export const getSelectionSummary = (
   };
 };
 
-export const selectableKeys = (data, keyField, skips = []) => {
+export const selectableKeys = (data = [], keyField, skips = []) => {
   if (skips.length === 0) {
     return data.map(row => _.get(row, keyField));
   }
@@ -40,6 +40,6 @@ export const unSelectableKeys = (selected, skips = []) => {
   return selected.filter(x => _.contains(skips, x));
 };
 
-export const getSelectedRows = (data, keyField, selected) =>
+export const getSelectedRows = (data = [], keyField, selected) =>
   selected.map(k => getRowByRowId(data, keyField, k)).filter(x => !!x);
 

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

@@ -14,14 +14,19 @@ function comparator(a, b) {
   return result;
 }
 
-export const sort = (data, sortOrder, { dataField, sortFunc }) => {
+export const sort = (data, sortOrder, { dataField, sortFunc, sortValue }) => {
   const _data = [...data];
   _data.sort((a, b) => {
     let result;
     let valueA = _.get(a, dataField);
     let valueB = _.get(b, dataField);
+    if (sortValue) {
+      valueA = sortValue(valueA, a);
+      valueB = sortValue(valueB, b);
+    } else {
       valueA = _.isDefined(valueA) ? valueA : '';
       valueB = _.isDefined(valueB) ? valueB : '';
+    }
 
     if (sortFunc) {
       result = sortFunc(valueA, valueB, sortOrder, dataField, a, b);

packages/react-bootstrap-table2/test/contexts/data-context.test.js

@@ -81,7 +81,7 @@ describe('DataContext', () => {
 
     beforeEach(() => {
       wrapper = shallow(shallowContext());
-      wrapper.instance().componentWillReceiveProps({
+      wrapper.instance().UNSAFE_componentWillReceiveProps({
         data: newData
       });
     });

packages/react-bootstrap-table2/test/contexts/selection-context.test.js

@@ -99,7 +99,7 @@ describe('DataContext', () => {
 
     beforeEach(() => {
       wrapper = shallow(shallowContext());
-      wrapper.instance().componentWillReceiveProps({
+      wrapper.instance().UNSAFE_componentWillReceiveProps({
         selectRow: newSelectRow
       });
     });
@@ -115,7 +115,7 @@ describe('DataContext', () => {
           ...defaultSelectRow,
           selected: defaultSelected
         }));
-        wrapper.instance().componentWillReceiveProps({
+        wrapper.instance().UNSAFE_componentWillReceiveProps({
           selectRow: defaultSelectRow
         });
       });
@@ -128,7 +128,7 @@ describe('DataContext', () => {
     describe('if nextProps.selectRow is not existing', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext());
-        wrapper.instance().componentWillReceiveProps({});
+        wrapper.instance().UNSAFE_componentWillReceiveProps({});
       });
 
       it('should not set this.selected', () => {

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

@@ -48,7 +48,7 @@ describe('Footer', () => {
 
   describe('simplest footer', () => {
     beforeEach(() => {
-      wrapper = shallow(
+      wrapper = render(
         <Footer
           data={ data }
           columns={ columns }
@@ -61,7 +61,7 @@ describe('Footer', () => {
     it('should render successfully', () => {
       expect(wrapper.length).toBe(1);
       expect(wrapper.find('tr').length).toBe(1);
-      expect(wrapper.find(FooterCell).length).toBe(columns.length);
+      expect(wrapper.find('th').length).toBe(columns.length);
     });
   });
 
@@ -86,7 +86,7 @@ describe('Footer', () => {
     });
   });
 
-  describe('when selecrRow prop is enable', () => {
+  describe('when selectRow prop is enable', () => {
     beforeEach(() => {
       wrapper = render(
         <Footer

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

@@ -729,7 +729,13 @@ describe('HeaderCell', () => {
         }
       };
       wrapper = shallow(
-        <HeaderCell column={ column } index={ index } onFilter={ onFilter } currFilters={ {} } />
+        <HeaderCell
+          column={ column }
+          index={ index }
+          onFilter={ onFilter }
+          currFilters={ {} }
+          filterPosition="inline"
+        />
       );
     });
 
@@ -767,7 +773,12 @@ describe('HeaderCell', () => {
         filterRenderer
       };
       wrapper = shallow(
-        <HeaderCell column={ column } index={ index } onExternalFilter={ onExternalFilter } />);
+        <HeaderCell
+          column={ column }
+          index={ index }
+          filterPosition="inline"
+          onExternalFilter={ onExternalFilter }
+        />);
     });
 
     it('should render successfully', () => {

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

@@ -2,6 +2,7 @@
 
 exports[`<SelectionCell /> render should render component correctly 1`] = `
 <td
+  className="selection-cell"
   onClick={[Function]}
 >
   <input

yarn.lock

@@ -1686,9 +1686,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.5:
+classnames@^2.2.5:
-  version "2.2.5"
+  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
 clean-css@4.1.9, clean-css@4.1.x:
   version "4.1.9"