Publish

- react-bootstrap-table2-example@1.0.36
 - react-bootstrap-table2-toolkit@2.1.1
 - react-bootstrap-table-next@3.3.3

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is. In addition, please search issues before you open a report to make sure there's no any duplicated report
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily and handle it effectively

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Is this feature requested before?**
+Please search issues to make sure to create feature which is never report yet.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/i-have-a-question.md

@@ -0,0 +1,17 @@
+---
+name: I have a question
+about: I have a question
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Question**
+A clear and concise description of you question. In addition, please search issues before you open a question to make sure there's no any duplicated questions.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily.

README.md

@@ -1,7 +1,7 @@
 # react-bootstrap-table2
 
 [![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
-Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuild of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
 > Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
 

docs/README.md

@@ -28,11 +28,14 @@
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
 * [hiddenRows](#hiddenRows)
+* [sort](#sort)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
+* [filterPosition](filterPosition)
 * [onTableChange](#onTableChange)
+* [onDataSizeChange](#onDataSizeChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
 Tells `react-bootstrap-table2` which column is unique.
@@ -97,7 +100,14 @@ import overlayFactory from 'react-bootstrap-table2-overlay';
 Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
 
 ```js
-overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+overlay={
+  overlayFactory({
+    spinner: true,
+    styles: {
+      overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'})
+    }
+  })
+}
 ```
 
 ### <a name='caption'>caption - [String | Node]</a>
@@ -190,6 +200,27 @@ const hiddenRows = [1, 4];
 <BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
 ```
 
+### <a name='sort'>sort - [Object]</a>
+Two cases you probably need to configure `sort` prop:
+
+#### Manage sorting state
+You can give `dataField` and `order` to specify the sorting state in table, For example
+
+```js
+<BootstrapTable sort={ { dataField: 'price', order: 'asc' } }>
+```
+
+#### One-time sorting configuration
+In earily version, we only can configure [`sortCaret`](./columns.md#sortCaret) and [`sortFunc` ](./columns.md#sortFunc) per column. But they are same in most of cases.   
+So here we give you a chance to just setup these prop in one time.
+
+```js
+<BootstrapTable sort={ {
+  sortCaret: ...
+  sortFunc: ...
+} }>
+```
+
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 
@@ -200,6 +231,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`.
 
@@ -317,4 +350,23 @@ Following is a shape of `newState`
     newValue
   }
 }
-```
+```
+
+### <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:
+
+* `dataSize`: The new data size
+
+```js
+handleDataChange = ({ dataSize }) => {
+  this.setState({ rowCount: dataSize });
+}
+
+<BootstrapTable
+  onDataSizeChange={ handleDataChange }
+  ....
+/>
+```

docs/cell-edit.md

@@ -69,7 +69,7 @@ const cellEdit: {
   // omit...
   beforeSaveCell(oldValue, newValue, row, column, done) {
     setTimeout(() => {
-      if (confirm('Do you want to accep this change?')) {
+      if (confirm('Do you want to accept this change?')) {
         done(); // contine to save the changes
       } else {
         done(false); // reject the changes

docs/columns.md

@@ -11,7 +11,9 @@ Available properties in a column object:
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
+* [type](#type)
 * [sort](#sort)
+* [sortValue](#sortValue)
 * [sortFunc](#sortFunc)
 * [sortCaret](#sortCaret)
 * [onSort](#onSort)
@@ -30,6 +32,14 @@ Available properties in a column object:
 * [headerAttrs](#headerAttrs)
 * [headerSortingClasses](#headerSortingClasses)
 * [headerSortingStyle](#headerSortingStyle)
+* [footer](#footer)
+* [footerFormatter](#footerFormatter)
+* [footerClasses](#footerClasses)
+* [footerStyle](#footerStyle)
+* [footerTitle](#footerTitle)
+* [footerEvents](#footerEvents)
+* [footerAlign](#footerAlign)
+* [footerAttrs](#footerAttrs)
 * [editable](#editable)
 * [validator](#validator)
 * [editCellStyle](#editCellStyle)
@@ -40,6 +50,7 @@ Available properties in a column object:
 * [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
+* [searchable](#searchable)
 * [csvType](#csvType)
 * [csvFormatter](#csvFormatter)
 * [csvText](#csvText)
@@ -124,11 +135,49 @@ The third argument: `components` have following specified properties:
 ## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
 It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
 
+## <a name='type'>column.type - [String]</a>
+Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`.   
+`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
+
 ## <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
 {
@@ -156,7 +205,7 @@ Enable the column sort via a `true` value given.
 ```
 
 ## <a name='sortCaret'>column.sortCaret - [Function]</a>
-Use`column.sortCaret` to custom the sort caret. This callback function accept two arguments: `order` and `column`
+Use`column.sortCaret` to customize the sort caret. This callback function accept two arguments: `order` and `column`
 
 ```js
 {
@@ -302,7 +351,7 @@ A new `Object` will be the result of element headerStyle.
 A new `String` will be the result of element title.
 
 ## <a name='headerTitle'>column.headerTitle - [Bool | Function]</a>
-`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
+Configure the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
 
 ```js
 {
@@ -407,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) => { ... }
   }
 }
 ```
@@ -518,6 +567,162 @@ const sortingHeaderStyle = {
 };
 ```
 
+### <a name='footer'>footer - [String | Function]</a>
+Give a string to render the string value on the footer column.
+
+```js
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, .....];
+```
+
+This prop also accept a function:
+
+```js
+{
+  dataField: 'price',
+  text: 'Product Price',
+  footer: column => column.reduce((acc, item) => acc + item, 0)
+}
+```
+
+## <a name='footerFormatter'>column.footerFormatter - [Function]</a>
+`footerFormatter` allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+
+* `column`
+* `columnIndex`
+
+## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
+It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
+
+```js
+{
+  // omit...
+  footerClasses: 'id-custom-cell'
+}
+```
+Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
+
+```js
+{
+  footerClasses: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerStyle'>column.footerStyle - [Object | Function]</a>
+Customized the inline-style on table footer column:
+
+```js
+{
+  // omit...
+  footerStyle: { backgroundColor: 'green' }
+}
+```
+
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
+
+```js
+{
+  footerStyle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerTitle'>column.footerTitle - [Bool | Function]</a>
+Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#title), 
+
+```js
+{
+  // omit...
+  footerTitle: true
+}
+```
+
+It's also available to custom via a callback function:
+```js
+{
+  footerTitle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerEvents'>column.footerEvents - [Object]</a>
+`footerEvents` same as [`column.events`](#events) but it is for footer column:
+
+```js
+{
+  // omit...
+  footerEvents: {
+    onClick: (e, column, columnIndex) => { ... }
+  }
+}
+```
+
+## <a name='footerAlign'>column.footerAlign - [String | Function]</a>
+It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column. 
+
+```js
+{
+  // omit...
+  footerAlign: 'center'
+}
+```
+
+Also, you can custom the align by a callback function:
+
+```js
+{
+  // omit...
+  footerAlign: (column, colIndex) => {
+    // column is an object and perform itself
+    // return custom title here
+  }
+}
+```
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerAttrs'>column.footerAttrs - [Object | Function]</a>
+`footerAttrs` is similar to [`column.attrs`](#attrs) but it works for footer column. 
+```js
+{
+  // omit...
+  footerAttrs: {
+    title: 'bar',
+    'data-test': 'foo'
+  }
+}
+```
+
+Additionally, customize the header attributes by a **2** arguments callback function:
+
+```js
+{
+  // omit...
+  footerAttrs: (column, colIndex) => ({
+    // return customized HTML attribute here
+  })
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
 ## <a name='editable'>column.editable - [Bool | Function]</a>
 `column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
 
@@ -748,6 +953,9 @@ A final `String` value you want to be filtered.
 }
 ```
 
+## <a name='searchable'>column.searchable - [Boolean]</a>
+Default the column is searchable. Give `false` to disable search functionality on specified column.
+
 ## <a name='csvType'>column.csvType - [Object]</a>
 Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
 

docs/migration.md

@@ -23,7 +23,7 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
 * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
   * Overlay/Loading Addons
 * [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
-  * Table Toolkits, like search, csv etc.
+  * Table Toolkits, like search, csv, column toggle etc.
 
 This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
 
@@ -118,7 +118,7 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
 
 - [x] Custom search component and position
 - [x] Custom search value
-- [ ] Clear search
+- [x] Clear search
 - [ ] Multiple search
 - [ ] Strict search
 

docs/row-expand.md

@@ -2,7 +2,7 @@
 # Row expand
 `react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality. 
 
-> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
+> Default is click to expand/collapse a row. In addition, we don't support any way to change this mechanism!
 
 ## Required
 * [renderer (**required**)](#renderer)
@@ -15,8 +15,11 @@
 * [showExpandColumn](#showExpandColumn)
 * [onlyOneExpanding](#onlyOneExpanding)
 * [expandByColumnOnly](#expandByColumnOnly)
+* [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [className](#className)
+* [parentClassName](#parentClassName)
 
 ### <a name="renderer">expandRow.renderer - [Function]</a>
 
@@ -24,12 +27,13 @@ Specify the content of expand row, `react-bootstrap-table2` will pass a row obje
 
 #### values
 * **row**
+* **rowIndex**
 
 #### examples
 
 ```js
 const expandRow = {
-  renderer: row => (
+  renderer: (row, rowIndex) => (
     <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>
@@ -153,3 +157,56 @@ const expandRow = {
   expandByColumnOnly: true
 };
 ```
+
+### <a name='expandColumnPosition'>expandRow.expandColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering expand column in the right side.
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  showExpandColumn: true,
+  expandColumnPosition: 'right'
+};
+```
+
+### <a name='className'>expandRow.className - [String | Function]</a>
+Apply the custom class name on the expanding row. For example: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  className: 'foo'
+};
+```
+following usage is more flexible way for customing the class name: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'foo';
+    return 'bar';
+  }
+};
+```
+
+### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
+Apply the custom class name on parent row of expanded row. For example: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  parentClassName: 'foo'
+};
+```
+Below case is more flexible way to custom the class name: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'foo';
+    return 'bar';
+  }
+};
+```

docs/row-selection.md

@@ -1,6 +1,6 @@
 
 # Row selection
-`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first. 
+`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
 
 ## Required
 * [mode (**required**)](#mode)
@@ -11,15 +11,20 @@
 * [classes)](#classes)
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
+* [nonSelectableStyle](#nonSelectableStyle)
+* [nonSelectableClasses](#nonSelectableClasses)
 * [clickToSelect)](#clickToSelect)
 * [clickToExpand)](#clickToExpand)
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
 * [hideSelectColumn](#hideSelectColumn)
 * [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
+* [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -136,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.
 
@@ -146,7 +199,7 @@ const selectRow = {
 };
 ```
 
-> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing   
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
 > If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
 
 ### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
@@ -176,7 +229,7 @@ Provide a callback function which allow you to custom the checkbox/radio box. Th
 ```js
 const selectRow = {
   mode: 'checkbox',
-  selectionRenderer: ({ mode, checked, disabled }) => (
+  selectionRenderer: ({ mode, checked, disabled, rowIndex }) => (
     // ....
   )
 };
@@ -198,6 +251,67 @@ const selectRow = {
 
 > By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
 
+
+### <a name='headerColumnStyle'>selectRow.headerColumnStyle - [Object | Function]</a>
+A way to custome the selection header cell. `headerColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  headerColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  headerColumnStyle:  (status) => (
+    // status available value is checked, indeterminate and unchecked
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
+### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle:  ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => (
+    // ....
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
 ### <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`.
@@ -243,12 +357,22 @@ const selectRow = {
   mode: 'checkbox',
   onSelectAll: (isSelect, rows, e) => {
     if (isSelect && SOME_CONDITION) {
-      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
+      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected
     }
   }
 };
 ```
 
+### <a name='selectColumnPosition'>selectRow.selectColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnPosition: 'right'
+};
+```
+
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 

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",
@@ -89,7 +89,8 @@
   "jest": {
     "collectCoverageFrom": [
       "packages/*/src/**/*.js",
-      "packages/*/index.js"
+      "packages/*/index.js",
+      "!packages/react-bootstrap-table2-example/**/*.js"
     ],
     "roots": [
       "<rootDir>/packages"

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

@@ -89,7 +89,10 @@ const columns = [
 In the following, we go though all the predefined editors:
 
 ### Dropdown Editor
-Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop.
+
+#### editor.options
+This is most simple case for assign the dropdown options data directly.   
 
 ```js
 import { Type } from 'react-bootstrap-table2-editor';
@@ -119,6 +122,46 @@ const columns = [
 }];
 ```
 
+#### editor.getOptions
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+
+There are two case for `getOptions`:
+
+* *Synchronous*: Just return the options array in `getOptions` callback function
+* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. 
+
+
+```js
+// Synchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => [.....]
+  }
+}];
+
+// Asynchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      setTimeout(() => setOptions([...]), 1500);
+    }
+  }
+}];
+
+```
+
+[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
+
 ### Date Editor
 Date editor is use `<input type="date">`, the configuration is very simple:
 
@@ -132,7 +175,7 @@ const columns = [
     if (typeof cell !== 'object') {
       dateObj = new Date(cell);
     }
-    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
   },
   editor: {
     type: Type.DATE
@@ -173,16 +216,16 @@ If you feel above predefined editors are not satisfied to your requirement, you
 
 * `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
 * `value`: Current cell value
-* `row`: Current row data 
+* `row`: Current row data
-* `column`: Current column definition 
+* `column`: Current column definition
-* `rowIndex`: Current row index 
+* `rowIndex`: Current row index
 * `columnIndex`: Current column index
 
 > Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
 
 > Note when you want to save value, you can call **editorProps.onUpdate** function
 
-Following is a short example: 
+Following is a short example:
 
 ```js
 class QualityRanger extends React.Component {

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.2.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(() => ({
@@ -56,12 +59,13 @@ export default (
     }
 
     handleCellUpdate(row, column, newValue) {
+      const newValueWithType = dataOperator.typeConvert(column.type, newValue);
       const { cellEdit } = this.props;
       const { beforeSaveCell } = cellEdit.options;
       const oldValue = _.get(row, column.dataField);
       const beforeSaveCellDone = (result = true) => {
         if (result) {
-          this.doUpdate(row, column, newValue);
+          this.doUpdate(row, column, newValueWithType);
         } else {
           this.escapeEditing();
         }
@@ -69,7 +73,7 @@ export default (
       if (_.isFunction(beforeSaveCell)) {
         const result = beforeSaveCell(
           oldValue,
-          newValue,
+          newValueWithType,
           row,
           column,
           beforeSaveCellDone
@@ -78,7 +82,7 @@ export default (
           return;
         }
       }
-      this.doUpdate(row, column, newValue);
+      this.doUpdate(row, column, newValueWithType);
     }
 
     doUpdate(row, column, newValue) {

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

@@ -4,6 +4,21 @@ import cs from 'classnames';
 import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
+  constructor(props) {
+    super(props);
+    let options = props.options;
+    if (props.getOptions) {
+      options = props.getOptions(
+        this.setOptions.bind(this),
+        {
+          row: props.row,
+          column: props.column
+        }
+      ) || [];
+    }
+    this.state = { options };
+  }
+
   componentDidMount() {
     const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
@@ -11,12 +26,16 @@ class DropDownEditor extends Component {
     if (didMount) didMount();
   }
 
+  setOptions(options) {
+    this.setState({ options });
+  }
+
   getValue() {
     return this.select.value;
   }
 
   render() {
-    const { defaultValue, didMount, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, getOptions, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -31,7 +50,7 @@ class DropDownEditor extends Component {
         defaultValue={ defaultValue }
       >
         {
-          options.map(({ label, value }) => (
+          this.state.options.map(({ label, value }) => (
             <option key={ value } value={ value }>{ label }</option>
           ))
         }
@@ -41,6 +60,8 @@ class DropDownEditor extends Component {
 }
 
 DropDownEditor.propTypes = {
+  row: PropTypes.object.isRequired,
+  column: PropTypes.object.isRequired,
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
@@ -52,13 +73,16 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired,
+  ]),
-  didMount: PropTypes.func
+  didMount: PropTypes.func,
+  getOptions: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
   style: {},
-  didMount: undefined
+  options: [],
+  didMount: undefined,
+  getOptions: undefined
 };
 export default DropDownEditor;

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);
@@ -201,7 +202,7 @@ export default (_, onStartEdit) =>
       if (_.isFunction(column.editorRenderer)) {
         editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
-        editor = <DropdownEditor { ...editorProps } />;
+        editor = <DropdownEditor { ...editorProps } row={ row } column={ column } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
         editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {

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/.storybook/webpack.config.js

@@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
 const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -43,7 +44,13 @@ const loaders = [{
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
+  include: [
+    storyPath,
+    sourceStylePath,
+    paginationStylePath,
+    filterStylePath,
+    toolkitStylePath
+  ],
 }, {
   test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',

packages/react-bootstrap-table2-example/examples/basic/exposed-function.js

@@ -45,8 +45,12 @@ class ExposedFunctionTable extends React.Component {
     console.log(this.node.table.props.data);
   }
 
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
   handleGetSelectedData = () => {
-    console.log(this.node.selectionContext.state.selected);
+    console.log(this.node.selectionContext.selected);
   }
 
   handleGetExpandedData = () => {
@@ -117,7 +121,7 @@ export default class ExposedFunctionTable extends React.Component {
   }
 
   handleGetSelectedData = () => {
-    console.log(this.node.selectionContext.state.selected);
+    console.log(this.node.selectionContext.selected);
   }
 
   handleGetExpandedData = () => {

packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js

@@ -0,0 +1,49 @@
+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 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 CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
+
+<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+
+<BootstrapTable bootstrap4 keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
+`;
+
+const Caption = () => <h3 style={ { borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' } }>Component as Header</h3>;
+
+export default () => (
+  <div>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+    <BootstrapTable bootstrap4 keyField="id" data={ products } caption={ <Caption /> } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/bootstrap4/column-toggle.js

@@ -0,0 +1,81 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+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, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js

@@ -0,0 +1,90 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+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, CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <ClearSearchButton { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js

@@ -0,0 +1,123 @@
+/* eslint prefer-template: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const products = stockGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Stock ID'
+}, {
+  dataField: 'name',
+  text: 'Stock Name'
+}, {
+  dataField: 'price',
+  text: 'Price',
+  type: 'number'
+}, {
+  dataField: 'visible',
+  text: 'Visible?',
+  type: 'bool',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'true:false'
+  }
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  type: 'date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Stock ID'
+}, {
+  dataField: 'name',
+  text: 'Stock Name'
+}, {
+  dataField: 'price',
+  text: 'Price',
+  type: 'number'
+}, {
+  dataField: 'visible',
+  text: 'Visible?',
+  type: 'bool',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'true:false'
+  }
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  type: 'date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+function afterSaveCell(oldValue, newValue) {
+  console.log('--after save cell--');
+  console.log('New Value was apply as');
+  console.log(newValue);
+  console.log(\`and the type is $\{typeof newValue}\`);
+}
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true,
+    afterSaveCell
+  }) }
+/>
+`;
+
+function afterSaveCell(oldValue, newValue) {
+  console.log('--after save cell--');
+  console.log('New Value was apply as');
+  console.log(newValue);
+  console.log(`and the type is ${typeof newValue}`);
+}
+
+export default () => (
+  <div>
+    <h3>Save Cell Value with Specified Data Type</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true,
+        afterSaveCell
+      }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -18,6 +18,11 @@ class QualityRanger extends React.Component {
   static defaultProps = {
     value: 0
   }
+
+  componentDidMount() {
+    this.range.focus();
+  }
+
   getValue() {
     return parseInt(this.range.value, 10);
   }

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

@@ -23,7 +23,7 @@ const columns = [{
     if (typeof cell !== 'object') {
       dateObj = new Date(cell);
     }
-    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
   },
   editor: {
     type: Type.DATE
@@ -48,7 +48,7 @@ const columns = [{
     if (typeof cell !== 'object') {
       dateObj = new Date(cell);
     }
-    return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`;
+    return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
   },
   editor: {
     type: Type.DATE

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

@@ -0,0 +1,164 @@
+/* eslint no-console: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator().map(j => ({
+  ...j,
+  type2: j.type
+}));
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type1',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      console.log(`current editing row id: ${row.id}`);
+      console.log(`current editing column: ${column.dataField}`);
+      return [{
+        value: 'A',
+        label: 'A'
+      }, {
+        value: 'B',
+        label: 'B'
+      }, {
+        value: 'C',
+        label: 'C'
+      }, {
+        value: 'D',
+        label: 'D'
+      }, {
+        value: 'E',
+        label: 'E'
+      }];
+    }
+  }
+}, {
+  dataField: 'type2',
+  text: 'Job Type2',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => {
+        setOptions([{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }, {
+          value: 'D',
+          label: 'D'
+        }, {
+          value: 'E',
+          label: 'E'
+        }]);
+      }, 2000);
+    }
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type1',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      console.log(\`current editing row id: $\{row.id}\`);
+      console.log(\`current editing column: $\{column.dataField}\`);
+      return [{
+        value: 'A',
+        label: 'A'
+      }, {
+        value: 'B',
+        label: 'B'
+      }, {
+        value: 'C',
+        label: 'C'
+      }, {
+        value: 'D',
+        label: 'D'
+      }, {
+        value: 'E',
+        label: 'E'
+      }];
+    }
+  }
+}, {
+  dataField: 'type2',
+  text: 'Job Type2',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => {
+        setOptions([{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }, {
+          value: 'D',
+          label: 'D'
+        }, {
+          value: 'E',
+          label: 'E'
+        }]);
+      }, 2000);
+    }
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor with Dynamic Options</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
+import { stockGenerator } from 'utils/common';
 
-const products = productsGenerator(8);
+const products = stockGenerator(8);
 
 let nameFilter;
 let priceFilter;
+let stockDateFilter;
 
 const columns = [{
   dataField: 'id',
@@ -22,25 +23,36 @@ const columns = [{
   })
 }, {
   dataField: 'price',
-  text: 'Product Price',
+  text: 'Price',
   filter: textFilter({
     getFilter: (filter) => {
       priceFilter = filter;
     }
   })
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    getFilter: (filter) => {
+      stockDateFilter = filter;
+    }
+  })
 }];
 
 const handleClick = () => {
   nameFilter('');
   priceFilter('');
+  stockDateFilter();
 };
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
 
 let nameFilter;
 let priceFilter;
+let stockDateFilter;
 
 const columns = [{
   dataField: 'id',
@@ -55,17 +67,27 @@ const columns = [{
   })
 }, {
   dataField: 'price',
-  text: 'Product Price',
+  text: 'Price',
   filter: textFilter({
     getFilter: (filter) => {
       priceFilter = filter;
     }
   })
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    getFilter: (filter) => {
+      stockDateFilter = filter;
+    }
+  })
 }];
 
 const handleClick = () => {
   nameFilter('');
   priceFilter('');
+  stockDateFilter();
 };
 
 export default () => (

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

@@ -0,0 +1,89 @@
+/* eslint eqeqeq: 0 */
+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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+  filterByPrice = (filterVal, data) => {
+    if (filterVal) {
+      return data.filter(product => product.price == filterVal);
+    }
+    return data;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        onFilter: this.filterByPrice
+      })
+    }];
+
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+      </div>
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  filterByPrice = (filterVal, data) => {
+    if (filterVal) {
+      return data.filter(product => product.price == filterVal);
+    }
+    return data;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        onFilter: this.filterByPrice
+      })
+    }];
+
+    return (
+      <div>
+        <h2>Implement a eq price filter</h2>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,57 @@
+/* eslint no-console: 0 */
+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({
+    onFilter: filterVal => console.log(`Filter Value: ${filterVal}`)
+  })
+}];
+
+const sourceCode = `\
+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({
+    onFilter: filterVal => console.log(\`Filter Value: $\{filterVal}\`)
+  })
+}];
+
+<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/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/select-filter-option-type.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const selectOptionsArr = [{
+  value: 0,
+  label: 'good'
+}, {
+  value: 1,
+  label: 'Bad'
+}, {
+  value: 2,
+  label: 'unknown'
+}];
+
+const columns1 = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+const columns2 = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: selectOptionsArr
+  })
+}];
+
+const columns3 = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: () => selectOptionsArr
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+// Object map options
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+// Array options
+const selectOptionsArr = [{
+  value: 0,
+  label: 'good'
+}, {
+  value: 1,
+  label: 'Bad'
+}, {
+  value: 2,
+  label: 'unknown'
+}];
+
+const columns1 = [..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+<BootstrapTable keyField='id' data={ products } columns={ columns1 } filter={ filterFactory() } />
+
+const columns2 = [..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: selectOptionsArr
+  })
+}];
+<BootstrapTable keyField='id' data={ products } columns={ columns2 } filter={ filterFactory() } />
+
+const columns3 = [..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: () => selectOptionsArr
+  })
+}];
+<BootstrapTable keyField='id' data={ products } columns={ columns3 } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h2>Options as an object</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns1 }
+      filter={ filterFactory() }
+    />
+    <h2>Options as an array</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns2 }
+      filter={ filterFactory() }
+    />
+    <h2>Options as a function which return an array</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns3 }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</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/column-toggle/column-toggle-with-filter.js

@@ -0,0 +1,94 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter()
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          filter={ filterFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <h3>Table will keep the filter/sort state when column toggle</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              filter={ filterFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,135 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columnsdt = [{
+  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 from 'react-bootstrap-table2-toolkit';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles
+}) => (
+  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ \`btn btn-warning \${column.toggle ? 'active' : ''}\` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columnsdt }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <CustomToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles
+}) => (
+  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ `btn btn-warning ${column.toggle ? 'active' : ''}` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columnsdt }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <CustomToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-toggle/default-visibility.js

@@ -0,0 +1,81 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  hidden: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  hidden: true
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  hidden: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  hidden: true
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable { ...props.baseProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-toggle/index.js

@@ -0,0 +1,81 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+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, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-toggle/styling-toggle-list.js

@@ -0,0 +1,91 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+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, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList
+          contextual="success"
+          className="list-custom-class"
+          btnClassName="list-btn-custom-class"
+          { ...props.columnToggleProps }
+        />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList
+              contextual="success"
+              className="list-custom-class"
+              btnClassName="list-btn-custom-class"
+              { ...props.columnToggleProps }
+            />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -11,141 +11,13 @@ const products = [
   { id: 14, name: 'Item 14', price: 14.5, inStock: true }
 ];
 
-const columns = [
-  {
-    dataField: 'id',
-    text: 'Product ID'
-  },
-  {
-    dataField: 'name',
-    text: 'Product Name'
-  },
-  {
-    dataField: 'price',
-    text: 'Product Price'
-  },
-  {
-    dataField: 'inStock',
-    text: 'In Stock',
-    formatter: (cellContent, row) => (
-      <div className="checkbox disabled">
-        <label>
-          <input type="checkbox" checked={ row.inStock } disabled />
-        </label>
-      </div>
-    )
-  },
-  {
-    dataField: 'df1',
-    isDummyField: true,
-    text: 'Action 1',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  },
-  {
-    dataField: 'df2',
-    isDummyField: true,
-    text: 'Action 2',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  }
-];
-
 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'
-  },
-  {
-    dataField: 'inStock',
-    text: 'In Stock',
-    formatter: (cellContent, row) => (
-      <div className="checkbox disabled">
-        <label>
-          <input type="checkbox" checked={ row.inStock } disabled />
-        </label>
-      </div>
-    )
-  },
-  {
-    dataField: 'df1',
-    isDummyField: true,
-    text: 'Action 1',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  },
-  {
-    dataField: 'df2',
-    isDummyField: true,
-    text: 'Action 2',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  }
-];
-
 class ProductList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { products };
+    this.state = { products, count: 0 };
   }
 
   toggleInStock = () => {
@@ -163,17 +35,96 @@ class ProductList extends React.Component {
   };
 
   render() {
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        formatter: (cell, row, rowIndex, extraData) => (
+          <div>
+            <span>ID: {row.id}</span>
+            <br />
+            <span>state: {extraData}</span>
+          </div>
+        ),
+        formatExtraData: this.state.count
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      },
+      {
+        dataField: 'price',
+        text: 'Product Price'
+      },
+      {
+        dataField: 'inStock',
+        text: 'In Stock',
+        formatter: (cellContent, row) => (
+          <div className="checkbox disabled">
+            <label>
+              <input type="checkbox" checked={ row.inStock } disabled />
+            </label>
+          </div>
+        )
+      },
+      {
+        dataField: 'df1',
+        isDummyField: true,
+        text: 'Action 1',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      },
+      {
+        dataField: 'df2',
+        isDummyField: true,
+        text: 'Action 2',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      }
+    ];
+
     return (
       <div>
-        <h1 className="h2">Products</h1>
+        <h3>Action 1 and Action 2 are dummy column</h3>
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+        <button
+          className="btn btn-success"
+          onClick={ () => this.setState(() => ({ count: this.state.count + 1 })) }
+        >
+          Click me to Increase counter
+        </button>
         <BootstrapTable
           keyField="id"
           data={ this.state.products }
           columns={ columns }
         />
-        <button onClick={ this.toggleInStock } className="btn btn-primary">
+        <Code>{ sourceCode }</Code>
-          Toggle item 13 stock status
-        </button>
       </div>
     );
   }
@@ -183,7 +134,7 @@ class ProductList extends React.Component {
 class ProductList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { products };
+    this.state = { products, count: 0 };
   }
 
   toggleInStock = () => {
@@ -200,13 +151,95 @@ class ProductList extends React.Component {
     this.setState(curr => ({ ...curr, products: newProducts }));
   };
 
+  counter = () => {
+    this.setState(curr => ({ ...curr, count: this.state.count + 1 }));
+  }
+
   render() {
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        formatter: (cell, row, rowIndex, extraData) => (
+          <div>
+            <span>ID: {row.id}</span>
+            <br />
+            <span>Counter: {extraData}</span>
+          </div>
+        ),
+        formatExtraData: this.state.count
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      },
+      {
+        dataField: 'price',
+        text: 'Product Price'
+      },
+      {
+        dataField: 'inStock',
+        text: 'In Stock',
+        formatter: (cellContent, row) => (
+          <div className="checkbox disabled">
+            <label>
+              <input type="checkbox" checked={ row.inStock } disabled />
+            </label>
+          </div>
+        )
+      },
+      {
+        dataField: 'df1',
+        isDummyField: true,
+        text: 'Action 1',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      },
+      {
+        dataField: 'df2',
+        isDummyField: true,
+        text: 'Action 2',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      }
+    ];
+
     return (
       <div>
         <h3>Action 1 and Action 2 are dummy column</h3>
         <button onClick={ this.toggleInStock } className="btn btn-primary">
           Toggle item 13 stock status
         </button>
+        <button
+          className="btn btn-success"
+          onClick={ this.counter }
+        >
+          Click me to Increase counter
+        </button>
         <BootstrapTable
           keyField="id"
           data={ this.state.products }

packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js

@@ -0,0 +1,188 @@
+/* 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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class DummyColumnWithRowExpand extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hoverIdx: null
+    };
+  }
+
+  expandRow = {
+    renderer: () => (
+      <div style={ { width: '100%', height: '20px' } }>Content</div>
+    ),
+    showExpandColumn: true,
+    expandByColumnOnly: true
+  };
+
+  actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+    if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+      return (
+        <div
+          style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
+        />
+      );
+    }
+    return (
+      <div
+        style={ { width: '20px', height: '20px' } }
+      />
+    );
+  }
+
+  rowEvents = {
+    onMouseEnter: (e, row, rowIndex) => {
+      this.setState({ hoverIdx: rowIndex });
+    },
+    onMouseLeave: () => {
+      this.setState({ hoverIdx: null });
+    }
+  }
+
+  rowStyle = (row, rowIndex) => {
+    row.index = rowIndex;
+    const style = {};
+    if (rowIndex % 2 === 0) {
+      style.backgroundColor = 'transparent';
+    } else {
+      style.backgroundColor = 'rgba(54, 163, 173, .10)';
+    }
+    style.borderTop = 'none';
+
+    return style;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }, {
+      text: '',
+      isDummyField: true,
+      formatter: this.actionFormater,
+      formatExtraData: { hoverIdx: this.state.hoverIdx },
+      headerStyle: { width: '50px' },
+      style: { height: '30px' }
+    }];
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          noDataIndication="There is no data"
+          classes="table"
+          rowStyle={ this.rowStyle }
+          rowEvents={ this.rowEvents }
+          expandRow={ this.expandRow }
+        />
+      </div>
+    );
+  }
+}
+`;
+
+export default class DummyColumnWithRowExpand extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hoverIdx: null
+    };
+  }
+
+  expandRow = {
+    renderer: () => (
+      <div style={ { width: '100%', height: '20px' } }>Content</div>
+    ),
+    showExpandColumn: true,
+    expandByColumnOnly: true
+  };
+
+  actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+    if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+      return (
+        <div
+          style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
+        />
+      );
+    }
+    return (
+      <div
+        style={ { width: '20px', height: '20px' } }
+      />
+    );
+  }
+
+  rowEvents = {
+    onMouseEnter: (e, row, rowIndex) => {
+      this.setState({ hoverIdx: rowIndex });
+    },
+    onMouseLeave: () => {
+      this.setState({ hoverIdx: null });
+    }
+  }
+
+  rowStyle = (row, rowIndex) => {
+    row.index = rowIndex;
+    const style = {};
+    if (rowIndex % 2 === 0) {
+      style.backgroundColor = 'transparent';
+    } else {
+      style.backgroundColor = 'rgba(54, 163, 173, .10)';
+    }
+    style.borderTop = 'none';
+
+    return style;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }, {
+      isDummyField: true,
+      text: '',
+      formatter: this.actionFormater,
+      formatExtraData: { hoverIdx: this.state.hoverIdx },
+      headerStyle: { width: '50px' },
+      style: { height: '30px' }
+    }];
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          rowStyle={ this.rowStyle }
+          rowEvents={ this.rowEvents }
+          expandRow={ this.expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -40,7 +40,13 @@ const columns = [{
   keyField="id"
   data={ products }
   columns={ columns }
-  exportCSV
+  exportCSV={ {
+    fileName: 'custom.csv',
+    separator: '|',
+    ignoreHeader: true,
+    noAutoBOM: false,
+    blobType: 'text/csv;charset=ansi'
+  } }
 >
   {
     props => (
@@ -64,7 +70,8 @@ export default () => (
         fileName: 'custom.csv',
         separator: '|',
         ignoreHeader: true,
-        noAutoBOM: false
+        noAutoBOM: false,
+        blobType: 'text/csv;charset=ansi'
       } }
     >
       {

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/csv/export-footer.js

@@ -0,0 +1,92 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: '',
+  footerFormatter: column => column.text
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV={ {
+    fileName: 'custom.csv',
+    separator: '|',
+    ignoreHeader: true,
+    noAutoBOM: false,
+    blobType: 'text/csv;charset=ansi'
+  } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV={ {
+        ignoreFooter: false
+      } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable { ...props.baseProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/csv/export-only-filtered.js

@@ -0,0 +1,102 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator(150);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV={ { onlyExportFiltered: true, exportAll: false } }
+  search
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <SearchBar { ...props.searchProps } />
+        <BootstrapTable
+          { ...props.baseProps }
+          pagination={ paginationFactory() }
+          filter={ filterFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <h3>Export all the filtered/searched rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV={ { onlyExportFiltered: true, exportAll: false } }
+      search
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <SearchBar { ...props.searchProps } />
+            <BootstrapTable
+              { ...props.baseProps }
+              pagination={ paginationFactory() }
+              filter={ filterFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/data/data-change-listener.js

@@ -0,0 +1,151 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+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';
+
+class Case1 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class Case2 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+`;
+
+const products1 = productsGenerator(8);
+class WithoutPaginationCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products1.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Without Pagination Case</h3>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products1 }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode2 }</Code>
+      </div>
+    );
+  }
+}
+
+const products2 = productsGenerator(88);
+class WithPaginationCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products2.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Without Pagination Case</h3>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products2 }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+        />
+        <Code>{ sourceCode1 }</Code>
+      </div>
+    );
+  }
+}
+
+export default () => (
+  <div>
+    <WithoutPaginationCase />
+    <WithPaginationCase />
+  </div>
+);
+

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-filter.js

@@ -0,0 +1,70 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter({
+        defaultValue: '1'
+      })
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter()
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <BootstrapTable
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        filter={ filterFactory() }
+      />
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: productsGenerator(3)
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator(14)
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-search.js

@@ -0,0 +1,80 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name'
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price'
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <ToolkitProvider
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        search={ { defaultSearch: '2101' } }
+      >
+        {
+          toolkitprops => (
+            <div>
+              <SearchBar { ...toolkitprops.searchProps } />
+              <BootstrapTable
+                striped
+                hover
+                { ...toolkitprops.baseProps }
+              />
+            </div>
+          )
+        }
+      </ToolkitProvider>
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: productsGenerator(3)
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator(14)
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-filter.js

@@ -0,0 +1,68 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter()
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <BootstrapTable
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        filter={ filterFactory() }
+      />
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: []
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator()
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-pagination-and-filter.js

@@ -0,0 +1,72 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter({
+        defaultValue: '6'
+      })
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter()
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <BootstrapTable
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        filter={ filterFactory() }
+        pagination={ paginationFactory() }
+      />
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: productsGenerator(60)
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator(14)
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-search.js

@@ -0,0 +1,80 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name'
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price'
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <ToolkitProvider
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        search
+      >
+        {
+          toolkitprops => (
+            <div>
+              <SearchBar { ...toolkitprops.searchProps } />
+              <BootstrapTable
+                striped
+                hover
+                { ...toolkitprops.baseProps }
+              />
+            </div>
+          )
+        }
+      </ToolkitProvider>
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: []
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator()
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,53 @@
+/* eslint no-unused-vars: 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',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerAlign: (column, colIndex) => 'right',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerAlign: (column, colIndex) => 'right',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,54 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+  footer: 'Footer 1',
+  footerAttrs: { title: 'ID footer column' }
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2',
+  footerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1',
+    footerAttrs: { title: 'ID footer column' }
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2',
+    footerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,60 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2',
+  footerClasses: 'demo-row-odd'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3',
+  footerClasses: (column, colIndex) => {
+    if (colIndex % 2 === 0) return 'demo-row-even';
+    return 'demo-row-odd';
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2',
+    footerClasses: 'demo-row-odd'
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3',
+    footerClasses: (column, colIndex) => {
+      if (colIndex % 2 === 0) return 'demo-row-even';
+      return 'demo-row-odd';
+    }
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+  footerEvents: {
+    onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
+  },
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footerEvents: {
+      onClick: (e, column, columnIndex) => alert('Click on Product ID footer column')
+    },
+    footer: 'Footer 1'
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,67 @@
+/* eslint no-unused-vars: 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();
+
+function priceFormatter(column, colIndex) {
+  return (
+    <h5>
+      <strong>$$ {column.text} $$</strong>
+    </h5>
+  );
+}
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3',
+    footerFormatter: priceFormatter
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+function priceFormatter(column, colIndex) {
+  return (
+    <h5><strong>$$ { column.text } $$</strong></h5>
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3',
+  footerFormatter: priceFormatter
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{sourceCode}</Code>
+  </div>
+);

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

@@ -0,0 +1,76 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footer: 'Footer 2',
+  footerStyle: {
+    backgroundColor: '#c8e6c9'
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3',
+  footerStyle: (column, colIndex) => {
+    if (colIndex % 2 === 0) {
+      return {
+        backgroundColor: '#81c784'
+      };
+    }
+    return {
+      backgroundColor: '#c8e6c9'
+    };
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footer: 'Footer 1'
+  }, {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2',
+    footerStyle: {
+      backgroundColor: '#c8e6c9'
+    }
+  }, {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3',
+    footerStyle: (column, colIndex) => {
+      if (colIndex % 2 === 0) {
+        return {
+          backgroundColor: '#81c784'
+        };
+      }
+      return {
+        backgroundColor: '#c8e6c9'
+      };
+    }
+  }];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,53 @@
+/* eslint no-unused-vars: 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',
+  footerTitle: true,
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerTitle: (column, colIndex) => `this is custom title for ${column.text}`,
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerTitle: true,
+  footer: 'Footer 1'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  footerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`,
+  footer: 'Footer 2'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  footer: 'Footer 3'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/footer/footer-class-table.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',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID',
+      footer: 'Footer 1'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      footer: 'Footer 2'
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      footer: 'Footer 3'
+    }
+  ];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  footerClasses="footer-class"
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } footerClasses="footer-class" />
+    <Code>{sourceCode}</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/footer/function-footer.js

@@ -0,0 +1,52 @@
+/* eslint no-unused-vars: 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',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+// omit...
+{
+    dataField: 'price',
+    text: 'Product Price',
+    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+  }];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{sourceCode}</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/footer/simple-footer.js

@@ -0,0 +1,52 @@
+/* eslint no-unused-vars: 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',
+    footer: 'Footer 1'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name',
+    footer: 'Footer 2'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+// omit...
+{
+    dataField: 'price',
+    text: 'Product Price',
+    footer: 'Footer 3'
+  }];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{sourceCode}</Code>
+  </div>
+);

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/loading-overlay/table-overlay.js

@@ -36,7 +36,7 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot
       columns={ columns }
       pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
       onTableChange={ onTableChange }
-      overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+      overlay={ overlayFactory({ spinner: true, styles: { overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'}) } }) }
     />
     <Code>{ sourceCode }</Code>
   </div>
@@ -101,7 +101,12 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot
       columns={ columns }
       pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
       onTableChange={ onTableChange }
-      overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+      overlay={
+        overlayFactory({
+          spinner: true,
+          styles: { overlay: base => ({ ...base, background: 'rgba(255, 0, 0, 0.5)' }) }
+        })
+      }
     />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js

@@ -0,0 +1,159 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(40);
+const { SearchBar } = Search;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsGenerator(17) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <ToolkitProvider
+          keyField="id"
+          columns={ columns }
+          data={ this.state.products }
+          search
+        >
+          {
+            toolkitprops => (
+              <div>
+                <SearchBar { ...toolkitprops.searchProps } />
+                <BootstrapTable
+                  striped
+                  hover
+                  { ...toolkitprops.baseProps }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </ToolkitProvider>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsGenerator(17) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <ToolkitProvider
+          keyField="id"
+          columns={ columns }
+          data={ this.state.products }
+          search
+        >
+          {
+            toolkitprops => (
+              <div>
+                <SearchBar { ...toolkitprops.searchProps } />
+                <BootstrapTable
+                  striped
+                  hover
+                  { ...toolkitprops.baseProps }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </ToolkitProvider>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}

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

@@ -74,7 +74,7 @@ const options = {
   // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
   firstPageText: 'First',
   prePageText: 'Back',
-  nextPageText: 'Next',
+  nextPageText: <span>Next</span>,
   lastPageText: 'Last',
   nextPageTitle: 'First page',
   prePageTitle: 'Pre page',

packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js

@@ -0,0 +1,181 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(21);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 0
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 0
+  })
+}];
+
+class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsQualityGenerator(40, 7) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ this.state.products }
+              columns={ columns }
+              filter={ filterFactory() }
+              { ...paginationTableProps }
+            />
+          </div>
+        </div>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+      </div >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsQualityGenerator(40, 7) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ this.state.products }
+              columns={ columns }
+              filter={ filterFactory() }
+              { ...paginationTableProps }
+            />
+          </div>
+        </div>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class BookList extends React.Component {
+  state = {
+    books: [
+      { id: '1', name: 'Book 1' },
+      { id: '2', name: 'Book 2' },
+      { id: '3', name: 'Book 3' },
+      { id: '4', name: 'Book 4' },
+      { id: '5', name: 'Book 5' },
+      { id: '6', name: 'Book 6' }
+    ]
+  };
+
+  deleteBookWithId = () => {
+    const lastOneId = this.state.books.length;
+    const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
+    this.setState({ books: updatedBooks });
+  };
+
+  addBook = () => {
+    const lastOneId = this.state.books.length + 1;
+    this.setState({ books: [...this.state.books, {
+      id: \`$\{lastOneId}\`, name: \`Book $\{lastOneId}\`
+    }] });
+  }
+
+  render() {
+    const options = {
+      // pageStartIndex: 0,
+      sizePerPage: 5,
+      hideSizePerPage: true,
+      hidePageListOnlyOnePage: true
+    };
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        Cell: row => (
+          <div>
+            <span title={ row.value }>{ row.value }</span>
+          </div>
+        )
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      }
+    ];
+
+    return (
+      <React.Fragment>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.books }
+          columns={ columns }
+          pagination={ paginationFactory(options) }
+        />
+        <button className="btn btn-default" onClick={ () => this.deleteBookWithId() }>
+          delete last one book
+        </button>
+        <button className="btn btn-default" onClick={ () => this.addBook() }>
+          Add a book to the end
+        </button>
+        <Code>{ sourceCode }</Code>
+      </React.Fragment>
+    );
+  }
+`;
+
+export default class BookList extends React.Component {
+  state = {
+    books: [
+      { id: '1', name: 'Book 1' },
+      { id: '2', name: 'Book 2' },
+      { id: '3', name: 'Book 3' },
+      { id: '4', name: 'Book 4' },
+      { id: '5', name: 'Book 5' },
+      { id: '6', name: 'Book 6' },
+      { id: '7', name: 'Book 6' },
+      { id: '8', name: 'Book 6' },
+      { id: '9', name: 'Book 6' },
+      { id: '10', name: 'Book 6' },
+      { id: '11', name: 'Book 6' }
+    ]
+  };
+
+  deleteBookWithId = () => {
+    const lastOneId = this.state.books.length;
+    const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
+    this.setState({ books: updatedBooks });
+  };
+
+  addBook = () => {
+    const lastOneId = this.state.books.length + 1;
+    this.setState({ books: [...this.state.books, {
+      id: `${lastOneId}`, name: `Book ${lastOneId}`
+    }] });
+  }
+
+  render() {
+    const options = {
+      // pageStartIndex: 0,
+      sizePerPage: 5,
+      hideSizePerPage: true,
+      hidePageListOnlyOnePage: true
+    };
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        Cell: row => (
+          <div>
+            <span title={ row.value }>{ row.value }</span>
+          </div>
+        )
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      }
+    ];
+
+    return (
+      <React.Fragment>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.books }
+          columns={ columns }
+          pagination={ paginationFactory(options) }
+        />
+        <button className="btn btn-default" onClick={ () => this.deleteBookWithId() }>
+          delete last one book
+        </button>
+        <button className="btn btn-default" onClick={ () => this.addBook() }>
+          Add a book to the end
+        </button>
+        <Code>{ sourceCode }</Code>
+      </React.Fragment>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js

@@ -0,0 +1,190 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+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 paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+// ...
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <PaginationProvider
+      pagination={
+        paginationFactory({
+          custom: true,
+          page,
+          sizePerPage,
+          totalSize
+        })
+      }
+    >
+      {
+        ({
+          paginationProps,
+          paginationTableProps
+        }) => (
+          <div>
+            <div>
+              <p>Current Page: { paginationProps.page }</p>
+              <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+            </div>
+            <div>
+              <PaginationListStandalone
+                { ...paginationProps }
+              />
+            </div>
+            <BootstrapTable
+              remote
+              keyField="id"
+              data={ data }
+              columns={ columns }
+              onTableChange={ onTableChange }
+              { ...paginationTableProps }
+            />
+          </div>
+        )
+      }
+    </PaginationProvider>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <PaginationProvider
+      pagination={
+        paginationFactory({
+          custom: true,
+          page,
+          sizePerPage,
+          totalSize
+        })
+      }
+    >
+      {
+        ({
+          paginationProps,
+          paginationTableProps
+        }) => (
+          <div>
+            <div>
+              <p>Current Page: { paginationProps.page }</p>
+              <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+            </div>
+            <div>
+              <PaginationListStandalone
+                { ...paginationProps }
+              />
+            </div>
+            <BootstrapTable
+              remote
+              keyField="id"
+              data={ data }
+              columns={ columns }
+              onTableChange={ onTableChange }
+              { ...paginationTableProps }
+            />
+          </div>
+        )
+      }
+    </PaginationProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemotePagination.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;

packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js

@@ -0,0 +1,107 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+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 paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationTableProps
+    }) => (
+      <div>
+        <PaginationTotalStandalone
+          { ...paginationProps }
+        />
+        <PaginationListStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationTableProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+export default class StandalonePaginationList extends React.Component {
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationTableProps
+            }) => (
+              <div>
+                <PaginationTotalStandalone
+                  { ...paginationProps }
+                />
+                <PaginationListStandalone
+                  { ...paginationProps }
+                />
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js

@@ -84,6 +84,7 @@ export default class StandaloneSizePerPage extends React.Component {
               <div>
                 <SizePerPageDropdownStandalone
                   { ...paginationProps }
+                  btnContextual="btn btn-primary"
                 />
                 <BootstrapTable
                   keyField="id"

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

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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'
+};
+
+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 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'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js

@@ -43,6 +43,7 @@ const columns = [{
 }];
 
 const expandRow = {
+  onlyOneExpanding: true,
   renderer: row => (
     <div>
       <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>

packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow1 = {
+  className: 'expanding-foo',
+  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>
+  )
+};
+
+const expandRow2 = {
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'expanding-foo';
+    return 'expanding-bar';
+  },
+  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>
+  )
+};
+
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  className: 'expanding-foo',
+  renderer: row => (
+    <div>.....</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'expanding-foo';
+    return 'expanding-bar';
+  },
+  renderer: row => (
+    <div>...</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow1 }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow2 }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-expand/index.js

@@ -18,9 +18,9 @@ const columns = [{
 }];
 
 const expandRow = {
-  renderer: row => (
+  renderer: (row, rowIndex) => (
     <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>{ `This Expand row is belong to rowKey ${row.id} and index: ${rowIndex}` }</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>

packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow1 = {
+  parentClassName: 'parent-expand-foo',
+  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>
+  )
+};
+
+const expandRow2 = {
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'parent-expand-foo';
+    return 'parent-expand-bar';
+  },
+  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>
+  )
+};
+
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  parentClassName: 'parent-expand-foo',
+  renderer: row => (
+    <div>.....</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'parent-expand-foo';
+    return 'parent-expand-bar';
+  },
+  renderer: row => (
+    <div>...</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow1 }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow2 }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -0,0 +1,111 @@
+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(2);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: {
+    backgroundColor: 'blue'
+  }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: {
+    backgroundColor: 'blue'
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: (status) => {
+    if (status === 'checked') {
+      return {
+        backgroundColor: 'yellow'
+      };
+    } else if (status === 'indeterminate') {
+      return {
+        backgroundColor: 'pink'
+      };
+    } else if (status === 'unchecked') {
+      return {
+        backgroundColor: 'grey'
+      };
+    }
+    return {};
+  }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: (status) => {
+    if (status === 'checked') {
+      return {
+        backgroundColor: 'yellow'
+      };
+    } else if (status === 'indeterminate') {
+      return {
+        backgroundColor: 'pink'
+      };
+    } else if (status === 'unchecked') {
+      return {
+        backgroundColor: 'grey'
+      };
+    }
+    return {};
+  }
+};
+
+<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/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/row-selection/select-column-style.js

@@ -0,0 +1,110 @@
+/* eslint no-unused-vars: 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(2);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: {
+    backgroundColor: 'grey'
+  }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: {
+    backgroundColor: 'grey'
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => {
+    if (checked) {
+      return {
+        backgroundColor: 'yellow'
+      };
+    }
+    return {
+      backgroundColor: 'pink'
+    };
+  }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => {
+    if (checked) {
+      return {
+        backgroundColor: 'yellow'
+      };
+    }
+    return {
+      backgroundColor: 'pink'
+    };
+  }
+};
+
+<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/examples/row-selection/selection-column-position.js

@@ -0,0 +1,59 @@
+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,
+  selectColumnPosition: 'right'
+};
+
+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,
+  selectColumnPosition: 'right'
+};
+
+<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/clear-search-button.js

@@ -0,0 +1,86 @@
+/* eslint react/prop-types: 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, ClearSearchButton } = 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, ClearSearchButton } = Search;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <ClearSearchButton { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <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/search/searchable-column.js

@@ -0,0 +1,87 @@
+/* eslint react/prop-types: 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',
+  searchable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  searchable: false
+}];
+
+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',
+  searchable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  searchable: false
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Column name and price is  unsearchable</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/examples/sort/one-time-sort-configuration.js

@@ -0,0 +1,98 @@
+/* eslint no-unused-vars: 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',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+class OnetimeSortConfiguration extends React.Component {
+  sortFunc = (a, b, order, dataField) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+
+  render() {
+    const sortOption = {
+      // No need to configure sortFunc per column
+      sortFunc: this.sortFunc,
+      // No need to configure sortCaret per column
+      sortCaret: (order, column) => {
+        if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+        else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+        else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+        return null;
+      }
+    };
+
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class OnetimeSortConfiguration extends React.Component {
+  sortFunc = (a, b, order, dataField) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+
+  render() {
+    const sortOption = {
+      sortFunc: this.sortFunc,
+      sortCaret: (order, column) => {
+        if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+        else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+        else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+        return null;
+      }
+    };
+
+    return (
+      <div>
+        <h3>Reverse Sorting Table</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/sort/sort-management.js

@@ -0,0 +1,118 @@
+/* eslint no-console: 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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class SortManagement extends React.Component {
+  state = {
+    field: null,
+    order: null
+  }
+
+  handleSort = (field, order) => {
+    this.setState({
+      field,
+      order
+    });
+  }
+
+  handleSortById = () => {
+    this.setState({
+      field: 'id',
+      order: 'desc'
+    });
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+    return (
+      <div>
+        <button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          sort={ {
+            dataField: this.state.field,
+            order: this.state.order
+          } }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class SortManagement extends React.Component {
+  state = {
+    field: null,
+    order: null
+  }
+
+  handleSort = (field, order) => {
+    this.setState({
+      field,
+      order
+    });
+  }
+
+  handleSortById = () => {
+    this.setState({
+      field: 'id',
+      order: 'desc'
+    });
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+    return (
+      <div>
+        <button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          sort={ {
+            dataField: this.state.field,
+            order: this.state.order
+          } }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

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

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

@@ -29,10 +29,15 @@ export const withOnSale = rows => rows.map((row) => {
   return row;
 });
 
-export const productsQualityGenerator = (quantity = 5) =>
+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,
+    id: index + factor,
-    name: `Item name ${index}`,
+    name: `Item name ${index + factor}`,
     quality: index % 3
   }));
 
@@ -69,7 +74,9 @@ const endDate = new Date();
 export const stockGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,
-    name: `Todo item ${index}`,
+    name: `Stock Name ${index}`,
+    price: Math.floor((Math.random() * 2) + 1),
+    visible: Math.random() > 0.5,
     inStockDate:
       new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));

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

@@ -18,8 +18,11 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
+import Bootstrap4CaptionTable from 'examples/bootstrap4/caption-table';
 import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
 import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
+import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
+import ToolkitsTable from 'examples/bootstrap4/toolkits';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -33,6 +36,7 @@ import ColumnEventTable from 'examples/columns/column-event-table';
 import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 import ColumnAttrsTable from 'examples/columns/column-attrs-table';
 import DummyColumnTable from 'examples/columns/dummy-column-table';
+import RowExpandWithFormattedDummyColumn from 'examples/columns/row-expand-with-formatted-dummy-column.js';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -45,6 +49,18 @@ import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
 import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
 import HeaderClassTable from 'examples/header-columns/header-class-table';
 
+// footer
+import SimpleFooter from 'examples/footer/simple-footer';
+import FunctionFooter from 'examples/footer/function-footer';
+import FooterClassTable from 'examples/footer/footer-class-table';
+import FooterColumnFormatTable from 'examples/footer/column-format-table';
+import FooterColumnAlignTable from 'examples/footer/column-align-table';
+import FooterColumnTitleTable from 'examples/footer/column-title-table.js';
+import FooterColumnEventsTable from 'examples/footer/column-event-table.js';
+import FooterColumnClassTable from 'examples/footer/column-class-table.js';
+import FooterColumnStyleTable from 'examples/footer/column-style-table.js';
+import FooterColumnAttrsTable from 'examples/footer/column-attrs-table.js';
+
 // column filter
 import TextFilter from 'examples/column-filter/text-filter';
 import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
@@ -53,6 +69,7 @@ import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSens
 import CustomTextFilter from 'examples/column-filter/custom-text-filter';
 import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
+import ConfigureSelectFilterOptions from 'examples/column-filter/select-filter-option-type';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
 import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
@@ -74,6 +91,9 @@ import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmat
 import CustomFilter from 'examples/column-filter/custom-filter';
 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';
@@ -86,6 +106,9 @@ 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 SortManagement from 'examples/sort/sort-management';
+import OneTimeSortConfiguration from 'examples/sort/one-time-sort-configuration';
+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';
@@ -109,10 +132,12 @@ import EditorStyleTable from 'examples/cell-edit/editor-style-table';
 import EditorClassTable from 'examples/cell-edit/editor-class-table';
 import DBClickEditWithSelection from 'examples/cell-edit/dbclick-to-edit-with-selection-table';
 import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
+import DropdownEditorWithDynamicOptionsTable from 'examples/cell-edit/dropdown-editor-with-dynamic-options-table';
 import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
 import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
 import DateEditorTable from 'examples/cell-edit/date-editor-table';
 import CustomEditorTable from 'examples/cell-edit/custom-editor-table';
+import CellEditorWithDataType from 'examples/cell-edit/cell-edit-with-data-type';
 
 // work on row selection
 import SingleSelectionTable from 'examples/row-selection/single-selection';
@@ -126,12 +151,17 @@ import SelectionWithExpansionTable from 'examples/row-selection/selection-with-e
 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 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';
+import SelectionColumnStyleTable from 'examples/row-selection/select-column-style';
+import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
 
 // work on row expand
 import BasicRowExpand from 'examples/row-expand';
@@ -141,11 +171,15 @@ import ExpandColumn from 'examples/row-expand/expand-column';
 import OnlyExpandByColumn from 'examples/row-expand/expand-by-column-only.js';
 import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
 import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
+import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
 import ExpandHooks from 'examples/row-expand/expand-hooks';
+import ParentRowClassName from 'examples/row-expand/parent-row-classname';
+import ExpandingRowClassName from 'examples/row-expand/expanding-row-classname';
 
 // pagination
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
+import PaginationWithDynamicData from 'examples/pagination/pagination-with-dynamic-data';
 import CustomPaginationTable from 'examples/pagination/custom-pagination';
 import CustomPageButtonTable from 'examples/pagination/custom-page-button';
 import CustomSizePerPageOptionTable from 'examples/pagination/custom-size-per-page-option';
@@ -153,15 +187,22 @@ import CustomSizePerPageTable from 'examples/pagination/custom-size-per-page';
 import CustomPageListTable from 'examples/pagination/custom-page-list';
 import StandalonePaginationList from 'examples/pagination/standalone-pagination-list';
 import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page';
+import StandalonePaginationTotal from 'examples/pagination/standalone-pagination-total';
 import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination';
+import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination';
+import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter';
+import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-with-search';
 
 // search
 import SearchTable from 'examples/search';
+import ClearSearchButton from 'examples/search/clear-search-button';
 import DefaultSearch from 'examples/search/default-search';
 import DefaultCustomSearch from 'examples/search/default-custom-search';
 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';
@@ -169,10 +210,19 @@ import CSVFormatter from 'examples/csv/csv-column-formatter';
 import CustomCSVHeader from 'examples/csv/custom-csv-header';
 import HideCSVColumn from 'examples/csv/hide-column';
 import ExportOnlySelected from 'examples/csv/export-only-selected';
+import ExportOnlyFiltered from 'examples/csv/export-only-filtered';
 import CSVColumnType from 'examples/csv/csv-column-type';
 import CustomCSVButton from 'examples/csv/custom-csv-button';
 import ExportCustomData from 'examples/csv/export-custom-data';
 import CustomCSV from 'examples/csv/custom-csv';
+import ExportTableFooter from 'examples/csv/export-footer';
+
+// Column toggle
+import BasicColumnToggle from 'examples/column-toggle';
+import DefaultVisibility from 'examples/column-toggle/default-visibility';
+import StylingColumnToggle from 'examples/column-toggle/styling-toggle-list';
+import CustomToggleList from 'examples/column-toggle/custom-toggle-list';
+import ColumnToggleWithFilter from 'examples/column-toggle/column-toggle-with-filter';
 
 // loading overlay
 import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
@@ -186,18 +236,26 @@ import RemoteSearch from 'examples/remote/remote-search';
 import RemoteCellEdit from 'examples/remote/remote-celledit';
 import RemoteAll from 'examples/remote/remote-all';
 
+// data
+import DataChangeListener from 'examples/data/data-change-listener';
+import LoadDataWithFilter from 'examples/data/load-data-on-the-fly-with-filter';
+import LoadDataWithDefaultFilter from 'examples/data/load-data-on-the-fly-with-default-filter';
+import LoadDataWithSearch from 'examples/data/load-data-on-the-fly-with-search';
+import LoadDataWithDefaultSearch from 'examples/data/load-data-on-the-fly-with-default-search';
+import LoadDataWithPaginationAndFilter from 'examples/data/load-data-on-the-fly-with-pagination-and-filter';
+
 // css style
 import 'stories/stylesheet/tomorrow.min.css';
 import 'stories/stylesheet/storybook.scss';
 import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
 import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
 import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
+import '../../react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss';
 
 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
 
-storiesOf('Welcome', module)
+storiesOf('Welcome', module).add('react bootstrap table 2 ', () => <Welcome />);
-  .add('react bootstrap table 2 ', () => <Welcome />);
 
 storiesOf('Basic Table', module)
   .addDecorator(bootstrapStyle())
@@ -214,8 +272,11 @@ storiesOf('Basic Table', module)
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
+  .add('Table Caption bootstrap 4', () => <Bootstrap4CaptionTable />)
   .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
-  .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />);
+  .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
+  .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)
+  .add('toolkits Table bootstrap 4', () => <ToolkitsTable />);
 
 storiesOf('Work on Columns', module)
   .addDecorator(bootstrapStyle())
@@ -229,7 +290,8 @@ storiesOf('Work on Columns', module)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />)
   .add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
-  .add('Dummy Column', () => <DummyColumnTable />);
+  .add('Dummy Column', () => <DummyColumnTable />)
+  .add('Row Expand with Dummy Column Formatter', () => <RowExpandWithFormattedDummyColumn />);
 
 storiesOf('Work on Header Columns', module)
   .addDecorator(bootstrapStyle())
@@ -251,6 +313,7 @@ storiesOf('Column Filter', module)
   .add('Text Filter with Case Sensitive', () => <TextFilterCaseSensitive />)
   // add another filter type example right here.
   .add('Select Filter', () => <SelectFilter />)
+  .add('Configure Select Filter Options', () => <ConfigureSelectFilterOptions />)
   .add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
   .add('Select Filter with Comparator', () => <SelectFilterComparator />)
   .add('MultiSelect Filter', () => <MultiSelectFilter />)
@@ -259,6 +322,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 />)
@@ -273,7 +337,9 @@ storiesOf('Column Filter', module)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
   .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
-  .add('Clear All Filters', () => <ClearAllFilters />);
+  .add('Clear All Filters', () => <ClearAllFilters />)
+  .add('Filter Hooks', () => <FilterHooks />)
+  .add('Implement custom filter logic', () => <CustomFilterLogic />);
 
 storiesOf('Work on Rows', module)
   .addDecorator(bootstrapStyle())
@@ -282,12 +348,28 @@ storiesOf('Work on Rows', module)
   .add('Hide Rows', () => <RowHiddenTable />)
   .add('Row Event', () => <RowEventTable />);
 
+storiesOf('Footer', module)
+  .addDecorator(bootstrapStyle())
+  .add('Simple Footer', () => <SimpleFooter />)
+  .add('Function Footer', () => <FunctionFooter />)
+  .add('Column Formatter', () => <FooterColumnFormatTable />)
+  .add('Column Align', () => <FooterColumnAlignTable />)
+  .add('Column Title', () => <FooterColumnTitleTable />)
+  .add('Column Events', () => <FooterColumnEventsTable />)
+  .add('Customize Column Class', () => <FooterColumnClassTable />)
+  .add('Customize Column Style', () => <FooterColumnStyleTable />)
+  .add('Customize Column HTML attribute', () => <FooterColumnAttrsTable />)
+  .add('Footer Class', () => <FooterClassTable />);
+
 storiesOf('Sort Table', module)
   .addDecorator(bootstrapStyle())
   .add('Enable Sort', () => <EnableSortTable />)
   .add('Default Sort Table', () => <DefaultSortTable />)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
+  .add('Sort Management', () => <SortManagement />)
+  .add('One-time Sort Configuation', () => <OneTimeSortConfiguration />)
+  .add('Custom Sort Value', () => <CustomSortValue />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Sort Caret', () => <CustomSortCaretTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
@@ -312,10 +394,12 @@ storiesOf('Cell Editing', module)
   .add('Custom Editor Style', () => <EditorStyleTable />)
   .add('DoubleClick to Edit with Selection', () => <DBClickEditWithSelection />)
   .add('Dropdown Editor', () => <DropdownEditorTable />)
+  .add('Dropdown Editor with Dynamic Options', () => <DropdownEditorWithDynamicOptionsTable />)
   .add('Textarea Editor', () => <TextareaEditorTable />)
   .add('Checkbox Editor', () => <CheckboxEditorTable />)
   .add('Date Editor', () => <DateEditorTable />)
-  .add('Custom Editor', () => <CustomEditorTable />);
+  .add('Custom Editor', () => <CustomEditorTable />)
+  .add('Cell Editor with Data Type', () => <CellEditorWithDataType />);
 
 storiesOf('Row Selection', module)
   .addDecorator(bootstrapStyle())
@@ -330,12 +414,17 @@ storiesOf('Row Selection', module)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Custom Selection Column Header Style', () => <HeaderStyleTable />)
   .add('Hide Select All', () => <HideSelectAllTable />)
   .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('Hide Selection Column', () => <HideSelectionColumnTable />)
+  .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
+  .add('Selection Column Position', () => <SelectionColumnPositionTable />);
 
 storiesOf('Row Expand', module)
   .addDecorator(bootstrapStyle())
@@ -346,12 +435,16 @@ storiesOf('Row Expand', module)
   .add('Only Expand by Indicator', () => <OnlyExpandByColumn />)
   .add('Expand Only One Row at The Same Time', () => <ExpandOnlyOne />)
   .add('Custom Expand Indicator', () => <CustomExpandColumn />)
-  .add('Expand Hooks', () => <ExpandHooks />);
+  .add('Expand Column Position', () => <ExpandColumnPosition />)
+  .add('Expand Hooks', () => <ExpandHooks />)
+  .add('Custom Parent Row ClassName', () => <ParentRowClassName />)
+  .add('Custom Expanding Row ClassName', () => <ExpandingRowClassName />);
 
 storiesOf('Pagination', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Pagination Table', () => <PaginationTable />)
   .add('Pagination Hooks', () => <PaginationHooksTable />)
+  .add('Pagination with Dynamic Data', () => <PaginationWithDynamicData />)
   .add('Custom Pagination', () => <CustomPaginationTable />)
   .add('Custom Page Button', () => <CustomPageButtonTable />)
   .add('Custom Page List', () => <CustomPageListTable />)
@@ -359,16 +452,31 @@ storiesOf('Pagination', module)
   .add('Custom SizePerPage', () => <CustomSizePerPageTable />)
   .add('Standalone Pagination List', () => <StandalonePaginationList />)
   .add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
-  .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />);
+  .add('Standalone Pagination Total', () => <StandalonePaginationTotal />)
+  .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />)
+  .add('Remote Fully Custom Pagination', () => <RemoteStandalonePaginationTable />)
+  .add('Custom Pagination with Filter', () => <CustomePaginationWithFilter />)
+  .add('Custom Pagination with Search', () => <CustomePaginationWithSearch />);
 
 storiesOf('Table Search', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Search Table', () => <SearchTable />)
+  .add('Clear Search Button', () => <ClearSearchButton />)
   .add('Default Search Table', () => <DefaultSearch />)
   .add('Default Custom Search', () => <DefaultCustomSearch />)
+  .add('Searchable Column', () => <SearchableColumn />)
   .add('Fully Custom Search', () => <FullyCustomSearch />)
-  .add('Search Fromatted Value', () => <SearchFormattedData />)
+  .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())
+  .add('Basic Column Toggle', () => <BasicColumnToggle />)
+  .add('Default Visibility', () => <DefaultVisibility />)
+  .add('Styling Column Toggle', () => <StylingColumnToggle />)
+  .add('Custom Column Toggle', () => <CustomToggleList />)
+  .add('Column Toggle with Filter', () => <ColumnToggleWithFilter />);
 
 storiesOf('Export CSV', module)
   .addDecorator(bootstrapStyle())
@@ -377,10 +485,12 @@ storiesOf('Export CSV', module)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
   .add('Only Export Selected Rows', () => <ExportOnlySelected />)
+  .add('Only Export Filtered/Searched Rows', () => <ExportOnlyFiltered />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
   .add('Export Custom Data', () => <ExportCustomData />)
-  .add('Custom CSV', () => <CustomCSV />);
+  .add('Custom CSV', () => <CustomCSV />)
+  .add('Export Table Footer', () => <ExportTableFooter />);
 
 storiesOf('EmptyTableOverlay', module)
   .addDecorator(bootstrapStyle())
@@ -395,3 +505,12 @@ storiesOf('Remote', module)
   .add('Remote Search', () => <RemoteSearch />)
   .add('Remote Cell Editing', () => <RemoteCellEdit />)
   .add('Remote All', () => <RemoteAll />);
+
+storiesOf('Data', module)
+  .addDecorator(bootstrapStyle())
+  .add('Data Change Listener', () => <DataChangeListener />)
+  .add('Load data with Filter', () => <LoadDataWithFilter />)
+  .add('Load data with Default Filter', () => <LoadDataWithDefaultFilter />)
+  .add('Load data with Search', () => <LoadDataWithSearch />)
+  .add('Load data with Default Search', () => <LoadDataWithDefaultSearch />)
+  .add('Load data with Filter and Pagination', () => <LoadDataWithPaginationAndFilter />);

packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss

@@ -13,4 +13,8 @@
 
 .header-class {
   background-color: $green-lighten-4;
+}
+
+.footer-class {
+  background-color: $green-lighten-4;
 }

packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss

@@ -0,0 +1,7 @@
+.expanding-foo, .parent-expand-foo {
+  background-color: coral;
+}
+
+.expanding-bar, .parent-expand-bar {
+  background-color: aqua;
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -12,3 +12,4 @@
 @import "sort/index";
 @import "search/index";
 @import "loading-overlay/index";
+@import "row-expand/index";

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

@@ -115,7 +115,9 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
-> Note, the selectOptions can be an array also: 
+> Note, the selectOptions can be an array or a function which return an array: 
+
+### Array as options
 
 ```js
 const selectOptions = [
@@ -133,6 +135,24 @@ const columns = [
   })
 }];
 ```
+### Function as options
+
+```js
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: () => selectOptions
+  })
+}];
+```
 
 The benifit is `react-bootstrap-table2` will render the select options by the order of array.
 
@@ -310,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.0",
+  "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/date.js

@@ -18,7 +18,7 @@ const legalComparators = [
 ];
 
 function dateParser(d) {
-  return `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`;
+  return `${d.getUTCFullYear()}-${('0' + (d.getUTCMonth() + 1)).slice(-2)}-${('0' + d.getUTCDate()).slice(-2)}`;
 }
 
 class DateFilter extends Component {
@@ -42,10 +42,11 @@ class DateFilter extends Component {
     // export onFilter function to allow users to access
     if (getFilter) {
       getFilter((filterVal) => {
-        this.dateFilterComparator.value = filterVal.comparator;
+        const nullableFilterVal = filterVal || { date: null, comparator: null };
-        this.inputDate.value = dateParser(filterVal.date);
+        this.dateFilterComparator.value = nullableFilterVal.comparator;
+        this.inputDate.value = nullableFilterVal.date ? dateParser(nullableFilterVal.date) : null;
 
-        this.applyFilter(filterVal.date, filterVal.comparator);
+        this.applyFilter(nullableFilterVal.date, nullableFilterVal.comparator);
       });
     }
   }
@@ -82,14 +83,27 @@ class DateFilter extends Component {
     return optionTags;
   }
 
-  getDefaultDate() {
+  getDefaultComparator() {
-    let defaultDate = '';
+    const { defaultValue, filterState } = this.props;
-    const { defaultValue } = this.props;
+    if (filterState && filterState.filterVal) {
-    if (defaultValue && defaultValue.date) {
+      return filterState.filterVal.comparator;
-      // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
-      defaultDate = dateParser(new Date(defaultValue.date));
     }
-    return defaultDate;
+    if (defaultValue && defaultValue.comparator) {
+      return defaultValue.comparator;
+    }
+    return '';
+  }
+
+  getDefaultDate() {
+    // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
+    const { defaultValue, filterState } = this.props;
+    if (filterState && filterState.filterVal && filterState.filterVal.date) {
+      return dateParser(filterState.filterVal.date);
+    }
+    if (defaultValue && defaultValue.date) {
+      return dateParser(new Date(defaultValue.date));
+    }
+    return '';
   }
 
   applyFilter(value, comparator, isInitial) {
@@ -121,8 +135,7 @@ class DateFilter extends Component {
       dateStyle,
       className,
       comparatorClassName,
-      dateClassName,
+      dateClassName
-      defaultValue
     } = this.props;
 
     return (
@@ -131,24 +144,35 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <select
+        <label
-          ref={ n => this.dateFilterComparator = n }
+          className="filter-label"
-          style={ comparatorStyle }
+          htmlFor={ `date-filter-comparator-${text}` }
-          className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
         >
-          { this.getComparatorOptions() }
+          <span className="sr-only">Filter comparator</span>
-        </select>
+          <select
-        <input
+            ref={ n => this.dateFilterComparator = n }
-          ref={ n => this.inputDate = n }
+            id={ `date-filter-comparator-${text}` }
-          className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ comparatorStyle }
-          style={ dateStyle }
+            className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          type="date"
+            onChange={ this.onChangeComparator }
-          onChange={ this.onChangeDate }
+            defaultValue={ this.getDefaultComparator() }
-          placeholder={ placeholder || `Enter ${text}...` }
+          >
-          defaultValue={ this.getDefaultDate() }
+            { this.getComparatorOptions() }
-        />
+          </select>
+        </label>
+        <label htmlFor={ `date-filter-column-${text}` }>
+          <span className="sr-only">Enter ${ text }</span>
+          <input
+            ref={ n => this.inputDate = n }
+            id={ `date-filter-column-${text}` }
+            className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ dateStyle }
+            type="date"
+            onChange={ this.onChangeDate }
+            placeholder={ placeholder || `Enter ${text}...` }
+            defaultValue={ this.getDefaultDate() }
+          />
+        </label>
       </div>
     );
   }
@@ -157,6 +181,7 @@ class DateFilter extends Component {
 DateFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   delay: PropTypes.number,
   defaultValue: PropTypes.shape({
     date: PropTypes.oneOfType([PropTypes.object]),
@@ -198,6 +223,7 @@ DateFilter.defaultProps = {
     date: undefined,
     comparator: ''
   },
+  filterState: {},
   withoutEmptyComparatorOption: false,
   comparators: legalComparators,
   placeholder: undefined,

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

@@ -18,8 +18,18 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
-const getSelections = container =>
+const getSelections = (container) => {
-  Array.from(container.selectedOptions).map(item => item.value);
+  if (container.selectedOptions) {
+    return Array.from(container.selectedOptions).map(item => item.value);
+  }
+  const selections = [];
+  const totalLen = container.options.length;
+  for (let i = 0; i < totalLen; i += 1) {
+    const option = container.options.item(i);
+    if (option.selected) selections.push(option.value);
+  }
+  return selections;
+};
 
 class MultiSelectFilter extends Component {
   constructor(props) {
@@ -55,10 +65,18 @@ class MultiSelectFilter extends Component {
       needFilter = true;
     }
     if (needFilter) {
-      this.applyFilter(this.selectInput.value);
+      this.applyFilter(getSelections(this.selectInput));
     }
   }
 
+  getDefaultValue() {
+    const { filterState, defaultValue } = this.props;
+    if (filterState && typeof filterState.filterVal !== 'undefined') {
+      return filterState.filterVal;
+    }
+    return defaultValue;
+  }
+
   getOptions() {
     const optionTags = [];
     const { options, placeholder, column, withoutEmptyOption } = this.props;
@@ -96,6 +114,7 @@ class MultiSelectFilter extends Component {
     const {
       style,
       className,
+      filterState,
       defaultValue,
       onFilter,
       column,
@@ -111,18 +130,25 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
+      <label
-        { ...rest }
+        className="filter-label"
-        ref={ n => this.selectInput = n }
+        htmlFor={ `multiselect-filter-column-${column.text}` }
-        style={ style }
-        multiple
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
       >
-        { this.getOptions() }
+        <span className="sr-only">Filter by {column.text}</span>
-      </select>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={ `multiselect-filter-column-${column.text}` }
+          style={ style }
+          multiple
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ this.getDefaultValue() }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
     );
   }
 }
@@ -131,6 +157,7 @@ MultiSelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
   options: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
   style: PropTypes.object,
@@ -143,6 +170,7 @@ MultiSelectFilter.propTypes = {
 
 MultiSelectFilter.defaultProps = {
   defaultValue: [],
+  filterState: {},
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,

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

@@ -94,6 +94,28 @@ class NumberFilter extends Component {
     onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
+  getDefaultComparator() {
+    const { defaultValue, filterState } = this.props;
+    if (filterState && filterState.filterVal) {
+      return filterState.filterVal.comparator;
+    }
+    if (defaultValue && defaultValue.comparator) {
+      return defaultValue.comparator;
+    }
+    return '';
+  }
+
+  getDefaultValue() {
+    const { defaultValue, filterState } = this.props;
+    if (filterState && filterState.filterVal) {
+      return filterState.filterVal.number;
+    }
+    if (defaultValue && defaultValue.number) {
+      return defaultValue.number;
+    }
+    return '';
+  }
+
   getComparatorOptions() {
     const optionTags = [];
     const { withoutEmptyComparatorOption } = this.props;
@@ -148,7 +170,6 @@ class NumberFilter extends Component {
   render() {
     const { isSelected } = this.state;
     const {
-      defaultValue,
       column,
       options,
       style,
@@ -173,35 +194,53 @@ class NumberFilter extends Component {
         className={ `filter number-filter ${className}` }
         style={ style }
       >
-        <select
+        <label
-          ref={ n => this.numberFilterComparator = n }
+          className="filter-label"
-          style={ comparatorStyle }
+          htmlFor={ `number-filter-comparator-${column.text}` }
-          className={ `number-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
         >
-          { this.getComparatorOptions() }
+          <span className="sr-only">Filter comparator</span>
-        </select>
+          <select
+            ref={ n => this.numberFilterComparator = n }
+            style={ comparatorStyle }
+            id={ `number-filter-comparator-${column.text}` }
+            className={ `number-filter-comparator form-control ${comparatorClassName}` }
+            onChange={ this.onChangeComparator }
+            defaultValue={ this.getDefaultComparator() }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
         {
           options ?
-            <select
+            <label
-              ref={ n => this.numberFilter = n }
+              className="filter-label"
-              style={ numberStyle }
+              htmlFor={ `number-filter-column-${column.text}` }
-              className={ selectClass }
-              onChange={ this.onChangeNumberSet }
-              defaultValue={ defaultValue ? defaultValue.number : '' }
             >
-              { this.getNumberOptions() }
+              <span className="sr-only">{`Select ${column.text}`}</span>
-            </select> :
+              <select
-            <input
+                ref={ n => this.numberFilter = n }
-              ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
-              type="number"
+                style={ numberStyle }
-              style={ numberStyle }
+                className={ selectClass }
-              className={ `number-filter-input form-control ${numberClassName}` }
+                onChange={ this.onChangeNumberSet }
-              placeholder={ placeholder || `Enter ${column.text}...` }
+                defaultValue={ this.getDefaultValue() }
-              onChange={ this.onChangeNumber }
+              >
-              defaultValue={ defaultValue ? defaultValue.number : '' }
+                { this.getNumberOptions() }
-            />
+              </select>
+            </label> :
+            <label htmlFor={ `number-filter-column-${column.text}` }>
+              <span className="sr-only">{`Enter ${column.text}`}</span>
+              <input
+                ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
+                type="number"
+                style={ numberStyle }
+                className={ `number-filter-input form-control ${numberClassName}` }
+                placeholder={ placeholder || `Enter ${column.text}...` }
+                onChange={ this.onChangeNumber }
+                defaultValue={ this.getDefaultValue() }
+              />
+            </label>
         }
       </div>
     );
@@ -211,6 +250,7 @@ class NumberFilter extends Component {
 NumberFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   options: PropTypes.arrayOf(PropTypes.number),
   defaultValue: PropTypes.shape({
     number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -255,6 +295,7 @@ NumberFilter.defaultProps = {
     number: undefined,
     comparator: ''
   },
+  filterState: {},
   withoutEmptyComparatorOption: false,
   withoutEmptyNumberOption: false,
   comparators: legalComparators,

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

@@ -1,6 +1,7 @@
 /* eslint react/require-default-props: 0 */
 /* eslint no-return-assign: 0 */
 /* eslint react/no-unused-prop-types: 0 */
+/* eslint class-methods-use-this: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { LIKE, EQ } from '../comparison';
@@ -8,15 +9,18 @@ import { FILTER_TYPE } from '../const';
 
 function optionsEquals(currOpts, prevOpts) {
   if (Array.isArray(currOpts)) {
-    for (let i = 0; i < currOpts.length; i += 1) {
+    if (currOpts.length === prevOpts.length) {
-      if (
+      for (let i = 0; i < currOpts.length; i += 1) {
-        currOpts[i].value !== prevOpts[i].value ||
+        if (
-        currOpts[i].label !== prevOpts[i].label
+          currOpts[i].value !== prevOpts[i].value ||
-      ) {
+          currOpts[i].label !== prevOpts[i].label
-        return false;
+        ) {
+          return false;
+        }
       }
+      return true;
     }
-    return currOpts.length === prevOpts.length;
+    return false;
   }
   const keys = Object.keys(currOpts);
   for (let i = 0; i < keys.length; i += 1) {
@@ -41,7 +45,8 @@ class SelectFilter extends Component {
   constructor(props) {
     super(props);
     this.filter = this.filter.bind(this);
-    const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined;
+    this.options = this.getOptions(props);
+    const isSelected = getOptionValue(this.options, this.getDefaultValue()) !== undefined;
     this.state = { isSelected };
   }
 
@@ -66,36 +71,36 @@ class SelectFilter extends Component {
 
   componentDidUpdate(prevProps) {
     let needFilter = false;
-    if (this.props.defaultValue !== prevProps.defaultValue) {
+    const {
+      column,
+      onFilter,
+      defaultValue
+    } = this.props;
+    const nextOptions = this.getOptions(this.props);
+    if (defaultValue !== prevProps.defaultValue) {
       needFilter = true;
-    } else if (!optionsEquals(this.props.options, prevProps.options)) {
+    } else if (!optionsEquals(nextOptions, this.options)) {
+      this.options = nextOptions;
       needFilter = true;
     }
     if (needFilter) {
       const value = this.selectInput.value;
       if (value) {
-        this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
+        onFilter(column, FILTER_TYPE.SELECT)(value);
       }
     }
   }
 
-  getOptions() {
+  getOptions(props) {
-    const optionTags = [];
+    return typeof props.options === 'function' ? props.options(props.column) : props.options;
-    const { options, placeholder, column, withoutEmptyOption } = this.props;
+  }
-    if (!withoutEmptyOption) {
+
-      optionTags.push((
+  getDefaultValue() {
-        <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
+    const { filterState, defaultValue } = this.props;
-      ));
+    if (filterState && typeof filterState.filterVal !== 'undefined') {
+      return filterState.filterVal;
     }
-    if (Array.isArray(options)) {
+    return defaultValue;
-      options.forEach(({ value, label }) =>
-        optionTags.push(<option key={ value } value={ value }>{ label }</option>));
-    } else {
-      Object.keys(options).forEach(key =>
-        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
-      );
-    }
-    return optionTags;
   }
 
   cleanFiltered() {
@@ -117,6 +122,26 @@ class SelectFilter extends Component {
     this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
+  renderOptions() {
+    const optionTags = [];
+    const { options } = this;
+    const { placeholder, column, withoutEmptyOption } = this.props;
+    if (!withoutEmptyOption) {
+      optionTags.push((
+        <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
+      ));
+    }
+    if (Array.isArray(options)) {
+      options.forEach(({ value, label }) =>
+        optionTags.push(<option key={ value } value={ value }>{ label }</option>));
+    } else {
+      Object.keys(options).forEach(key =>
+        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
+      );
+    }
+    return optionTags;
+  }
+
   render() {
     const {
       style,
@@ -129,6 +154,7 @@ class SelectFilter extends Component {
       withoutEmptyOption,
       caseSensitive,
       getFilter,
+      filterState,
       ...rest
     } = this.props;
 
@@ -136,17 +162,24 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
+      <label
-        { ...rest }
+        className="filter-label"
-        ref={ n => this.selectInput = n }
+        htmlFor={ `select-filter-column-${column.text}` }
-        style={ style }
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
       >
-        { this.getOptions() }
+        <span className="sr-only">Filter by { column.text }</span>
-      </select>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={ `select-filter-column-${column.text}` }
+          style={ style }
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ this.getDefaultValue() || '' }
+        >
+          { this.renderOptions() }
+        </select>
+      </label>
     );
   }
 }
@@ -154,6 +187,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
@@ -167,6 +201,7 @@ SelectFilter.propTypes = {
 
 SelectFilter.defaultProps = {
   defaultValue: '',
+  filterState: {},
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,

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';
 
@@ -13,8 +14,14 @@ class TextFilter extends Component {
     this.filter = this.filter.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.timeout = null;
+    function getDefaultValue() {
+      if (props.filterState && typeof props.filterState.filterVal !== 'undefined') {
+        return props.filterState.filterVal;
+      }
+      return props.defaultValue;
+    }
     this.state = {
-      value: props.defaultValue
+      value: getDefaultValue()
     };
   }
 
@@ -35,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();
@@ -89,22 +96,30 @@ class TextFilter extends Component {
       caseSensitive,
       defaultValue,
       getFilter,
+      filterState,
       ...rest
     } = this.props;
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <input
+      <label
-        { ...rest }
+        className="filter-label"
-        ref={ n => this.input = n }
+        htmlFor={ `text-filter-column-${text}` }
-        type="text"
+      >
-        className={ `filter text-filter form-control ${className}` }
+        <span className="sr-only">Filter by {text}</span>
-        style={ style }
+        <input
-        onChange={ this.filter }
+          { ...rest }
-        onClick={ this.handleClick }
+          ref={ n => this.input = n }
-        placeholder={ placeholder || `Enter ${text}...` }
+          type="text"
-        value={ this.state.value }
+          id={ `text-filter-column-${text}` }
-      />
+          className={ `filter text-filter form-control ${className}` }
+          style={ style }
+          onChange={ this.filter }
+          onClick={ this.handleClick }
+          placeholder={ placeholder || `Enter ${text}...` }
+          value={ this.state.value }
+        />
+      </label>
     );
   }
 }
@@ -112,6 +127,7 @@ class TextFilter extends Component {
 TextFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   defaultValue: PropTypes.string,
   delay: PropTypes.number,
@@ -124,6 +140,7 @@ TextFilter.propTypes = {
 
 TextFilter.defaultProps = {
   delay: FILTER_DELAY,
+  filterState: {},
   defaultValue: '',
   caseSensitive: false
 };

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';
 
@@ -17,14 +18,18 @@ export default (
   class FilterProvider extends React.Component {
     static propTypes = {
       data: PropTypes.array.isRequired,
-      columns: PropTypes.array.isRequired
+      columns: PropTypes.array.isRequired,
+      dataChangeListener: PropTypes.object
     }
 
     constructor(props) {
       super(props);
       this.currFilters = {};
       this.onFilter = this.onFilter.bind(this);
+      this.doFilter = this.doFilter.bind(this);
       this.onExternalFilter = this.onExternalFilter.bind(this);
+      this.data = props.data;
+      this.isEmitDataChange = false;
     }
 
     componentDidMount() {
@@ -63,8 +68,7 @@ export default (
           }
           return;
         }
-
+        this.doFilter(this.props);
-        this.forceUpdate();
       };
     }
 
@@ -74,16 +78,39 @@ export default (
       };
     }
 
-    render() {
+    getFiltered() {
-      let { data } = this.props;
+      return this.data;
-      if (!isRemoteFiltering()) {
+    }
-        data = filters(data, this.props.columns, _)(this.currFilters);
+
+    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);
+      this.data = result;
+      if (dataChangeListener && !ignoreEmitDataChange) {
+        this.isEmitDataChange = true;
+        dataChangeListener.emit('filterChanged', result.length);
+      } else {
+        this.isEmitDataChange = false;
+        this.forceUpdate();
+      }
+    }
+
+    render() {
       return (
         <FilterContext.Provider value={ {
-          data,
+          data: this.data,
           onFilter: this.onFilter,
-          onExternalFilter: this.onExternalFilter
+          onExternalFilter: this.onExternalFilter,
+          currFilters: this.currFilters
         } }
         >
           { this.props.children }

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

@@ -98,9 +98,9 @@ export const filterByDate = _ => (
   customFilterValue
 ) => {
   if (!date || !comparator) return data;
-  const filterDate = date.getDate();
+  const filterDate = date.getUTCDate();
-  const filterMonth = date.getMonth();
+  const filterMonth = date.getUTCMonth();
-  const filterYear = date.getFullYear();
+  const filterYear = date.getUTCFullYear();
 
   return data.filter((row) => {
     let valid = true;
@@ -114,9 +114,9 @@ export const filterByDate = _ => (
       cell = new Date(cell);
     }
 
-    const targetDate = cell.getDate();
+    const targetDate = cell.getUTCDate();
-    const targetMonth = cell.getMonth();
+    const targetMonth = cell.getUTCMonth();
-    const targetYear = cell.getFullYear();
+    const targetYear = cell.getUTCFullYear();
 
 
     switch (comparator) {
@@ -234,16 +234,28 @@ export const filters = (data, columns, _) => (currFilters) => {
   let result = data;
   let filterFn;
   Object.keys(currFilters).forEach((dataField) => {
+    let currentResult;
     const filterObj = currFilters[dataField];
     filterFn = factory(filterObj.filterType);
     let filterValue;
+    let customFilter;
     for (let i = 0; i < columns.length; i += 1) {
       if (columns[i].dataField === dataField) {
         filterValue = columns[i].filterValue;
+        if (columns[i].filter) {
+          customFilter = columns[i].filter.props.onFilter;
+        }
         break;
       }
     }
-    result = filterFn(result, dataField, filterObj, filterValue);
+    if (customFilter) {
+      currentResult = customFilter(filterObj.filterVal, result);
+    }
+    if (typeof currentResult === 'undefined') {
+      result = filterFn(result, dataField, filterObj, filterValue);
+    } else {
+      result = currentResult;
+    }
   });
   return result;
 };

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

@@ -1,3 +1,7 @@
+.react-bootstrap-table > table > thead > tr > th .filter-label {
+  display: block !important;
+}
+
 .react-bootstrap-table > table > thead > tr > th .filter {
   font-weight: normal;
 }