Publish

- react-bootstrap-table2-example@1.0.19
 - react-bootstrap-table2-filter@1.1.5
 - react-bootstrap-table2-toolkit@1.3.1
 - react-bootstrap-table-next@3.0.0

README.md

@@ -28,10 +28,6 @@ See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-ta
 
 See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
 
-## Roadmap
-
-See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
-
 ## Development
 
 Please check the [development guide](./docs/development.md).

docs/README.md

@@ -27,6 +27,7 @@
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
+* [hiddenRows](#hiddenRows)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
@@ -181,6 +182,14 @@ const rowEvents = {
 <BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
 ```
 
+### <a name='hiddenRows'>hiddenRows - [Array]</a>
+Hide rows, this props accept an array of row keys:
+
+```js
+const hiddenRows = [1, 4];
+<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
+```
+
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 

docs/columns.md

@@ -30,6 +30,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)
@@ -302,7 +310,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
 {
@@ -518,6 +526,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 => { ... }
+  }
+}
+```
+
+## <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`.
 

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.
 
@@ -113,14 +113,12 @@ Please see [available pagination configurations](https://react-bootstrap-table.g
 
 Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.   
 
-No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
-
 ## Table Search
 Ｔhe usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
 
 - [x] Custom search component and position
 - [x] Custom search value
-- [ ] Clear search
+- [x] Clear search
 - [ ] Multiple search
 - [ ] Strict search
 

docs/row-expand.md

@@ -15,6 +15,7 @@
 * [showExpandColumn](#showExpandColumn)
 * [onlyOneExpanding](#onlyOneExpanding)
 * [expandByColumnOnly](#expandByColumnOnly)
+* [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
 
@@ -92,13 +93,16 @@ const expandRow = {
 ```
 
 ### <a name='expandColumnRenderer'>expandRow.expandColumnRenderer - [Function]</a>
-Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain one property  `expanded` which indicate if current row is expanded
+Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
+* `expanded`: If current row is expanded or not
+* `rowKey`: Current row key
+* `expandable`: If currnet row is expandable or not 
 
 
 ```js
 const expandRow = {
   renderer: (row) => ...
-  expandColumnRenderer: ({ expanded }) => (
+  expandColumnRenderer: ({ expanded, rowKey, expandable }) => (
     // ....
   )
 };
@@ -150,3 +154,14 @@ 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'
+};
+```

docs/row-selection.md

@@ -176,7 +176,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 }) => (
     // ....
   )
 };

package.json

@@ -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-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/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/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,81 @@
+/* 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 =>
+    products.filter(product => product.price == filterVal);
+
+  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 =>
+    products.filter(product => product.price == filterVal);
+
+  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 filter on product price column</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-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/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: () => 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'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+    dataField: 'id',
+    text: 'Product ID',
+    footerEvents: {
+      onClick: () => 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/pagination/custom-page-button.js

@@ -0,0 +1,106 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint no-unused-vars: 0 */
+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';
+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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const pageButtonRenderer = ({
+  page,
+  active,
+  disable,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  const activeStyle = {};
+  if (active) {
+    activeStyle.backgroundColor = 'black';
+    activeStyle.color = 'white';
+  } else {
+    activeStyle.backgroundColor = 'gray';
+    activeStyle.color = 'black';
+  }
+  if (typeof page === 'string') {
+    activeStyle.backgroundColor = 'white';
+    activeStyle.color = 'black';
+  }
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } style={ activeStyle }>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const pageButtonRenderer = ({
+  page,
+  active,
+  disable,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  const activeStyle = {};
+  if (active) {
+    activeStyle.backgroundColor = 'black';
+    activeStyle.color = 'white';
+  } else {
+    activeStyle.backgroundColor = 'gray';
+    activeStyle.color = 'black';
+  }
+  if (typeof page === 'string') {
+    activeStyle.backgroundColor = 'white';
+    activeStyle.color = 'black';
+  }
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } style={ activeStyle }>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,139 @@
+/* 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(21);
+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 {
+  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: products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ products }
+              columns={ columns }
+              filter={ filterFactory() }
+              cellEdit={ cellEditFactory() }
+              { ...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 >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  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: products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <PaginationListStandalone { ...paginationProps } />
+        <ToolkitProvider
+          keyField="id"
+          columns={ columns }
+          data={ 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-page-list.js

@@ -0,0 +1,78 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+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';
+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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+  return (
+    <div>
+      {
+        pageWithoutIndication.map(p => (
+          <button className="btn btn-success" onClick={ () => onPageChange(p.page) }>{ p.page }</button>
+        ))
+      }
+    </div>
+  );
+};
+
+const options = {
+  pageListRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+  return (
+    <div>
+      {
+        pageWithoutIndication.map(p => (
+          <button className="btn btn-success" onClick={ () => onPageChange(p.page) }>{ p.page }</button>
+        ))
+      }
+    </div>
+  );
+};
+
+const options = {
+  pageListRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,96 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+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';
+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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const sizePerPageOptionRenderer = ({
+  text,
+  page,
+  onSizePerPageChange
+}) => (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
+    <a
+      href="#"
+      tabIndex="-1"
+      role="menuitem"
+      data-page={ page }
+      onMouseDown={ (e) => {
+        e.preventDefault();
+        onSizePerPageChange(page);
+      } }
+      style={ { color: 'red' } }
+    >
+      { text }
+    </a>
+  </li>
+);
+
+const options = {
+  sizePerPageOptionRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const sizePerPageOptionRenderer = ({
+  text,
+  page,
+  onSizePerPageChange
+}) => (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
+    <a
+      href="#"
+      tabIndex="-1"
+      role="menuitem"
+      data-page={ page }
+      onMouseDown={ (e) => {
+        e.preventDefault();
+        onSizePerPageChange(page);
+      } }
+      style={ { color: 'red' } }
+    >
+      { text }
+    </a>
+  </li>
+);
+
+const options = {
+  sizePerPageOptionRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,89 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+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';
+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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const sizePerPageRenderer = ({
+  options,
+  currSizePerPage,
+  onSizePerPageChange
+}) => (
+  <div className="btn-group" role="group">
+    {
+      options.map((option) => {
+        const isSelect = currSizePerPage === \`$\{option.page}\`;
+        return (
+          <button
+            key={ option.text }
+            type="button"
+            onClick={ () => onSizePerPageChange(option.page) }
+            className={ \`btn $\{isSelect ? 'btn-secondary' : 'btn-warning'}\` }
+          >
+            { option.text }
+          </button>
+        );
+      })
+    }
+  </div>
+);
+
+const options = {
+  sizePerPageRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />s
+`;
+
+const sizePerPageRenderer = ({
+  options,
+  currSizePerPage,
+  onSizePerPageChange
+}) => (
+  <div className="btn-group" role="group">
+    {
+      options.map(option => (
+        <button
+          key={ option.text }
+          type="button"
+          onClick={ () => onSizePerPageChange(option.page) }
+          className={ `btn ${currSizePerPage === `${option.page}` ? 'btn-secondary' : 'btn-warning'}` }
+        >
+          { option.text }
+        </button>
+      ))
+    }
+  </div>
+);
+
+const options = {
+  sizePerPageRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,133 @@
+/* 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 } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(21);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  filter: textFilter({})
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}];
+
+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 {
+  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: products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ products }
+              columns={ columns }
+              filter={ filterFactory() }
+              cellEdit={ cellEditFactory() }
+              { ...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 >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  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: products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ 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/fully-custom-pagination.js

@@ -0,0 +1,166 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider } 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 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
+};
+
+class FullyCustomPagination extends React.Component {
+  handleNextPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page + 1);
+  }
+
+  handlePrevPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page - 1);
+  }
+
+  handleSizePerPage = ({
+    page,
+    onSizePerPageChange
+  }, newSizePerPage) => {
+    onSizePerPageChange(newSizePerPage, page);
+  }
+
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationTableProps
+            }) => (
+              <div>
+                <div>
+                  <p>Current Page: { paginationProps.page }</p>
+                  <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+                </div>
+                <div className="btn-group" role="group">
+                  <button className="btn btn-primary" onClick={ this.handleNextPage(paginationProps) }>Next Page</button>
+                  <button className="btn btn-success" onClick={ this.handlePrevPage(paginationProps) }>Prev Page</button>
+                  <button className="btn btn-danger" onClick={ () => this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10</button>
+                  <button className="btn btn-warning" onClick={ () => this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25</button>
+                </div>
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+export default class FullyCustomPagination extends React.Component {
+  handleNextPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page + 1);
+  }
+
+  handlePrevPage = ({
+    page,
+    onPageChange
+  }) => () => {
+    onPageChange(page - 1);
+  }
+
+  handleSizePerPage = ({
+    page,
+    onSizePerPageChange
+  }, newSizePerPage) => {
+    onSizePerPageChange(newSizePerPage, page);
+  }
+
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationTableProps
+            }) => (
+              <div>
+                <div>
+                  <p>Current Page: { paginationProps.page }</p>
+                  <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+                </div>
+                <div className="btn-group" role="group">
+                  <button className="btn btn-primary" onClick={ this.handleNextPage(paginationProps) }>Next Page</button>
+                  <button className="btn btn-success" onClick={ this.handlePrevPage(paginationProps) }>Prev Page</button>
+                  <button className="btn btn-danger" onClick={ () => this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10</button>
+                  <button className="btn btn-warning" onClick={ () => this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25</button>
+                </div>
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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-list.js

@@ -0,0 +1,102 @@
+/* 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 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 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>
+        <PaginationListStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationTableProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandalonePaginationList extends React.Component {
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationTableProps
+            }) => (
+              <div>
+                <PaginationListStandalone
+                  { ...paginationProps }
+                />
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,102 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, SizePerPageDropdownStandalone } 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, SizePerPageDropdownStandalone } 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>
+        <SizePerPageDropdownStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationTableProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandaloneSizePerPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationTableProps
+            }) => (
+              <div>
+                <SizePerPageDropdownStandalone
+                  { ...paginationProps }
+                />
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -1,4 +1,5 @@
 /* eslint react/prop-types: 0 */
+/* eslint no-unused-vars: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -33,7 +34,7 @@ const expandRow = {
     }
     return <b>+</b>;
   },
-  expandColumnRenderer: ({ expanded }) => {
+  expandColumnRenderer: ({ expanded, rowKey, expandable }) => {
     if (expanded) {
       return (
         <b>-</b>

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/non-expandable-rows.js

@@ -25,6 +25,7 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
+  showExpandColumn: true,
   nonExpandable: [1, 3]
 };
 
@@ -50,6 +51,7 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
+  showExpandColumn: true,
   nonExpandable: [1, 3]
 };
 

packages/react-bootstrap-table2-example/examples/rows/row-hidden.js

@@ -0,0 +1,57 @@
+/* eslint no-unused-vars: 0 */
+/* 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 columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const rowEvents = {
+  onClick: (e, row, rowIndex) => {
+    console.log(`clicked on row with index: ${rowIndex}`);
+  },
+  onMouseEnter: (e, row, rowIndex) => {
+    console.log(`enter on row with index: ${rowIndex}`);
+  }
+};
+
+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 hiddenRowKeys = [1, 3];
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
+`;
+
+const hiddenRowKeys = [1, 3];
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
+    <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/package.json

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

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

@@ -70,6 +70,7 @@ export const stockGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,
     name: `Todo item ${index}`,
+    price: Math.floor((Math.random() * 2) + 1),
     inStockDate:
       new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));

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

@@ -20,6 +20,8 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
 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';
@@ -45,6 +47,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';
@@ -74,11 +88,14 @@ 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';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
 import RowClassTable from 'examples/rows/row-class';
 import RowEventTable from 'examples/rows/row-event';
+import RowHiddenTable from 'examples/rows/row-hidden';
 
 // table sort
 import EnableSortTable from 'examples/sort/enable-sort-table';
@@ -140,15 +157,28 @@ 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';
 
 // pagination
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
 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';
+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';
@@ -166,6 +196,12 @@ import CustomCSVButton from 'examples/csv/custom-csv-button';
 import ExportCustomData from 'examples/csv/export-custom-data';
 import CustomCSV from 'examples/csv/custom-csv';
 
+// 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';
+
 // loading overlay
 import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
 import TableOverlay from 'examples/loading-overlay/table-overlay';
@@ -178,6 +214,13 @@ import RemoteSearch from 'examples/remote/remote-search';
 import RemoteCellEdit from 'examples/remote/remote-celledit';
 import RemoteAll from 'examples/remote/remote-all';
 
+// data
+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';
@@ -188,8 +231,7 @@ import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.
 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
 
-storiesOf('Welcome', module)
-  .add('react bootstrap table 2 ', () => <Welcome />);
+storiesOf('Welcome', module).add('react bootstrap table 2 ', () => <Welcome />);
 
 storiesOf('Basic Table', module)
   .addDecorator(bootstrapStyle())
@@ -207,7 +249,9 @@ storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
   .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())
@@ -265,14 +309,30 @@ 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())
   .add('Customize Row Style', () => <RowStyleTable />)
   .add('Customize Row Class', () => <RowClassTable />)
+  .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 />)
@@ -337,23 +397,43 @@ 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 Column Position', () => <ExpandColumnPosition />)
   .add('Expand Hooks', () => <ExpandHooks />);
 
 storiesOf('Pagination', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Pagination Table', () => <PaginationTable />)
   .add('Pagination Hooks', () => <PaginationHooksTable />)
-  .add('Custom Pagination', () => <CustomPaginationTable />);
+  .add('Custom Pagination', () => <CustomPaginationTable />)
+  .add('Custom Page Button', () => <CustomPageButtonTable />)
+  .add('Custom Page List', () => <CustomPageListTable />)
+  .add('Custom SizePerPage Option', () => <CustomSizePerPageOptionTable />)
+  .add('Custom SizePerPage', () => <CustomSizePerPageTable />)
+  .add('Standalone Pagination List', () => <StandalonePaginationList />)
+  .add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
+  .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('Fully Custom Search', () => <FullyCustomSearch />)
   .add('Search Fromatted Value', () => <SearchFormattedData />)
   .add('Custom Search Value', () => <CustomSearchValue />);
 
+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 />);
+
 storiesOf('Export CSV', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Export CSV', () => <ExportCSV />)
@@ -379,3 +459,11 @@ storiesOf('Remote', module)
   .add('Remote Search', () => <RemoteSearch />)
   .add('Remote Cell Editing', () => <RemoteCellEdit />)
   .add('Remote All', () => <RemoteAll />);
+
+storiesOf('Data', module)
+  .addDecorator(bootstrapStyle())
+  .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

@@ -14,3 +14,7 @@
 .header-class {
   background-color: $green-lighten-4;
 }
+
+.footer-class {
+  background-color: $green-lighten-4;
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.1.0",
+  "version": "1.1.5",
   "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

@@ -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;
-        this.inputDate.value = dateParser(filterVal.date);
+        const nullableFilterVal = filterVal || { date: null, comparator: null };
+        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);
       });
     }
   }

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

@@ -17,14 +17,19 @@ 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.state = {
+        data: props.data
+      };
     }
 
     componentDidMount() {
@@ -33,6 +38,16 @@ export default (
       }
     }
 
+    componentWillReceiveProps(nextProps) {
+      let nextData = nextProps.data;
+      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
+        nextData = this.doFilter(nextProps);
+      }
+      this.setState({
+        data: nextData
+      });
+    }
+
     onFilter(column, filterType, initialize = false) {
       return (filterVal) => {
         // watch out here if migration to context API, #334
@@ -64,7 +79,13 @@ export default (
           return;
         }
 
-        this.forceUpdate();
+        let result;
+        if (filter.props.onFilter) {
+          result = filter.props.onFilter(filterVal);
+        }
+
+        result = this.doFilter(this.props, result);
+        this.setState({ data: result });
       };
     }
 
@@ -74,14 +95,21 @@ export default (
       };
     }
 
-    render() {
-      let { data } = this.props;
-      if (!isRemoteFiltering()) {
-        data = filters(data, this.props.columns, _)(this.currFilters);
+    doFilter(props, customResult) {
+      let result = customResult;
+
+      const { dataChangeListener, data, columns } = props;
+      result = result || filters(data, columns, _)(this.currFilters);
+      if (dataChangeListener) {
+        dataChangeListener.emit('filterChanged', result.length);
       }
+      return result;
+    }
+
+    render() {
       return (
         <FilterContext.Provider value={ {
-          data,
+          data: this.state.data,
           onFilter: this.onFilter,
           onExternalFilter: this.onExternalFilter
         } }

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

@@ -44,7 +44,9 @@ describe('FilterContext', () => {
   const handleFilterChange = jest.fn();
 
   function shallowContext(
-    enableRemote = false
+    enableRemote = false,
+    tableColumns = columns,
+    dataChangeListener,
   ) {
     mockBase.mockReset();
     handleFilterChange.mockReset();
@@ -56,8 +58,9 @@ describe('FilterContext', () => {
 
     return (
       <FilterContext.Provider
-        columns={ columns }
+        columns={ tableColumns }
         data={ data }
+        dataChangeListener={ dataChangeListener }
       >
         <FilterContext.Consumer>
           {
@@ -225,6 +228,84 @@ describe('FilterContext', () => {
       });
     });
 
+    describe('if filter.props.onFilter is defined', () => {
+      const filterVal = '3';
+      const onFilter = jest.fn();
+      const customColumns = columns.map((column, i) => {
+        if (i === 1) {
+          return {
+            ...column,
+            filter: textFilter({ onFilter })
+          };
+        }
+        return column;
+      });
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(false, customColumns));
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should call filter.props.onFilter correctly', () => {
+        instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(onFilter).toHaveBeenCalledTimes(1);
+        expect(onFilter).toHaveBeenCalledWith(filterVal);
+      });
+    });
+
+    describe('if filter.props.onFilter is defined and return an undefined data', () => {
+      const mockReturn = [{
+        id: 1,
+        name: 'A'
+      }];
+      const filterVal = 'A';
+      const onFilter = jest.fn().mockReturnValue(mockReturn);
+      const customColumns = columns.map((column, i) => {
+        if (i === 1) {
+          return {
+            ...column,
+            filter: textFilter({ onFilter })
+          };
+        }
+        return column;
+      });
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(false, customColumns));
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should call filter.props.onFilter correctly', () => {
+        instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(onFilter).toHaveBeenCalledTimes(1);
+        expect(onFilter).toHaveBeenCalledWith(filterVal);
+      });
+
+      it('should set state.data correctly', () => {
+        instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(instance.state.data).toEqual(mockReturn);
+      });
+    });
+
+    describe('when props.dataChangeListener is defined', () => {
+      const filterVal = '3';
+      const newDataLength = 0;
+      const dataChangeListener = { emit: jest.fn() };
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(false, columns, dataChangeListener));
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should call dataChangeListener.emit correctly', () => {
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(dataChangeListener.emit).toHaveBeenCalledWith('filterChanged', newDataLength);
+      });
+    });
+
     describe('combination', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext());

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

@@ -37,4 +37,197 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
 
 ## Customization
 
-See [pagination props](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)
+### Basic Customization
+
+`react-bootstrap-table2` give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization:
+
+* [paginationSize](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationsize-number)
+* [sizePerPageList](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagelist-array)
+* [withFirstAndLast](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationwithfirstandlast-bool)
+* [alwaysShowAllBtns](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationalwaysshowallbtns-bool)
+* [firstPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetext-any)
+* [prePageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetext-any)
+* [nextPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetext-any)
+* [lastPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetext-any)
+* [firstPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetitle-any)
+* [prePageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetitle-any)
+* [nextPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetitle-any)
+* [lastPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetitle-any)
+* [hideSizePerPage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidesizeperpage-bool)
+* [hidePageListOnlyOnePage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidepagelistonlyonepage-bool)
+* [showTotal](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationshowtotal-bool)
+
+You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage.
+
+### Advance Customization
+
+Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination:
+
+* [pageListRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagelistrenderer-function)
+* [pageButtonRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagebuttonrenderer-function)
+* [sizePerPageRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagerenderer-function)
+* [sizePerPageOptionRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpageoptionrenderer-function)
+* [paginationTotalRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationtotalrenderer-function)
+
+### Fully Customization
+
+If you want to customize the pagination component completely, you may get interesting on following solutions:
+
+* Standalone
+* Non-standalone
+
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and that will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+
+#### 1. Import PaginationProvider
+
+```js
+import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
+
+```
+
+#### 2. Declare custom and totalSize in pagination option:
+
+```js
+const paginationOption = {
+  custom: true,
+  totalSize: products.length
+};
+```
+
+#### 3. Render PaginationProvider
+
+```js
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationTableProps
+    }) => (
+      .....
+    ) 
+  }
+</PaginationProvider>
+```
+
+`PaginationProvider` actually is a wrapper for the concumser of react context, so that now you have to get the props from context provide then render to your compoennt and `BootstrapTable`:
+
+* `paginationProps`: this include everything about pagination, you will use it when you render standalone component or your custom component.
+* `paginationTableProps`: you don't need to know about this, but you have to render this as props to `BootstrapTable`.
+
+So far, your customization pagination is supposed to look like it:
+```js
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationTableProps
+    }) => (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationTableProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+```
+
+Now, you have to choose which solution you like: standalone or non-standalone ?
+
+#### 4.1 Use Standalone Component
+`react-bootstrap-table2-paginator` provider three standalone components:
+
+* Size Per Page Dropdwn Standalone
+* Pagination List Standalone
+* Pagination Total Standalone
+
+When render each standalone, you just need to pass the `paginationProps` props to standalone component:
+
+```js
+import paginationFactory, {
+  PaginationProvider,
+  PaginationListStandalone,
+  SizePerPageDropdownStandalone,
+  PaginationTotalStandalone
+} from 'react-bootstrap-table2-paginator';
+
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationTableProps
+    }) => (
+      <div>
+        <SizePerPageDropdownStandalone
+          { ...paginationProps }
+        />
+        <PaginationTotalStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationTableProps }
+        />
+        <PaginationListStandalone
+          { ...paginationProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+```
+
+That's it!!  The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
+
+#### 4.2 Customization Everything
+
+If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:
+
+```js
+page,
+sizePerPage,
+pageStartIndex,
+hidePageListOnlyOnePage,
+hideSizePerPage,
+alwaysShowAllBtns,
+withFirstAndLast,
+dataSize,
+sizePerPageList,
+paginationSize,
+showTotal,
+pageListRenderer,
+pageButtonRenderer,
+sizePerPageRenderer,
+paginationTotalRenderer,
+sizePerPageOptionRenderer,
+firstPageText,
+prePageText,
+nextPageText,
+lastPageText,
+prePageTitle,
+nextPageTitle,
+firstPageTitle,
+lastPageTitle,
+onPageChange,
+onSizePerPageChange
+```
+
+In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important things for developer.
+
+* `page`: Current page.
+* `sizePerPage`: Current size per page.
+* `onPageChange`: Call it when you nede to change page. This function accept one number argument which indicate the new page 
+* `onSizePerPageChange`: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page
+
+[Here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Fully%20Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) is a online example.

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

@@ -1,6 +1,27 @@
-import createContext from './src/context';
+import React from 'react';
+import PropTypes from 'prop-types';
+import createBaseContext from './src/state-context';
+import createDataContext from './src/data-context';
+import PaginationListStandalone from './src/pagination-list-standalone';
+import SizePerPageDropdownStandalone from './src/size-per-page-dropdown-standalone';
+import PaginationTotalStandalone from './src/pagination-total-standalone';
 
 export default (options = {}) => ({
-  createContext,
+  createContext: createDataContext,
   options
 });
+
+const { Provider, Consumer } = createBaseContext();
+
+const CustomizableProvider = props => (
+  <Provider { ...props }>
+    <Consumer>{ paginationProps => props.children(paginationProps) }</Consumer>
+  </Provider>
+);
+
+CustomizableProvider.propTypes = {
+  children: PropTypes.func.isRequired
+};
+
+export const PaginationProvider = CustomizableProvider;
+export { PaginationListStandalone, SizePerPageDropdownStandalone, PaginationTotalStandalone };

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

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

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

@@ -1,182 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* eslint react/require-default-props: 0 */
-/* eslint no-lonely-if: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Const from './const';
-import { BootstrapContext } from './bootstrap';
-import Pagination from './pagination';
-import { getByCurrPage, alignPage } from './page';
-
-export default (
-  isRemotePagination,
-  handleRemotePageChange
-) => {
-  const PaginationContext = React.createContext();
-
-  class PaginationProvider extends React.Component {
-    static propTypes = {
-      data: PropTypes.array.isRequired
-    }
-
-    constructor(props) {
-      super(props);
-      this.handleChangePage = this.handleChangePage.bind(this);
-      this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
-
-      let currPage;
-      let currSizePerPage;
-      const { options } = props.pagination;
-      const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
-
-      // initialize current page
-      if (typeof options.page !== 'undefined') {
-        currPage = options.page;
-      } else if (typeof options.pageStartIndex !== 'undefined') {
-        currPage = options.pageStartIndex;
-      } else {
-        currPage = Const.PAGE_START_INDEX;
-      }
-
-      // initialize current sizePerPage
-      if (typeof options.sizePerPage !== 'undefined') {
-        currSizePerPage = options.sizePerPage;
-      } else if (typeof sizePerPageList[0] === 'object') {
-        currSizePerPage = sizePerPageList[0].value;
-      } else {
-        currSizePerPage = sizePerPageList[0];
-      }
-
-      this.currPage = currPage;
-      this.currSizePerPage = currSizePerPage;
-    }
-
-    componentWillReceiveProps(nextProps) {
-      let needNewState = false;
-      let { currPage } = this;
-      const { currSizePerPage } = this;
-      const { onPageChange } = nextProps.pagination.options;
-
-      const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ?
-        nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX;
-
-      // user should align the page when the page is not fit to the data size when remote enable
-      if (!isRemotePagination()) {
-        const newPage = alignPage(nextProps.data, currPage, currSizePerPage, pageStartIndex);
-        if (currPage !== newPage) {
-          currPage = newPage;
-          needNewState = true;
-        }
-      } else {
-        this.currPage = nextProps.pagination.options.page;
-        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
-      }
-
-      if (needNewState) {
-        if (onPageChange) {
-          onPageChange(currPage, currSizePerPage);
-        }
-        this.currPage = currPage;
-        this.currSizePerPage = currSizePerPage;
-      }
-    }
-
-    handleChangePage(currPage) {
-      const { currSizePerPage } = this;
-      const { pagination: { options } } = this.props;
-
-      if (options.onPageChange) {
-        options.onPageChange(currPage, currSizePerPage);
-      }
-
-      this.currPage = currPage;
-
-      if (isRemotePagination()) {
-        handleRemotePageChange(currPage, currSizePerPage);
-        return;
-      }
-      this.forceUpdate();
-    }
-
-    handleChangeSizePerPage(currSizePerPage, currPage) {
-      const { pagination: { options } } = this.props;
-
-      if (options.onSizePerPageChange) {
-        options.onSizePerPageChange(currSizePerPage, currPage);
-      }
-
-      this.currPage = currPage;
-      this.currSizePerPage = currSizePerPage;
-
-      if (isRemotePagination()) {
-        handleRemotePageChange(currPage, currSizePerPage);
-        return;
-      }
-      this.forceUpdate();
-    }
-
-    render() {
-      let { data } = this.props;
-      const { pagination: { options }, bootstrap4 } = this.props;
-      const { currPage, currSizePerPage } = this;
-      const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
-        Const.With_FIRST_AND_LAST : options.withFirstAndLast;
-      const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
-        Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
-      const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
-        Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
-      const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
-        Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
-      const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
-        Const.PAGE_START_INDEX : options.pageStartIndex;
-
-      data = isRemotePagination() ?
-        data :
-        getByCurrPage(
-          data,
-          currPage,
-          currSizePerPage,
-          pageStartIndex
-        );
-
-      return (
-        <PaginationContext.Provider value={ { data } }>
-          { this.props.children }
-          <BootstrapContext.Provider value={ { bootstrap4 } }>
-            <Pagination
-              key="pagination"
-              dataSize={ options.totalSize || this.props.data.length }
-              currPage={ currPage }
-              currSizePerPage={ currSizePerPage }
-              onPageChange={ this.handleChangePage }
-              onSizePerPageChange={ this.handleChangeSizePerPage }
-              sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
-              paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
-              pageStartIndex={ pageStartIndex }
-              withFirstAndLast={ withFirstAndLast }
-              alwaysShowAllBtns={ alwaysShowAllBtns }
-              hideSizePerPage={ hideSizePerPage }
-              hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
-              showTotal={ options.showTotal }
-              paginationTotalRenderer={ options.paginationTotalRenderer }
-              firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
-              prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
-              nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
-              lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
-              prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
-              nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
-              firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
-              lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
-            />
-          </BootstrapContext.Provider>
-        </PaginationContext.Provider>
-      );
-    }
-  }
-
-  return {
-    Provider: PaginationProvider,
-    Consumer: PaginationContext.Consumer
-  };
-};

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

@@ -0,0 +1,100 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+/* eslint no-lonely-if: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Const from './const';
+import { BootstrapContext } from './bootstrap';
+import Pagination from './pagination';
+import { getByCurrPage, alignPage } from './page';
+import createBaseContext from './state-context';
+
+const { Provider } = createBaseContext();
+
+const PaginationDataContext = React.createContext();
+
+class PaginationDataProvider extends Provider {
+  static propTypes = {
+    data: PropTypes.array.isRequired,
+    remoteEmitter: PropTypes.object.isRequired,
+    isRemotePagination: PropTypes.func.isRequired
+  }
+
+  componentWillReceiveProps(nextProps) {
+    super.componentWillReceiveProps(nextProps);
+    const { currSizePerPage } = this;
+    const { custom, onPageChange } = nextProps.pagination.options;
+
+    const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ?
+      nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX;
+
+    // user should align the page when the page is not fit to the data size when remote enable
+    if (!this.isRemotePagination() && !custom) {
+      const newPage = alignPage(
+        nextProps.data.length, this.currPage, currSizePerPage, pageStartIndex);
+
+      if (this.currPage !== newPage) {
+        if (onPageChange) {
+          onPageChange(newPage, currSizePerPage);
+        }
+        this.currPage = newPage;
+      }
+    }
+  }
+
+  isRemotePagination = () => this.props.isRemotePagination();
+
+  renderDefaultPagination = () => {
+    if (!this.props.pagination.options.custom) {
+      const {
+        bootstrap4,
+        page: currPage,
+        sizePerPage: currSizePerPage,
+        dataSize,
+        ...rest
+      } = this.getPaginationProps();
+      return (
+        <BootstrapContext.Provider value={ { bootstrap4 } }>
+          <Pagination
+            { ...rest }
+            key="pagination"
+            dataSize={ dataSize || this.props.data.length }
+            currPage={ currPage }
+            currSizePerPage={ currSizePerPage }
+          />
+        </BootstrapContext.Provider>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    let { data } = this.props;
+    const { pagination: { options } } = this.props;
+    const { currPage, currSizePerPage } = this;
+    const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+      Const.PAGE_START_INDEX : options.pageStartIndex;
+
+    data = this.isRemotePagination() ?
+      data :
+      getByCurrPage(
+        data,
+        currPage,
+        currSizePerPage,
+        pageStartIndex
+      );
+
+    return (
+      <PaginationDataContext.Provider value={ { data, setRemoteEmitter: this.setRemoteEmitter } }>
+        { this.props.children }
+        { this.renderDefaultPagination() }
+      </PaginationDataContext.Provider>
+    );
+  }
+}
+
+export default () => ({
+  Provider: PaginationDataProvider,
+  Consumer: PaginationDataContext.Consumer
+});

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

@@ -20,13 +20,14 @@ class PageButton extends Component {
       page,
       title,
       active,
-      disabled
+      disabled,
+      className
     } = this.props;
     const classes = cs({
       active,
       disabled,
       'page-item': true
-    });
+    }, className);
 
     return (
       <li className={ classes } title={ title }>
@@ -41,6 +42,7 @@ PageButton.propTypes = {
   page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   active: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  className: PropTypes.string,
   title: PropTypes.string
 };
 

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

@@ -8,16 +8,10 @@ export default ExtendBase =>
       return (currPage - 1) < pageStartIndex ? pageStartIndex : currPage - 1;
     }
 
-    goToNextPage() {
-      const { currPage } = this.props;
-      const { lastPage } = this.state;
-      return (currPage + 1) > lastPage ? lastPage : currPage + 1;
-    }
-
     initialState() {
       const totalPages = this.calculateTotalPage();
       const lastPage = this.calculateLastPage(totalPages);
-      return { totalPages, lastPage, dropdownOpen: false };
+      return { totalPages, lastPage };
     }
 
     calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) {
@@ -47,8 +41,9 @@ export default ExtendBase =>
     }
 
     calculatePages(
-      totalPages = this.state.totalPages,
-      lastPage = this.state.lastPage) {
+      totalPages,
+      lastPage
+    ) {
       const {
         currPage,
         paginationSize,
@@ -94,7 +89,7 @@ export default ExtendBase =>
       return pages;
     }
 
-    calculatePageStatus(pages = [], lastPage = this.state.lastPage) {
+    calculatePageStatus(pages = [], lastPage) {
       const {
         currPage,
         pageStartIndex,
@@ -140,8 +135,8 @@ export default ExtendBase =>
     calculateSizePerPageStatus() {
       const { sizePerPageList } = this.props;
       return sizePerPageList.map((_sizePerPage) => {
-        const pageText = _sizePerPage.text || _sizePerPage;
-        const pageNumber = _sizePerPage.value || _sizePerPage;
+        const pageText = typeof _sizePerPage.text !== 'undefined' ? _sizePerPage.text : _sizePerPage;
+        const pageNumber = typeof _sizePerPage.value !== 'undefined' ? _sizePerPage.value : _sizePerPage;
         return {
           text: `${pageText}`,
           page: pageNumber

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

@@ -18,13 +18,11 @@ const startIndex = (
 ) => end - (sizePerPage - 1);
 
 export const alignPage = (
-  data,
+  dataSize,
   page,
   sizePerPage,
   pageStartIndex
 ) => {
-  const dataSize = data.length;
-
   if (page < pageStartIndex || page > (Math.floor(dataSize / sizePerPage) + pageStartIndex)) {
     return pageStartIndex;
   }

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

@@ -0,0 +1,77 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+
+export default WrappedComponent =>
+  class PaginationHandler extends pageResolver(Component) {
+    constructor(props) {
+      super(props);
+      this.handleChangePage = this.handleChangePage.bind(this);
+      this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+      this.state = this.initialState();
+    }
+
+    componentWillReceiveProps(nextProps) {
+      const { dataSize, currSizePerPage } = nextProps;
+      if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
+        const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
+        const lastPage = this.calculateLastPage(totalPages);
+        this.setState({ totalPages, lastPage });
+      }
+    }
+
+    handleChangeSizePerPage(sizePerPage) {
+      const { currSizePerPage, onSizePerPageChange } = this.props;
+      const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
+      let { currPage } = this.props;
+      if (selectedSize !== currSizePerPage) {
+        const newTotalPages = this.calculateTotalPage(selectedSize);
+        const newLastPage = this.calculateLastPage(newTotalPages);
+        if (currPage > newLastPage) currPage = newLastPage;
+        onSizePerPageChange(selectedSize, currPage);
+      }
+    }
+
+    handleChangePage(newPage) {
+      let page;
+      const {
+        currPage,
+        pageStartIndex,
+        prePageText,
+        nextPageText,
+        lastPageText,
+        firstPageText,
+        onPageChange
+      } = this.props;
+      const { lastPage } = this.state;
+
+      if (newPage === prePageText) {
+        page = this.backToPrevPage();
+      } else if (newPage === nextPageText) {
+        page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
+      } else if (newPage === lastPageText) {
+        page = lastPage;
+      } else if (newPage === firstPageText) {
+        page = pageStartIndex;
+      } else {
+        page = parseInt(newPage, 10);
+      }
+      if (page !== currPage) {
+        onPageChange(page);
+      }
+    }
+
+    render() {
+      return (
+        <WrappedComponent
+          { ...this.props }
+          lastPage={ this.state.lastPage }
+          totalPages={ this.state.totalPages }
+          onPageChange={ this.handleChangePage }
+          onSizePerPageChange={ this.handleChangeSizePerPage }
+        />
+      );
+    }
+  };
+

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

@@ -0,0 +1,24 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import PaginationList from './pagination-list';
+
+const paginationListAdapter = WrappedComponent =>
+  class PaginationListAdapter extends pageResolver(Component) {
+    render() {
+      const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props;
+      const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
+      return (
+        <WrappedComponent
+          pageButtonRenderer={ pageButtonRenderer }
+          onPageChange={ onPageChange }
+          pages={ pages }
+        />
+      );
+    }
+  };
+
+
+export const PaginationListWithAdapter = paginationListAdapter(PaginationList);
+export default paginationListAdapter;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import PaginationList from './pagination-list';
+import standaloneAdapter from './standalone-adapter';
+import PaginationHandler from './pagination-handler';
+import paginationListAdapter from './pagination-list-adapter';
+
+const PaginationListStandalone = props => (
+  <PaginationList { ...props } />
+);
+
+export default
+standaloneAdapter(PaginationHandler(paginationListAdapter(PaginationListStandalone)));

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

@@ -6,13 +6,21 @@ import PageButton from './page-button';
 const PaginatonList = props => (
   <ul className="pagination react-bootstrap-table-page-btns-ul">
     {
-      props.pages.map(pageProps => (
-        <PageButton
-          key={ pageProps.page }
-          { ...pageProps }
-          onPageChange={ props.onPageChange }
-        />
-      ))
+      props.pages.map((pageProps) => {
+        if (props.pageButtonRenderer) {
+          return props.pageButtonRenderer({
+            ...pageProps,
+            onPageChange: props.onPageChange
+          });
+        }
+        return (
+          <PageButton
+            key={ pageProps.page }
+            { ...pageProps }
+            onPageChange={ props.onPageChange }
+          />
+        );
+      })
     }
   </ul>
 );
@@ -24,7 +32,12 @@ PaginatonList.propTypes = {
     disable: PropTypes.bool,
     title: PropTypes.string
   })).isRequired,
-  onPageChange: PropTypes.func.isRequired
+  onPageChange: PropTypes.func.isRequired,
+  pageButtonRenderer: PropTypes.func
+};
+
+PaginatonList.defaultProps = {
+  pageButtonRenderer: null
 };
 
 export default PaginatonList;

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

@@ -0,0 +1,24 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import PaginationTotal from './pagination-total';
+
+const paginationTotalAdapter = WrappedComponent =>
+  class PaginationTotalAdapter extends pageResolver(Component) {
+    render() {
+      const [from, to] = this.calculateFromTo();
+      return (
+        <WrappedComponent
+          from={ from }
+          to={ to }
+          dataSize={ this.props.dataSize }
+          paginationTotalRenderer={ this.props.paginationTotalRenderer }
+        />
+      );
+    }
+  };
+
+
+export const PaginationTotalWithAdapter = paginationTotalAdapter(PaginationTotal);
+export default paginationTotalAdapter;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import PaginationTotal from './pagination-total';
+import standaloneAdapter from './standalone-adapter';
+import paginationTotalAdapter from './pagination-total-adapter';
+
+const PaginationTotalStandalone = props => (
+  <PaginationTotal { ...props } />
+);
+
+export default
+standaloneAdapter(paginationTotalAdapter(PaginationTotalStandalone));

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

@@ -1,16 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PaginationTotal = props => (
-  <span className="react-bootstrap-table-pagination-total">
-    &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
-  </span>
-);
+const PaginationTotal = (props) => {
+  if (props.paginationTotalRenderer) {
+    return props.paginationTotalRenderer(props.from, props.to, props.dataSize);
+  }
+  return (
+    <span className="react-bootstrap-table-pagination-total">
+      &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
+    </span>
+  );
+};
 
 PaginationTotal.propTypes = {
   from: PropTypes.number.isRequired,
   to: PropTypes.number.isRequired,
-  dataSize: PropTypes.number.isRequired
+  dataSize: PropTypes.number.isRequired,
+  paginationTotalRenderer: PropTypes.func
+};
+
+PaginationTotal.defaultProps = {
+  paginationTotalRenderer: undefined
 };
 
 export default PaginationTotal;

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

@@ -4,118 +4,36 @@ import cs from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import pageResolver from './page-resolver';
-import SizePerPageDropDown from './size-per-page-dropdown';
-import PaginationList from './pagination-list';
-import PaginationTotal from './pagination-total';
+import paginationHandler from './pagination-handler';
+import { SizePerPageDropdownWithAdapter } from './size-per-page-dropdown-adapter';
+import { PaginationListWithAdapter } from './pagination-list-adapter';
+import { PaginationTotalWithAdapter } from './pagination-total-adapter';
 import Const from './const';
 
 class Pagination extends pageResolver(Component) {
-  constructor(props) {
-    super(props);
-    this.closeDropDown = this.closeDropDown.bind(this);
-    this.toggleDropDown = this.toggleDropDown.bind(this);
-    this.handleChangePage = this.handleChangePage.bind(this);
-    this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
-    this.state = this.initialState();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { dataSize, currSizePerPage } = nextProps;
-    if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
-      const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
-      const lastPage = this.calculateLastPage(totalPages);
-      this.setState({ totalPages, lastPage });
-    }
-  }
-
-  toggleDropDown() {
-    const dropdownOpen = !this.state.dropdownOpen;
-    this.setState(() => {
-      return { dropdownOpen };
-    });
-  }
-
-  closeDropDown() {
-    this.setState(() => {
-      return { dropdownOpen: false };
-    });
-  }
-
-  handleChangeSizePerPage(sizePerPage) {
-    const { currSizePerPage, onSizePerPageChange } = this.props;
-    const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
-    let { currPage } = this.props;
-    if (selectedSize !== currSizePerPage) {
-      const newTotalPages = this.calculateTotalPage(selectedSize);
-      const newLastPage = this.calculateLastPage(newTotalPages);
-      if (currPage > newLastPage) currPage = newLastPage;
-      onSizePerPageChange(selectedSize, currPage);
-    }
-    this.closeDropDown();
-  }
-
-  handleChangePage(newPage) {
-    let page;
+  render() {
     const {
       currPage,
       pageStartIndex,
-      prePageText,
-      nextPageText,
-      lastPageText,
-      firstPageText,
-      onPageChange
-      // keepSizePerPageState
-    } = this.props;
-    const { lastPage } = this.state;
-
-    if (newPage === prePageText) {
-      page = this.backToPrevPage();
-    } else if (newPage === nextPageText) {
-      page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
-    } else if (newPage === lastPageText) {
-      page = lastPage;
-    } else if (newPage === firstPageText) {
-      page = pageStartIndex;
-    } else {
-      page = parseInt(newPage, 10);
-    }
-
-    // if (keepSizePerPageState) { this.closeDropDown(); }
-
-    if (page !== currPage) {
-      onPageChange(page);
-    }
-  }
-
-  defaultTotal = (from, to, size) => (
-    <PaginationTotal
-      from={ from }
-      to={ to }
-      dataSize={ size }
-    />
-  );
-
-  setTotal = (from, to, size, total) => {
-    if (total && (typeof total === 'function')) {
-      return total(from, to, size);
-    }
-
-    return this.defaultTotal(from, to, size);
-  };
-
-  render() {
-    const { totalPages, lastPage, dropdownOpen: open } = this.state;
-    const {
       showTotal,
       dataSize,
+      pageListRenderer,
+      pageButtonRenderer,
       paginationTotalRenderer,
+      hidePageListOnlyOnePage,
+      totalPages,
+      lastPage,
+      onPageChange,
       sizePerPageList,
       currSizePerPage,
       hideSizePerPage,
-      hidePageListOnlyOnePage
+      sizePerPageRenderer,
+      sizePerPageOptionRenderer,
+      onSizePerPageChange,
+      ...rest
     } = this.props;
-    const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage);
-    const [from, to] = this.calculateFromTo();
+
+    const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
     const pageListClass = cs(
       'react-bootstrap-table-pagination-list',
       'col-md-6 col-xs-6 col-sm-6 col-lg-6', {
@@ -124,32 +42,44 @@ class Pagination extends pageResolver(Component) {
     return (
       <div className="row react-bootstrap-table-pagination">
         <div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
-          {
-            sizePerPageList.length > 1 && !hideSizePerPage ?
-              (
-                <SizePerPageDropDown
-                  currSizePerPage={ `${currSizePerPage}` }
-                  options={ this.calculateSizePerPageStatus() }
-                  onSizePerPageChange={ this.handleChangeSizePerPage }
-                  onClick={ this.toggleDropDown }
-                  onBlur={ this.closeDropDown }
-                  open={ open }
-                />
-              ) : null
-          }
+          <SizePerPageDropdownWithAdapter
+            sizePerPageList={ sizePerPageList }
+            currSizePerPage={ currSizePerPage }
+            hideSizePerPage={ hideSizePerPage }
+            sizePerPageRenderer={ sizePerPageRenderer }
+            sizePerPageOptionRenderer={ sizePerPageOptionRenderer }
+            onSizePerPageChange={ onSizePerPageChange }
+          />
           {
             showTotal ?
-              this.setTotal(
-                from,
-                to,
-                dataSize,
-                paginationTotalRenderer
-              ) : null
+              <PaginationTotalWithAdapter
+                currPage={ currPage }
+                currSizePerPage={ currSizePerPage }
+                pageStartIndex={ pageStartIndex }
+                dataSize={ dataSize }
+                paginationTotalRenderer={ paginationTotalRenderer }
+              /> : null
           }
         </div>
-        <div className={ pageListClass }>
-          <PaginationList pages={ pages } onPageChange={ this.handleChangePage } />
-        </div>
+        {
+          pageListRenderer ? pageListRenderer({
+            pages,
+            onPageChange
+          }) : (
+            <div className={ pageListClass }>
+              <PaginationListWithAdapter
+                { ...rest }
+                currPage={ currPage }
+                currSizePerPage={ currSizePerPage }
+                pageStartIndex={ pageStartIndex }
+                lastPage={ lastPage }
+                totalPages={ totalPages }
+                pageButtonRenderer={ pageButtonRenderer }
+                onPageChange={ onPageChange }
+              />
+            </div>
+          )
+        }
       </div>
     );
   }
@@ -165,7 +95,11 @@ Pagination.propTypes = {
   pageStartIndex: PropTypes.number,
   paginationSize: PropTypes.number,
   showTotal: PropTypes.bool,
+  pageListRenderer: PropTypes.func,
+  pageButtonRenderer: PropTypes.func,
+  sizePerPageRenderer: PropTypes.func,
   paginationTotalRenderer: PropTypes.func,
+  sizePerPageOptionRenderer: PropTypes.func,
   firstPageText: PropTypes.string,
   prePageText: PropTypes.string,
   nextPageText: PropTypes.string,
@@ -186,7 +120,11 @@ Pagination.defaultProps = {
   withFirstAndLast: Const.With_FIRST_AND_LAST,
   alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
   showTotal: Const.SHOW_TOTAL,
+  pageListRenderer: null,
+  pageButtonRenderer: null,
+  sizePerPageRenderer: null,
   paginationTotalRenderer: Const.PAGINATION_TOTAL,
+  sizePerPageOptionRenderer: null,
   firstPageText: Const.FIRST_PAGE_TEXT,
   prePageText: Const.PRE_PAGE_TEXT,
   nextPageText: Const.NEXT_PAGE_TEXT,
@@ -200,4 +138,4 @@ Pagination.defaultProps = {
   hidePageListOnlyOnePage: Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE
 };
 
-export default Pagination;
+export default paginationHandler(Pagination);

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js

@@ -0,0 +1,67 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import SizePerPageDropDown from './size-per-page-dropdown';
+
+const sizePerPageDropdownAdapter = WrappedComponent =>
+  class SizePerPageDropdownAdapter extends pageResolver(Component) {
+    constructor(props) {
+      super(props);
+      this.closeDropDown = this.closeDropDown.bind(this);
+      this.toggleDropDown = this.toggleDropDown.bind(this);
+      this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+      this.state = { dropdownOpen: false };
+    }
+
+    toggleDropDown() {
+      const dropdownOpen = !this.state.dropdownOpen;
+      this.setState(() => ({ dropdownOpen }));
+    }
+
+    closeDropDown() {
+      this.setState(() => ({ dropdownOpen: false }));
+    }
+
+    handleChangeSizePerPage(sizePerPage) {
+      this.props.onSizePerPageChange(sizePerPage);
+      this.closeDropDown();
+    }
+
+    render() {
+      const {
+        sizePerPageList,
+        currSizePerPage,
+        hideSizePerPage,
+        sizePerPageRenderer,
+        sizePerPageOptionRenderer
+      } = this.props;
+      const { dropdownOpen: open } = this.state;
+
+      if (sizePerPageList.length > 1 && !hideSizePerPage) {
+        if (sizePerPageRenderer) {
+          return sizePerPageRenderer({
+            options: this.calculateSizePerPageStatus(),
+            currSizePerPage: `${currSizePerPage}`,
+            onSizePerPageChange: this.handleChangeSizePerPage
+          });
+        }
+        return (
+          <WrappedComponent
+            currSizePerPage={ `${currSizePerPage}` }
+            options={ this.calculateSizePerPageStatus() }
+            optionRenderer={ sizePerPageOptionRenderer }
+            onSizePerPageChange={ this.handleChangeSizePerPage }
+            onClick={ this.toggleDropDown }
+            onBlur={ this.closeDropDown }
+            open={ open }
+          />
+        );
+      }
+      return null;
+    }
+  };
+
+
+export const SizePerPageDropdownWithAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
+export default sizePerPageDropdownAdapter;

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import SizePerPageDropdown from './size-per-page-dropdown';
+import standaloneAdapter from './standalone-adapter';
+import paginationHandler from './pagination-handler';
+import sizePerPageDropdownAdapter from './size-per-page-dropdown-adapter';
+
+const SizePerPageDropdownStandalone = props => (
+  <SizePerPageDropdown { ...props } />
+);
+
+export default
+standaloneAdapter(paginationHandler(sizePerPageDropdownAdapter(SizePerPageDropdownStandalone)));

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js

@@ -16,6 +16,7 @@ const SizePerPageDropDown = (props) => {
     className,
     variation,
     btnContextual,
+    optionRenderer,
     currSizePerPage,
     onSizePerPageChange
   } = props;
@@ -61,14 +62,22 @@ const SizePerPageDropDown = (props) => {
               aria-labelledby="pageDropDown"
             >
               {
-                options.map(option => (
-                  <SizePerPageOption
-                    { ...option }
-                    key={ option.text }
-                    bootstrap4={ bootstrap4 }
-                    onSizePerPageChange={ onSizePerPageChange }
-                  />
-                ))
+                options.map((option) => {
+                  if (optionRenderer) {
+                    return optionRenderer({
+                      ...option,
+                      onSizePerPageChange
+                    });
+                  }
+                  return (
+                    <SizePerPageOption
+                      { ...option }
+                      key={ option.text }
+                      bootstrap4={ bootstrap4 }
+                      onSizePerPageChange={ onSizePerPageChange }
+                    />
+                  );
+                })
               }
             </ul>
           </span>
@@ -88,14 +97,16 @@ SizePerPageDropDown.propTypes = {
   hidden: PropTypes.bool,
   btnContextual: PropTypes.string,
   variation: PropTypes.oneOf(['dropdown', 'dropup']),
-  className: PropTypes.string
+  className: PropTypes.string,
+  optionRenderer: PropTypes.func
 };
 SizePerPageDropDown.defaultProps = {
   open: false,
   hidden: false,
   btnContextual: 'btn-default btn-secondary',
   variation: 'dropdown',
-  className: ''
+  className: '',
+  optionRenderer: null
 };
 
 

packages/react-bootstrap-table2-paginator/src/standalone-adapter.js

@@ -0,0 +1,14 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+export default WrappedComponent => ({
+  page,
+  sizePerPage,
+  ...rest
+}) => (
+  <WrappedComponent
+    { ...rest }
+    currPage={ page }
+    currSizePerPage={ sizePerPage }
+  />
+);

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

@@ -0,0 +1,191 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+/* eslint no-lonely-if: 0 */
+import React from 'react';
+import EventEmitter from 'events';
+import Const from './const';
+import { alignPage } from './page';
+
+const StateContext = React.createContext();
+
+class StateProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChangePage = this.handleChangePage.bind(this);
+    this.handleDataSizeChange = this.handleDataSizeChange.bind(this);
+    this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+
+    let currPage;
+    let currSizePerPage;
+    const { options } = props.pagination;
+    const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
+
+    // initialize current page
+    if (typeof options.page !== 'undefined') {
+      currPage = options.page;
+    } else if (typeof options.pageStartIndex !== 'undefined') {
+      currPage = options.pageStartIndex;
+    } else {
+      currPage = Const.PAGE_START_INDEX;
+    }
+
+    // initialize current sizePerPage
+    if (typeof options.sizePerPage !== 'undefined') {
+      currSizePerPage = options.sizePerPage;
+    } else if (typeof sizePerPageList[0] === 'object') {
+      currSizePerPage = sizePerPageList[0].value;
+    } else {
+      currSizePerPage = sizePerPageList[0];
+    }
+
+    this.currPage = currPage;
+    this.dataSize = options.totalSize;
+    this.currSizePerPage = currSizePerPage;
+    this.dataChangeListener = new EventEmitter();
+    this.dataChangeListener.on('filterChanged', this.handleDataSizeChange);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { custom } = nextProps.pagination.options;
+
+    // user should align the page when the page is not fit to the data size when remote enable
+    if (this.isRemotePagination() || custom) {
+      this.currPage = nextProps.pagination.options.page;
+      this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+      this.dataSize = nextProps.pagination.options.totalSize;
+    }
+  }
+
+  getPaginationProps = () => {
+    const { pagination: { options }, bootstrap4 } = this.props;
+    const { currPage, currSizePerPage, dataSize } = this;
+    const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
+      Const.With_FIRST_AND_LAST : options.withFirstAndLast;
+    const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
+      Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
+    const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
+      Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
+    const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
+      Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+    const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+      Const.PAGE_START_INDEX : options.pageStartIndex;
+    return {
+      ...options,
+      bootstrap4,
+      page: currPage,
+      sizePerPage: currSizePerPage,
+      pageStartIndex,
+      hidePageListOnlyOnePage,
+      hideSizePerPage,
+      alwaysShowAllBtns,
+      withFirstAndLast,
+      dataSize,
+      sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
+      paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
+      showTotal: options.showTotal,
+      pageListRenderer: options.pageListRenderer,
+      pageButtonRenderer: options.pageButtonRenderer,
+      sizePerPageRenderer: options.sizePerPageRenderer,
+      paginationTotalRenderer: options.paginationTotalRenderer,
+      sizePerPageOptionRenderer: options.sizePerPageOptionRenderer,
+      firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
+      prePageText: options.prePageText || Const.PRE_PAGE_TEXT,
+      nextPageText: options.nextPageText || Const.NEXT_PAGE_TEXT,
+      lastPageText: options.lastPageText || Const.LAST_PAGE_TEXT,
+      prePageTitle: options.prePageTitle || Const.PRE_PAGE_TITLE,
+      nextPageTitle: options.nextPageTitle || Const.NEXT_PAGE_TITLE,
+      firstPageTitle: options.firstPageTitle || Const.FIRST_PAGE_TITLE,
+      lastPageTitle: options.lastPageTitle || Const.LAST_PAGE_TITLE,
+      onPageChange: this.handleChangePage,
+      onSizePerPageChange: this.handleChangeSizePerPage
+    };
+  }
+
+  setPaginationRemoteEmitter = (remoteEmitter) => {
+    this.remoteEmitter = remoteEmitter;
+  }
+
+  getPaginationRemoteEmitter = () => this.remoteEmitter || this.props.remoteEmitter;
+
+  isRemotePagination = () => {
+    const e = {};
+    this.remoteEmitter.emit('isRemotePagination', e);
+    return e.result;
+  };
+
+  handleDataSizeChange(newDataSize) {
+    const { pagination: { options } } = this.props;
+    const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+      Const.PAGE_START_INDEX : options.pageStartIndex;
+    this.dataSize = newDataSize;
+    this.currPage = alignPage(
+      newDataSize,
+      this.currPage,
+      this.currSizePerPage,
+      pageStartIndex
+    );
+    this.forceUpdate();
+  }
+
+  handleChangePage(currPage) {
+    const { currSizePerPage } = this;
+    const { pagination: { options } } = this.props;
+
+    if (options.onPageChange) {
+      options.onPageChange(currPage, currSizePerPage);
+    }
+
+    this.currPage = currPage;
+
+    if (this.isRemotePagination()) {
+      this.getPaginationRemoteEmitter().emit('paginationChange', currPage, currSizePerPage);
+      return;
+    }
+    this.forceUpdate();
+  }
+
+  handleChangeSizePerPage(currSizePerPage, currPage) {
+    const { pagination: { options } } = this.props;
+
+    if (options.onSizePerPageChange) {
+      options.onSizePerPageChange(currSizePerPage, currPage);
+    }
+
+    this.currPage = currPage;
+    this.currSizePerPage = currSizePerPage;
+
+    if (this.isRemotePagination()) {
+      this.getPaginationRemoteEmitter().emit('paginationChange', currPage, currSizePerPage);
+      return;
+    }
+    this.forceUpdate();
+  }
+
+  render() {
+    const paginationProps = this.getPaginationProps();
+    const pagination = {
+      ...this.props.pagination,
+      options: paginationProps
+    };
+
+    return (
+      <StateContext.Provider
+        value={ {
+          paginationProps,
+          paginationTableProps: {
+            pagination,
+            setPaginationRemoteEmitter: this.setPaginationRemoteEmitter,
+            dataChangeListener: this.dataChangeListener
+          }
+        } }
+      >
+        { this.props.children }
+      </StateContext.Provider>
+    );
+  }
+}
+
+export default () => ({
+  Provider: StateProvider,
+  Consumer: StateContext.Consumer
+});

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

@@ -1,711 +0,0 @@
-import 'jsdom-global/register';
-import React from 'react';
-import { shallow } from 'enzyme';
-import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
-
-import Pagination from '../src/pagination';
-import Const from '../src/const';
-import createPaginationContext from '../src/context';
-import paginationFactory from '../index';
-
-const data = [];
-for (let i = 0; i < 100; i += 1) {
-  data.push({
-    id: i,
-    name: `itme name ${i}`
-  });
-}
-
-describe('PaginationContext', () => {
-  let wrapper;
-  let PaginationContext;
-
-  const columns = [{
-    dataField: 'id',
-    text: 'ID'
-  }, {
-    dataField: 'name',
-    text: 'Name'
-  }];
-
-  const defaultPagination = { options: {} };
-
-  const mockBase = jest.fn((props => (
-    <BootstrapTable
-      keyField="id"
-      data={ data }
-      columns={ columns }
-      { ...props }
-    />
-  )));
-
-  const handleRemotePaginationChange = jest.fn();
-
-  function shallowContext(
-    customPagination = defaultPagination,
-    enableRemote = false
-  ) {
-    mockBase.mockReset();
-    handleRemotePaginationChange.mockReset();
-    PaginationContext = createPaginationContext(
-      jest.fn().mockReturnValue(enableRemote),
-      handleRemotePaginationChange
-    );
-
-    return (
-      <PaginationContext.Provider
-        pagination={ paginationFactory(customPagination) }
-        columns={ columns }
-        data={ data }
-      >
-        <PaginationContext.Consumer>
-          {
-            paginationProps => mockBase(paginationProps)
-          }
-        </PaginationContext.Consumer>
-      </PaginationContext.Provider>
-    );
-  }
-
-  describe('default render', () => {
-    beforeEach(() => {
-      wrapper = shallow(shallowContext());
-      wrapper.render();
-    });
-
-    it('should have correct Provider property after calling createPaginationContext', () => {
-      expect(PaginationContext.Provider).toBeDefined();
-    });
-
-    it('should have correct Consumer property after calling createPaginationContext', () => {
-      expect(PaginationContext.Consumer).toBeDefined();
-    });
-
-    it('should have correct currPage', () => {
-      expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
-    });
-
-    it('should have correct currSizePerPage', () => {
-      expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
-    });
-
-    it('should render Pagination component correctly', () => {
-      expect(wrapper.length).toBe(1);
-      const instance = wrapper.instance();
-      const pagination = wrapper.find(Pagination);
-      expect(pagination).toHaveLength(1);
-      expect(pagination.prop('dataSize')).toEqual(data.length);
-      expect(pagination.prop('currPage')).toEqual(instance.currPage);
-      expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage);
-      expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
-      expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
-      expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
-      expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
-      expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
-      expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
-      expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
-      expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
-      expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
-      expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
-      expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
-      expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
-      expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
-      expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
-      expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
-      expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
-      expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
-      expect(pagination.prop('paginationTotalRenderer')).toBeNull();
-    });
-
-    it('should pass correct cell editing props to children element', () => {
-      expect(mockBase.mock.calls[0][0].data).toHaveLength(Const.SIZE_PER_PAGE_LIST[0]);
-    });
-  });
-
-  describe('componentWillReceiveProps', () => {
-    let instance;
-    let nextProps;
-
-    describe('when nextProps.pagination.options.page is not existing', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultPagination,
-          page: 3
-        }));
-        instance = wrapper.instance();
-        wrapper.render();
-        nextProps = { data, pagination: defaultPagination };
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should not set currPage', () => {
-        expect(instance.currPage).toEqual(3);
-      });
-    });
-
-    describe('when nextProps.pagination.options.sizePerPage is not existing', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultPagination,
-          sizePerPage: Const.SIZE_PER_PAGE_LIST[2]
-        }));
-        instance = wrapper.instance();
-        wrapper.render();
-        nextProps = { data, pagination: defaultPagination };
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should not set currSizePerPage', () => {
-        expect(instance.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[2]);
-      });
-    });
-
-    describe('when remote pagination is enable', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({ ...defaultPagination }, true));
-        instance = wrapper.instance();
-        wrapper.render();
-        nextProps = {
-          data,
-          pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } }
-        };
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should always set currPage from nextProps.pagination.options.page', () => {
-        expect(instance.currPage).toEqual(nextProps.pagination.options.page);
-      });
-
-      it('should always set currSizePerPage from nextProps.pagination.options.sizePerPage', () => {
-        expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
-      });
-    });
-
-    describe('when page is not align', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultPagination,
-          page: 2
-        }));
-        instance = wrapper.instance();
-        wrapper.render();
-        nextProps = {
-          data: [],
-          pagination: { ...defaultPagination }
-        };
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should reset currPage to first page', () => {
-        expect(instance.currPage).toEqual(1);
-      });
-
-      describe('if options.onPageChange is defined', () => {
-        const onPageChange = jest.fn();
-        beforeEach(() => {
-          onPageChange.mockClear();
-          wrapper = shallow(shallowContext({
-            ...defaultPagination,
-            page: 2
-          }));
-          instance = wrapper.instance();
-          wrapper.render();
-          nextProps = {
-            data: [],
-            pagination: { ...defaultPagination, options: { onPageChange } }
-          };
-          instance.componentWillReceiveProps(nextProps);
-        });
-
-        it('should call options.onPageChange correctly', () => {
-          expect(onPageChange).toHaveBeenCalledTimes(1);
-          expect(onPageChange).toHaveBeenCalledWith(instance.currPage, instance.currSizePerPage);
-        });
-      });
-    });
-  });
-
-  describe('handleChangePage', () => {
-    let instance;
-    const newPage = 3;
-
-    describe('should update component correctly', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext());
-        instance = wrapper.instance();
-        jest.spyOn(instance, 'forceUpdate');
-        instance.handleChangePage(newPage);
-      });
-
-      it('', () => {
-        expect(instance.currPage).toEqual(newPage);
-        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('if options.onPageChange is defined', () => {
-      const onPageChange = jest.fn();
-      beforeEach(() => {
-        onPageChange.mockClear();
-        wrapper = shallow(shallowContext({
-          ...defaultPagination,
-          onPageChange
-        }));
-        instance = wrapper.instance();
-        jest.spyOn(instance, 'forceUpdate');
-        instance.handleChangePage(newPage);
-      });
-
-      it('should still update component correctly', () => {
-        expect(instance.currPage).toEqual(newPage);
-        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-      });
-
-      it('should call options.onPageChange correctly', () => {
-        expect(onPageChange).toHaveBeenCalledTimes(1);
-        expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage);
-      });
-    });
-
-    describe('if remote pagination is enable', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultPagination
-        }, true));
-        instance = wrapper.instance();
-        jest.spyOn(instance, 'forceUpdate');
-        instance.handleChangePage(newPage);
-      });
-
-      it('should still update component correctly', () => {
-        expect(instance.currPage).toEqual(newPage);
-        expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
-      });
-
-      it('should call handleRemotePageChange correctly', () => {
-        expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
-        expect(handleRemotePaginationChange)
-          .toHaveBeenCalledWith(newPage, instance.currSizePerPage);
-      });
-    });
-  });
-
-  describe('handleChangeSizePerPage', () => {
-    let instance;
-    const newPage = 2;
-    const newSizePerPage = 15;
-
-    describe('should update component correctly', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext());
-        instance = wrapper.instance();
-        jest.spyOn(instance, 'forceUpdate');
-        instance.handleChangeSizePerPage(newSizePerPage, newPage);
-      });
-
-      it('', () => {
-        expect(instance.currPage).toEqual(newPage);
-        expect(instance.currSizePerPage).toEqual(newSizePerPage);
-        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('if options.onSizePerPageChange is defined', () => {
-      const onSizePerPageChange = jest.fn();
-      beforeEach(() => {
-        onSizePerPageChange.mockClear();
-        wrapper = shallow(shallowContext({
-          ...defaultPagination,
-          onSizePerPageChange
-        }));
-        instance = wrapper.instance();
-        jest.spyOn(instance, 'forceUpdate');
-        instance.handleChangeSizePerPage(newSizePerPage, newPage);
-      });
-
-      it('should still update component correctly', () => {
-        expect(instance.currPage).toEqual(newPage);
-        expect(instance.currSizePerPage).toEqual(newSizePerPage);
-        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
-      });
-
-      it('should call options.onSizePerPageChange correctly', () => {
-        expect(onSizePerPageChange).toHaveBeenCalledTimes(1);
-        expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage);
-      });
-    });
-
-    describe('if remote pagination is enable', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({
-          ...defaultPagination
-        }, true));
-        instance = wrapper.instance();
-        jest.spyOn(instance, 'forceUpdate');
-        instance.handleChangeSizePerPage(newSizePerPage, newPage);
-      });
-
-      it('should still update component correctly', () => {
-        expect(instance.currPage).toEqual(newPage);
-        expect(instance.currSizePerPage).toEqual(newSizePerPage);
-        expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
-      });
-
-      it('should call handleRemotePageChange correctly', () => {
-        expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
-        expect(handleRemotePaginationChange)
-          .toHaveBeenCalledWith(newPage, newSizePerPage);
-      });
-    });
-  });
-
-  describe('when options.page is defined', () => {
-    const page = 3;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        page
-      }));
-      wrapper.render();
-    });
-
-    it('should set correct currPage', () => {
-      expect(wrapper.instance().currPage).toEqual(page);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('currPage')).toEqual(page);
-    });
-  });
-
-  describe('when options.sizePerPage is defined', () => {
-    const sizePerPage = Const.SIZE_PER_PAGE_LIST[2];
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        sizePerPage
-      }));
-      wrapper.render();
-    });
-
-    it('should set correct currSizePerPage', () => {
-      expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
-    });
-  });
-
-  describe('when options.totalSize is defined', () => {
-    const totalSize = 100;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        totalSize
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('dataSize')).toEqual(totalSize);
-    });
-  });
-
-  describe('when options.showTotal is defined', () => {
-    const showTotal = true;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        showTotal
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('showTotal')).toEqual(showTotal);
-    });
-  });
-
-  describe('when options.pageStartIndex is defined', () => {
-    const pageStartIndex = -1;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        pageStartIndex
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
-    });
-  });
-
-  describe('when options.sizePerPageList is defined', () => {
-    const sizePerPageList = [10, 40];
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        sizePerPageList
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
-    });
-  });
-
-  describe('when options.paginationSize is defined', () => {
-    const paginationSize = 10;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        paginationSize
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('paginationSize')).toEqual(paginationSize);
-    });
-  });
-
-  describe('when options.withFirstAndLast is defined', () => {
-    const withFirstAndLast = false;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        withFirstAndLast
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
-    });
-  });
-
-  describe('when options.alwaysShowAllBtns is defined', () => {
-    const alwaysShowAllBtns = true;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        alwaysShowAllBtns
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
-    });
-  });
-
-  describe('when options.firstPageText is defined', () => {
-    const firstPageText = '1st';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        firstPageText
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('firstPageText')).toEqual(firstPageText);
-    });
-  });
-
-  describe('when options.prePageText is defined', () => {
-    const prePageText = 'PRE';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        prePageText
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('prePageText')).toEqual(prePageText);
-    });
-  });
-
-  describe('when options.nextPageText is defined', () => {
-    const nextPageText = 'NEXT';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        nextPageText
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('nextPageText')).toEqual(nextPageText);
-    });
-  });
-
-  describe('when options.lastPageText is defined', () => {
-    const lastPageText = 'LAST';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        lastPageText
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('lastPageText')).toEqual(lastPageText);
-    });
-  });
-
-  describe('when options.firstPageTitle is defined', () => {
-    const firstPageTitle = '1st';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        firstPageTitle
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
-    });
-  });
-
-  describe('when options.prePageTitle is defined', () => {
-    const prePageTitle = 'PRE';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        prePageTitle
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
-    });
-  });
-
-  describe('when options.nextPageTitle is defined', () => {
-    const nextPageTitle = 'NEXT';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        nextPageTitle
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
-    });
-  });
-
-  describe('when options.lastPageTitle is defined', () => {
-    const lastPageTitle = 'nth';
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        lastPageTitle
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
-    });
-  });
-
-  describe('when options.hideSizePerPage is defined', () => {
-    const hideSizePerPage = true;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        hideSizePerPage
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
-    });
-  });
-
-  describe('when options.hidePageListOnlyOnePage is defined', () => {
-    const hidePageListOnlyOnePage = true;
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext({
-        ...defaultPagination,
-        hidePageListOnlyOnePage
-      }));
-      wrapper.render();
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
-    });
-  });
-});

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

@@ -0,0 +1,208 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import paginationFactory from '../index';
+import Const from '../src/const';
+import createStateContext from '../src/data-context';
+import Pagination from '../src/pagination';
+import { getByCurrPage } from '../src/page';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    id: i,
+    name: `itme name ${i}`
+  });
+}
+
+describe('PaginationDataContext', () => {
+  let wrapper;
+  let PaginationDataContext;
+
+  const defaultPagination = { options: { totalSize: data.length }, createContext: jest.fn() };
+
+  const MockComponent = () => null;
+  const renderMockComponent = jest.fn((props => (
+    <MockComponent { ...props } />
+  )));
+
+  const handleRemotePaginationChange = jest.fn();
+
+  function shallowContext(
+    customPagination = defaultPagination,
+    remoteEnabled = false
+  ) {
+    renderMockComponent.mockReset();
+    handleRemotePaginationChange.mockReset();
+    PaginationDataContext = createStateContext();
+    const isRemotePagination = jest.fn().mockReturnValue(remoteEnabled);
+    const remoteEmitter = { emit: jest.fn() };
+
+    return (
+      <PaginationDataContext.Provider
+        pagination={ paginationFactory(customPagination) }
+        data={ data }
+        remoteEmitter={ remoteEmitter }
+        isRemotePagination={ isRemotePagination }
+      >
+        <PaginationDataContext.Consumer>
+          {
+            paginationProps => renderMockComponent(paginationProps)
+          }
+        </PaginationDataContext.Consumer>
+      </PaginationDataContext.Provider>
+    );
+  }
+
+  describe('default render', () => {
+    beforeEach(() => {
+      wrapper = shallow(shallowContext());
+      wrapper.render();
+    });
+
+    it('should have correct Provider property after calling createPaginationDataContext', () => {
+      expect(PaginationDataContext.Provider).toBeDefined();
+    });
+
+    it('should have correct Consumer property after calling createPaginationDataContext', () => {
+      expect(PaginationDataContext.Consumer).toBeDefined();
+    });
+
+    it('should have correct currPage', () => {
+      expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
+    });
+
+    it('should have correct currSizePerPage', () => {
+      expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
+    });
+
+    it('should render correct data props to childrens', () => {
+      const instance = wrapper.instance();
+      expect(renderMockComponent).toHaveBeenCalledTimes(1);
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        data: getByCurrPage(
+          data,
+          instance.currPage,
+          instance.currSizePerPage,
+          Const.PAGE_START_INDEX
+        ),
+        setRemoteEmitter: instance.setRemoteEmitter
+      });
+    });
+  });
+
+  describe('default render', () => {
+    describe('when options.custom is negative', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.render();
+      });
+
+      it('should render Pagination component correctly', () => {
+        const instance = wrapper.instance();
+        const pagination = wrapper.find(Pagination);
+        expect(pagination).toHaveLength(1);
+
+        expect(pagination.prop('dataSize')).toEqual(data.length);
+        expect(pagination.prop('currPage')).toEqual(instance.currPage);
+        expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage);
+        expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
+        expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
+        expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
+        expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
+        expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
+        expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
+        expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
+        expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
+        expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
+        expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
+        expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
+        expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
+        expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
+        expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
+        expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
+        expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+        expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+        expect(pagination.prop('paginationTotalRenderer')).toBeUndefined();
+      });
+    });
+
+    describe('when options.custom is positive', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          custom: true
+        }));
+        wrapper.render();
+      });
+
+      it('should not render Pagination component', () => {
+        const pagination = wrapper.find(Pagination);
+        expect(pagination).toHaveLength(0);
+      });
+    });
+  });
+
+  describe('when remote pagination enabled', () => {
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({}, true));
+      wrapper.render();
+    });
+
+    it('just pass data props to children', () => {
+      const instance = wrapper.instance();
+      expect(renderMockComponent).toHaveBeenCalledTimes(1);
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        data: instance.props.data,
+        setRemoteEmitter: instance.setRemoteEmitter
+      });
+    });
+  });
+
+  describe('componentWillReceiveProps', () => {
+    let instance;
+    let nextProps;
+    describe('when page is not align', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          page: 2
+        }));
+        instance = wrapper.instance();
+        wrapper.render();
+        nextProps = {
+          data: [],
+          pagination: { ...defaultPagination }
+        };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should reset currPage to first page', () => {
+        expect(instance.currPage).toEqual(1);
+      });
+
+      describe('if options.onPageChange is defined', () => {
+        const onPageChange = jest.fn();
+        beforeEach(() => {
+          onPageChange.mockClear();
+          wrapper = shallow(shallowContext({
+            ...defaultPagination,
+            page: 2
+          }));
+          instance = wrapper.instance();
+          wrapper.render();
+          nextProps = {
+            data: [],
+            pagination: { ...defaultPagination, options: { onPageChange } }
+          };
+          instance.componentWillReceiveProps(nextProps);
+        });
+
+        it('should call options.onPageChange correctly', () => {
+          expect(onPageChange).toHaveBeenCalledTimes(1);
+          expect(onPageChange).toHaveBeenCalledWith(instance.currPage, instance.currSizePerPage);
+        });
+      });
+    });
+  });
+});

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

@@ -46,8 +46,6 @@ describe('PageResolver', () => {
       expect(instance.state.lastPage).toBeDefined();
       expect(instance.state.lastPage).toEqual(
         instance.calculateLastPage(instance.state.totalPages));
-      expect(instance.state.dropdownOpen).toBeDefined();
-      expect(instance.state.dropdownOpen).toBeFalsy();
     });
   });
 
@@ -81,35 +79,6 @@ describe('PageResolver', () => {
     });
   });
 
-  describe('goToNextPage', () => {
-    const props = createMockProps();
-
-    describe('when props.currPage is not hitting state.lastPage', () => {
-      beforeEach(() => {
-        const mockElement = React.createElement(MockComponent, props, null);
-        wrapper = shallow(mockElement);
-      });
-
-      it('should getting previous page correctly', () => {
-        const instance = wrapper.instance();
-        expect(instance.goToNextPage()).toEqual(props.currPage + 1);
-      });
-    });
-
-    describe('when props.currPage is hitting state.lastpage', () => {
-      beforeEach(() => {
-        props.currPage = 10;
-        const mockElement = React.createElement(MockComponent, props, null);
-        wrapper = shallow(mockElement);
-      });
-
-      it('should always getting page which must eq props.pageStartIndex', () => {
-        const instance = wrapper.instance();
-        expect(instance.goToNextPage()).toEqual(instance.state.lastPage);
-      });
-    });
-  });
-
   describe('calculateFromTo', () => {
     const props = createMockProps();
     beforeEach(() => {
@@ -192,7 +161,7 @@ describe('PageResolver', () => {
   });
 
   describe('calculatePages', () => {
-    describe('calculate by state.totalPages and state.lastPage', () => {
+    describe('calculate by totalPages and lastPage', () => {
       const props = createMockProps();
       beforeEach(() => {
         const mockElement = React.createElement(MockComponent, props, null);
@@ -201,7 +170,7 @@ describe('PageResolver', () => {
 
       it('should getting pages list correctly', () => {
         const instance = wrapper.instance();
-        expect(instance.calculatePages()).toEqual(
+        expect(instance.calculatePages(instance.state.totalPages, instance.state.lastPage)).toEqual(
           [props.prePageText, 1, 2, 3, 4, 5, props.nextPageText, props.lastPageText]);
 
         expect(instance.calculatePages(4, 4)).toEqual(
@@ -218,7 +187,9 @@ describe('PageResolver', () => {
         currPages.forEach((currPage) => {
           props.currPage = currPage + 1;
           wrapper = shallow(<MockComponent { ...props } />);
-          const pageList = wrapper.instance().calculatePages();
+          const instance = wrapper.instance();
+          const pageList = instance.calculatePages(
+            instance.state.totalPages, instance.state.lastPage);
 
           if (props.currPage < 4) {
             expect(pageList).toEqual(
@@ -253,7 +224,9 @@ describe('PageResolver', () => {
         [1, 3, 5, 8, 10].forEach((paginationSize) => {
           props.paginationSize = paginationSize;
           wrapper = shallow(<MockComponent { ...props } />);
-          const pageList = wrapper.instance().calculatePages();
+          const instance = wrapper.instance();
+          const pageList = instance.calculatePages(
+            instance.state.totalPages, instance.state.lastPage);
           const result = pageList.filter(p => indicators.indexOf(p) === -1);
           expect(result.length).toEqual(props.paginationSize);
         });
@@ -267,7 +240,9 @@ describe('PageResolver', () => {
           [1, 2, 3, 4, 5, 6, 7].forEach((currPage) => {
             props.currPage = currPage;
             wrapper = shallow(<MockComponent { ...props } />);
-            const pageList = wrapper.instance().calculatePages();
+            const instance = wrapper.instance();
+            const pageList = instance.calculatePages(
+              instance.state.totalPages, instance.state.lastPage);
             expect(pageList.indexOf(props.lastPageText) > -1).toBeTruthy();
           });
         });
@@ -278,7 +253,9 @@ describe('PageResolver', () => {
           [10, 9, 8, 7, 6, 5, 4].forEach((currPage) => {
             props.currPage = currPage;
             wrapper = shallow(<MockComponent { ...props } />);
-            const pageList = wrapper.instance().calculatePages();
+            const instance = wrapper.instance();
+            const pageList = instance.calculatePages(
+              instance.state.totalPages, instance.state.lastPage);
             expect(pageList.indexOf(props.firstPageText) > -1).toBeTruthy();
           });
         });
@@ -293,7 +270,9 @@ describe('PageResolver', () => {
           props.currPage = currPage + 1;
           props.withFirstAndLast = false;
           wrapper = shallow(<MockComponent { ...props } />);
-          const pageList = wrapper.instance().calculatePages();
+          const instance = wrapper.instance();
+          const pageList = instance.calculatePages(
+            instance.state.totalPages, instance.state.lastPage);
           expect(pageList.indexOf(props.lastPageText) > -1).toBeFalsy();
           expect(pageList.indexOf(props.firstPageText) > -1).toBeFalsy();
         });
@@ -311,7 +290,9 @@ describe('PageResolver', () => {
       });
 
       it('should getting last page correctly', () => {
-        const pageList = wrapper.instance().calculatePages();
+        const instance = wrapper.instance();
+        const pageList = instance.calculatePages(
+          instance.state.totalPages, instance.state.lastPage);
         expect(pageList).toEqual(
           [props.prePageText, -2, -1, 0, 1, 2, props.nextPageText, props.lastPageText]);
       });
@@ -329,7 +310,9 @@ describe('PageResolver', () => {
       });
 
       it('should always having next and previous page indication', () => {
-        const pageList = wrapper.instance().calculatePages();
+        const instance = wrapper.instance();
+        const pageList = instance.calculatePages(
+          instance.state.totalPages, instance.state.lastPage);
         expect(pageList.indexOf(props.nextPageText) > -1).toBeTruthy();
         expect(pageList.indexOf(props.prePageText) > -1).toBeTruthy();
       });
@@ -345,7 +328,10 @@ describe('PageResolver', () => {
       });
 
       it('should getting empty array', () => {
-        expect(wrapper.instance().calculatePages()).toEqual([]);
+        const instance = wrapper.instance();
+        const pageList = instance.calculatePages(
+          instance.state.totalPages, instance.state.lastPage);
+        expect(pageList).toEqual([]);
       });
     });
   });
@@ -360,7 +346,9 @@ describe('PageResolver', () => {
         const mockElement = React.createElement(MockComponent, props, null);
         wrapper = shallow(mockElement);
         instance = wrapper.instance();
-        pageStatus = instance.calculatePageStatus(instance.calculatePages());
+        const pageList = instance.calculatePages(
+          instance.state.totalPages, instance.state.lastPage);
+        pageStatus = instance.calculatePageStatus(pageList, instance.state.lastPage);
       });
 
       it('should returning correct format for page status', () => {
@@ -388,8 +376,9 @@ describe('PageResolver', () => {
           const mockElement = React.createElement(MockComponent, props, null);
           wrapper = shallow(mockElement);
           instance = wrapper.instance();
-          const pageList = instance.calculatePages();
-          pageStatus = instance.calculatePageStatus(pageList);
+          const pageList = instance.calculatePages(
+            instance.state.totalPages, instance.state.lastPage);
+          pageStatus = instance.calculatePageStatus(pageList, instance.state.lastPage);
 
           expect(pageStatus.find(p => p.page === props.prePageText)).not.toBeDefined();
         });
@@ -401,8 +390,9 @@ describe('PageResolver', () => {
           const mockElement = React.createElement(MockComponent, props, null);
           wrapper = shallow(mockElement);
           instance = wrapper.instance();
-          const pageList = instance.calculatePages();
-          pageStatus = instance.calculatePageStatus(pageList);
+          const pageList = instance.calculatePages(
+            instance.state.totalPages, instance.state.lastPage);
+          pageStatus = instance.calculatePageStatus(pageList, instance.state.lastPage);
 
           expect(pageStatus.find(p => p.page === props.nextPageText)).not.toBeDefined();
         });

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

@@ -46,29 +46,15 @@ describe('Page Functions', () => {
     const pageStartIndex = 1;
     const sizePerPage = 10;
     const page = 3;
-    describe('if the page does not fit the pages interval calculated from the length of store.data', () => {
-      beforeEach(() => {
-        data = [];
-        for (let i = 0; i < 15; i += 1) {
-          data.push({ id: i, name: `test_name${i}` });
-        }
-      });
-
+    describe('if the page does not fit the pages which calculated from the length of data', () => {
       it('should return pageStartIndex argument', () => {
-        expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
+        expect(alignPage(15, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
       });
     });
 
     describe('if the length of store.data is large than the end page index', () => {
-      beforeEach(() => {
-        data = [];
-        for (let i = 0; i < 30; i += 1) {
-          data.push({ id: i, name: `test_name${i}` });
-        }
-      });
-
       it('should return current page', () => {
-        expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(page);
+        expect(alignPage(30, page, sizePerPage, pageStartIndex)).toEqual(page);
       });
     });
   });

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+
+import paginationHandler from '../src/pagination-handler';
+
+const MockComponent = () => null;
+const MockComponentWithPaginationHandler = paginationHandler(MockComponent);
+
+describe('paginationHandler', () => {
+  let wrapper;
+  let instance;
+
+  const createMockProps = props => ({
+    dataSize: 100,
+    sizePerPageList: [10, 20, 30, 50],
+    currPage: 1,
+    currSizePerPage: 10,
+    pageStartIndex: 1,
+    paginationSize: 5,
+    withFirstAndLast: true,
+    firstPageText: '<<',
+    prePageText: '<',
+    nextPageText: '>',
+    lastPageText: '>>',
+    alwaysShowAllBtns: false,
+    onPageChange: sinon.stub(),
+    onSizePerPageChange: sinon.stub(),
+    hidePageListOnlyOnePage: false,
+    hideSizePerPage: false,
+    ...props
+  });
+
+  describe('default pagiantion', () => {
+    const props = createMockProps();
+
+    beforeEach(() => {
+      wrapper = shallow(<MockComponentWithPaginationHandler { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should having correct state', () => {
+      expect(instance.state).toBeDefined();
+      expect(instance.state.totalPages).toEqual(instance.calculateTotalPage());
+      expect(instance.state.lastPage).toEqual(
+        instance.calculateLastPage(instance.state.totalPages));
+    });
+
+    it('should rendering PaginationList component successfully', () => {
+      const wrapperedComponent = wrapper.find(MockComponent);
+      expect(wrapperedComponent.length).toBe(1);
+      expect(wrapperedComponent.props().lastPage).toEqual(instance.state.lastPage);
+      expect(wrapperedComponent.props().totalPages).toEqual(instance.state.totalPages);
+      expect(wrapperedComponent.props().onPageChange).toEqual(instance.handleChangePage);
+      expect(wrapperedComponent.props().onSizePerPageChange)
+        .toEqual(instance.handleChangeSizePerPage);
+    });
+  });
+
+  describe('handleChangePage', () => {
+    const props = createMockProps();
+
+    beforeEach(() => {
+      props.currPage = 6;
+      wrapper = shallow(<MockComponentWithPaginationHandler { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    afterEach(() => {
+      props.onPageChange.reset();
+    });
+
+    it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => {
+      instance.handleChangePage(props.prePageText);
+      expect(props.onPageChange.callCount).toBe(1);
+      expect(props.onPageChange.calledWith(5)).toBeTruthy();
+    });
+
+    it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => {
+      instance.handleChangePage(props.nextPageText);
+      expect(props.onPageChange.callCount).toBe(1);
+      expect(props.onPageChange.calledWith(7)).toBeTruthy();
+    });
+
+    it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => {
+      instance.handleChangePage(props.lastPageText);
+      expect(props.onPageChange.callCount).toBe(1);
+      expect(props.onPageChange.calledWith(10)).toBeTruthy();
+    });
+
+    it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => {
+      instance.handleChangePage(props.firstPageText);
+      expect(props.onPageChange.callCount).toBe(1);
+      expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy();
+    });
+
+    it('should calling props.onPageChange correctly when new page is a numeric page', () => {
+      const newPage = '8';
+      instance.handleChangePage(newPage);
+      expect(props.onPageChange.callCount).toBe(1);
+      expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy();
+    });
+
+    it('should not calling props.onPageChange correctly when page is not changed', () => {
+      const newPage = props.currPage;
+      instance.handleChangePage(newPage);
+      expect(props.onPageChange.callCount).toBe(0);
+    });
+  });
+
+  describe('handleChangeSizePerPage', () => {
+    const props = createMockProps();
+
+    beforeEach(() => {
+      wrapper = shallow(<MockComponentWithPaginationHandler { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should always setting state.dropdownOpen to false', () => {
+      instance.handleChangeSizePerPage(10);
+      expect(instance.state.dropdownOpen).toBeFalsy();
+    });
+
+    describe('when new sizePerPage is same as current one', () => {
+      it('should not calling props.onSizePerPageChange callback', () => {
+        instance.handleChangeSizePerPage(10);
+        expect(props.onSizePerPageChange.callCount).toBe(0);
+      });
+    });
+
+    describe('when new sizePerPage is diff than current one', () => {
+      it('should not calling props.onSizePerPageChange callback', () => {
+        instance.handleChangeSizePerPage(30);
+        expect(props.onSizePerPageChange.callCount).toBe(1);
+      });
+
+      describe('and new current page is still in the new lagination list', () => {
+        it('should calling props.onSizePerPageChange with correct argument', () => {
+          expect(props.onSizePerPageChange.calledWith(30, props.currPage));
+        });
+      });
+
+      describe('and new current page is still in the new lagination list', () => {
+        beforeEach(() => {
+          wrapper = shallow(
+            <MockComponentWithPaginationHandler { ...createMockProps({ currPage: 10 }) } />);
+          instance = wrapper.instance();
+        });
+
+        it('should calling props.onSizePerPageChange with correct argument', () => {
+          expect(props.onSizePerPageChange.calledWith(30, 4));
+        });
+      });
+    });
+  });
+
+  describe('componentWillReceiveProps', () => {
+    describe('when next props.currSizePerPage is diff than current one', () => {
+      const nextProps = createMockProps({ currSizePerPage: 20 });
+
+      beforeEach(() => {
+        wrapper = shallow(<MockComponentWithPaginationHandler { ...createMockProps() } />);
+        instance = wrapper.instance();
+      });
+
+      it('should setting correct state.totalPages', () => {
+        instance.componentWillReceiveProps(nextProps);
+        expect(instance.state.totalPages).toEqual(
+          instance.calculateTotalPage(nextProps.currSizePerPage));
+      });
+
+      it('should setting correct state.lastPage', () => {
+        instance.componentWillReceiveProps(nextProps);
+        const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
+        expect(instance.state.lastPage).toEqual(
+          instance.calculateLastPage(totalPages));
+      });
+    });
+
+    describe('when next props.dataSize is diff than current one', () => {
+      const nextProps = createMockProps({ dataSize: 33 });
+
+      beforeEach(() => {
+        wrapper = shallow(<MockComponentWithPaginationHandler { ...createMockProps() } />);
+        instance = wrapper.instance();
+      });
+
+      it('should setting correct state.totalPages', () => {
+        instance.componentWillReceiveProps(nextProps);
+        expect(instance.state.totalPages).toEqual(
+          instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
+      });
+
+      it('should setting correct state.lastPage', () => {
+        instance.componentWillReceiveProps(nextProps);
+        const totalPages = instance.calculateTotalPage(
+          nextProps.currSizePerPage, nextProps.dataSize);
+        expect(instance.state.lastPage).toEqual(
+          instance.calculateLastPage(totalPages));
+      });
+    });
+  });
+});

packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import paginationListAdapter from '../src/pagination-list-adapter';
+
+
+const MockComponent = () => null;
+
+const PaginationListAdapter = paginationListAdapter(MockComponent);
+describe('paginationListAdapter', () => {
+  let wrapper;
+
+  const props = {
+    totalPages: 10,
+    lastPage: 10,
+    pageButtonRenderer: jest.fn(),
+    onPageChange: jest.fn()
+  };
+
+  describe('render', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PaginationListAdapter { ...props } />);
+    });
+
+    it('should render successfully', () => {
+      const mockComponent = wrapper.find(MockComponent);
+      expect(mockComponent).toHaveLength(1);
+      expect(mockComponent.props().pages).toBeDefined();
+      expect(mockComponent.props().pageButtonRenderer).toBeDefined();
+      expect(mockComponent.props().onPageChange).toBeDefined();
+    });
+  });
+});

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

@@ -39,4 +39,22 @@ describe('PaginationList', () => {
     expect(wrapper.find('ul.react-bootstrap-table-page-btns-ul').length).toBe(1);
     expect(wrapper.find(PageButton).length).toBe(pages.length);
   });
+
+  describe('when props.pageButtonRenderer is existing', () => {
+    const pageButtonRenderer = jest.fn().mockReturnValue(null);
+    beforeEach(() => {
+      wrapper = shallow(
+        <PaginationList
+          pages={ pages }
+          onPageChange={ onPageChange }
+          pageButtonRenderer={ pageButtonRenderer }
+        />
+      );
+    });
+
+    it('should call props.pageButtonRenderer correctly', () => {
+      expect(wrapper.length).toBe(1);
+      expect(pageButtonRenderer).toHaveBeenCalledTimes(pages.length);
+    });
+  });
 });

packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import paginationTotalAdapter from '../src/pagination-total-adapter';
+
+
+const MockComponent = () => null;
+
+const PaginationTotalAdapter = paginationTotalAdapter(MockComponent);
+
+describe('paginationTotalAdapter', () => {
+  let wrapper;
+
+  const props = {
+    dataSize: 20,
+    currPage: 1,
+    currSizePerPage: 10,
+    paginationTotalRenderer: jest.fn()
+  };
+
+  describe('render', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PaginationTotalAdapter { ...props } />);
+    });
+
+    it('should render successfully', () => {
+      const mockComponent = wrapper.find(MockComponent);
+      expect(mockComponent).toHaveLength(1);
+      expect(mockComponent.props().from).toBeDefined();
+      expect(mockComponent.props().to).toBeDefined();
+      expect(mockComponent.props().dataSize).toEqual(props.dataSize);
+      expect(mockComponent.props().paginationTotalRenderer).toEqual(props.paginationTotalRenderer);
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { shallow, render } from 'enzyme';
 
 import SizePerPageDropDown from '../src/size-per-page-dropdown';
 import PaginationList from '../src/pagination-list';
@@ -40,7 +40,7 @@ describe('Pagination', () => {
 
     it('should rendering correctly', () => {
       expect(wrapper.length).toBe(1);
-      expect(wrapper.hasClass('react-bootstrap-table-pagination')).toBeTruthy();
+      expect(wrapper.dive().hasClass('react-bootstrap-table-pagination')).toBeTruthy();
       expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(0);
     });
 
@@ -51,50 +51,6 @@ describe('Pagination', () => {
         instance.calculateLastPage(instance.state.totalPages));
       expect(instance.state.dropdownOpen).toBeFalsy();
     });
-
-    it('should rendering PaginationList component successfully', () => {
-      const paginationList = wrapper.find(PaginationList);
-      expect(paginationList.length).toBe(1);
-      expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(instance.calculatePages()));
-      expect(paginationList.prop('onPageChange')).toEqual(instance.handleChangePage);
-    });
-
-    it('should rendering SizePerPageDropDown component successfully', () => {
-      const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
-      expect(sizePerPageDropDown.length).toBe(1);
-
-      expect(sizePerPageDropDown.prop('currSizePerPage')).toEqual(`${props.currSizePerPage}`);
-      expect(sizePerPageDropDown.prop('options')).toEqual(instance.calculateSizePerPageStatus());
-      expect(sizePerPageDropDown.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
-      expect(sizePerPageDropDown.prop('onClick')).toEqual(instance.toggleDropDown);
-      expect(sizePerPageDropDown.prop('open')).toEqual(instance.state.dropdownOpen);
-    });
-  });
-
-  describe('when props.sizePerPageList is empty array', () => {
-    beforeEach(() => {
-      const props = createMockProps({ sizePerPageList: [] });
-      wrapper = shallow(<Pagination { ...props } />);
-      instance = wrapper.instance();
-    });
-
-    it('should not rendering SizePerPageDropDown component', () => {
-      const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
-      expect(sizePerPageDropDown.length).toBe(0);
-    });
-  });
-
-  describe('when props.hideSizePerPage is true', () => {
-    beforeEach(() => {
-      const props = createMockProps({ hideSizePerPage: true });
-      wrapper = shallow(<Pagination { ...props } />);
-      instance = wrapper.instance();
-    });
-
-    it('should not rendering SizePerPageDropDown component', () => {
-      const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
-      expect(sizePerPageDropDown.length).toBe(0);
-    });
   });
 
   describe('when props.hidePageListOnlyOnePage is true', () => {
@@ -105,184 +61,74 @@ describe('Pagination', () => {
     });
 
     it('should find react-bootstrap-table-pagination-list-hidden class when only one page', () => {
-      expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1);
+      expect(wrapper.dive().find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1);
     });
   });
 
-  describe('componentWillReceiveProps', () => {
-    describe('when next props.currSizePerPage is diff than current one', () => {
-      const nextProps = createMockProps({ currSizePerPage: 20 });
+  describe('when props.pageListRenderer is defined', () => {
+    let pageListRenderer;
+    beforeEach(() => {
+      pageListRenderer = jest.fn().mockReturnValue(null);
+      const props = createMockProps({ pageListRenderer });
+      wrapper = shallow(<Pagination { ...props } />);
+      wrapper.render();
+      instance = wrapper.instance();
+    });
+
+    it('should not render PaginationList', () => {
+      expect(wrapper.dive().find(PaginationList)).toHaveLength(0);
+    });
+
+    it('should call props.pageListRenderer correctly', () => {
+      expect(pageListRenderer).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when props.sizePerPageRenderer is defined', () => {
+    let sizePerPageRenderer;
+    beforeEach(() => {
+      sizePerPageRenderer = jest.fn().mockReturnValue(null);
+      const props = createMockProps({ sizePerPageRenderer });
+      wrapper = shallow(<Pagination { ...props } />);
+      wrapper.render();
+      instance = wrapper.instance();
+    });
+
+    it('should not render SizePerPageDropDown', () => {
+      expect(wrapper.dive().find(SizePerPageDropDown)).toHaveLength(0);
+    });
+
+    it('should call props.sizePerPageRenderer correctly', () => {
+      expect(sizePerPageRenderer).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when props.showTotal is true', () => {
+    beforeEach(() => {
+      const props = createMockProps({ showTotal: true });
+      wrapper = render(<Pagination { ...props } />);
+    });
+
+    it('should render PaginationTotal correctly', () => {
+      expect(wrapper.find('.react-bootstrap-table-pagination-total')).toHaveLength(1);
+    });
+
+    describe('if props.paginationTotalRenderer is defined', () => {
+      let paginationTotalRenderer;
 
       beforeEach(() => {
-        wrapper = shallow(<Pagination { ...createMockProps() } />);
-        instance = wrapper.instance();
+        paginationTotalRenderer = jest.fn(() => <div />);
+        const props = createMockProps({ showTotal: true, paginationTotalRenderer });
+        wrapper = render(<Pagination { ...props } />);
       });
 
-      it('should setting correct state.totalPages', () => {
-        instance.componentWillReceiveProps(nextProps);
-        expect(instance.state.totalPages).toEqual(
-          instance.calculateTotalPage(nextProps.currSizePerPage));
+      it('should not render PaginationTotal', () => {
+        expect(wrapper.find('.react-bootstrap-table-pagination-total')).toHaveLength(0);
       });
 
-      it('should setting correct state.lastPage', () => {
-        instance.componentWillReceiveProps(nextProps);
-        const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
-        expect(instance.state.lastPage).toEqual(
-          instance.calculateLastPage(totalPages));
+      it('should call props.paginationTotalRenderer correctly', () => {
+        expect(paginationTotalRenderer).toHaveBeenCalledTimes(1);
       });
     });
-
-    describe('when next props.dataSize is diff than current one', () => {
-      const nextProps = createMockProps({ dataSize: 33 });
-
-      beforeEach(() => {
-        wrapper = shallow(<Pagination { ...createMockProps() } />);
-        instance = wrapper.instance();
-      });
-
-      it('should setting correct state.totalPages', () => {
-        instance.componentWillReceiveProps(nextProps);
-        expect(instance.state.totalPages).toEqual(
-          instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
-      });
-
-      it('should setting correct state.lastPage', () => {
-        instance.componentWillReceiveProps(nextProps);
-        const totalPages = instance.calculateTotalPage(
-          nextProps.currSizePerPage, nextProps.dataSize);
-        expect(instance.state.lastPage).toEqual(
-          instance.calculateLastPage(totalPages));
-      });
-    });
-  });
-
-  describe('toggleDropDown', () => {
-    beforeEach(() => {
-      const props = createMockProps();
-      wrapper = shallow(<Pagination { ...props } />);
-      instance = wrapper.instance();
-    });
-
-    it('should setting state.dropdownOpen as true when it is false', () => {
-      instance.toggleDropDown();
-      expect(instance.state.dropdownOpen).toBeTruthy();
-    });
-
-    it('should setting state.dropdownOpen as false when it is true', () => {
-      instance.toggleDropDown();
-      instance.toggleDropDown();
-      expect(instance.state.dropdownOpen).toBeFalsy();
-    });
-  });
-
-  describe('closeDropDown', () => {
-    beforeEach(() => {
-      const props = createMockProps();
-      wrapper = shallow(<Pagination { ...props } />);
-      instance = wrapper.instance();
-    });
-
-    it('should always setting state.dropdownOpen as false', () => {
-      instance.closeDropDown();
-      expect(instance.state.dropdownOpen).toBeFalsy();
-      instance.closeDropDown();
-      expect(instance.state.dropdownOpen).toBeFalsy();
-    });
-  });
-
-  describe('handleChangeSizePerPage', () => {
-    const props = createMockProps();
-
-    beforeEach(() => {
-      wrapper = shallow(<Pagination { ...props } />);
-      instance = wrapper.instance();
-    });
-
-    it('should always setting state.dropdownOpen to false', () => {
-      instance.handleChangeSizePerPage(10);
-      expect(instance.state.dropdownOpen).toBeFalsy();
-    });
-
-    describe('when new sizePerPage is same as current one', () => {
-      it('should not calling props.onSizePerPageChange callback', () => {
-        instance.handleChangeSizePerPage(10);
-        expect(props.onSizePerPageChange.callCount).toBe(0);
-      });
-    });
-
-    describe('when new sizePerPage is diff than current one', () => {
-      it('should not calling props.onSizePerPageChange callback', () => {
-        instance.handleChangeSizePerPage(30);
-        expect(props.onSizePerPageChange.callCount).toBe(1);
-      });
-
-      describe('and new current page is still in the new lagination list', () => {
-        it('should calling props.onSizePerPageChange with correct argument', () => {
-          expect(props.onSizePerPageChange.calledWith(30, props.currPage));
-        });
-      });
-
-      describe('and new current page is still in the new lagination list', () => {
-        beforeEach(() => {
-          wrapper = shallow(<Pagination { ...createMockProps({ currPage: 10 }) } />);
-          instance = wrapper.instance();
-        });
-
-        it('should calling props.onSizePerPageChange with correct argument', () => {
-          expect(props.onSizePerPageChange.calledWith(30, 4));
-        });
-      });
-    });
-  });
-
-  describe('handleChangePage', () => {
-    const props = createMockProps();
-
-    beforeEach(() => {
-      props.currPage = 6;
-      wrapper = shallow(<Pagination { ...props } />);
-      instance = wrapper.instance();
-    });
-
-    afterEach(() => {
-      props.onPageChange.reset();
-    });
-
-    it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => {
-      instance.handleChangePage(props.prePageText);
-      expect(props.onPageChange.callCount).toBe(1);
-      expect(props.onPageChange.calledWith(5)).toBeTruthy();
-    });
-
-    it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => {
-      instance.handleChangePage(props.nextPageText);
-      expect(props.onPageChange.callCount).toBe(1);
-      expect(props.onPageChange.calledWith(7)).toBeTruthy();
-    });
-
-    it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => {
-      instance.handleChangePage(props.lastPageText);
-      expect(props.onPageChange.callCount).toBe(1);
-      expect(props.onPageChange.calledWith(10)).toBeTruthy();
-    });
-
-    it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => {
-      instance.handleChangePage(props.firstPageText);
-      expect(props.onPageChange.callCount).toBe(1);
-      expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy();
-    });
-
-    it('should calling props.onPageChange correctly when new page is a numeric page', () => {
-      const newPage = '8';
-      instance.handleChangePage(newPage);
-      expect(props.onPageChange.callCount).toBe(1);
-      expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy();
-    });
-
-    it('should not calling props.onPageChange correctly when page is not changed', () => {
-      const newPage = props.currPage;
-      instance.handleChangePage(newPage);
-      expect(props.onPageChange.callCount).toBe(0);
-    });
   });
 });

packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown-adapter.test.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import sizePerPageDropdownAdapter from '../src/size-per-page-dropdown-adapter';
+
+
+const MockComponent = () => null;
+
+const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(MockComponent);
+describe('sizePerPageDropdownAdapter', () => {
+  let wrapper;
+  let instance;
+
+  const createMockProps = props => ({
+    dataSize: 100,
+    sizePerPageList: [10, 20, 30, 50],
+    currPage: 1,
+    currSizePerPage: 10,
+    alwaysShowAllBtns: false,
+    onSizePerPageChange: jest.fn(),
+    hidePageListOnlyOnePage: false,
+    hideSizePerPage: false,
+    optionRenderer: jest.fn(),
+    sizePerPageOptionRenderer: jest.fn(),
+    ...props
+  });
+
+  describe('render', () => {
+    const props = createMockProps();
+    beforeEach(() => {
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should render successfully', () => {
+      const mockComponent = wrapper.find(MockComponent);
+      expect(mockComponent).toHaveLength(1);
+
+      expect(mockComponent.props().currSizePerPage).toEqual(`${props.currSizePerPage}`);
+      expect(mockComponent.props().options).toBeDefined();
+      expect(mockComponent.props().optionRenderer).toBeDefined();
+      expect(mockComponent.props().onSizePerPageChange).toEqual(instance.handleChangeSizePerPage);
+      expect(mockComponent.props().onClick).toEqual(instance.toggleDropDown);
+      expect(mockComponent.props().onBlur).toEqual(instance.closeDropDown);
+      expect(mockComponent.props().open).toEqual(instance.state.dropdownOpen);
+    });
+  });
+
+  describe('when props.sizePerPageList is empty array', () => {
+    beforeEach(() => {
+      const props = createMockProps({ sizePerPageList: [] });
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should not render component', () => {
+      const sizePerPageDropDown = wrapper.find(MockComponent);
+      expect(sizePerPageDropDown.length).toBe(0);
+    });
+  });
+
+  describe('when props.hideSizePerPage is true', () => {
+    beforeEach(() => {
+      const props = createMockProps({ hideSizePerPage: true });
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should not rendering SizePerPageDropDown component', () => {
+      const sizePerPageDropDown = wrapper.find(MockComponent);
+      expect(sizePerPageDropDown.length).toBe(0);
+    });
+  });
+
+  describe('toggleDropDown', () => {
+    beforeEach(() => {
+      const props = createMockProps();
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should set state.dropdownOpen as true when it is false', () => {
+      instance.toggleDropDown();
+      expect(instance.state.dropdownOpen).toBeTruthy();
+    });
+
+    it('should set state.dropdownOpen as false when it is true', () => {
+      instance.toggleDropDown();
+      instance.toggleDropDown();
+      expect(instance.state.dropdownOpen).toBeFalsy();
+    });
+  });
+
+  describe('closeDropDown', () => {
+    beforeEach(() => {
+      const props = createMockProps();
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should always set state.dropdownOpen as false', () => {
+      instance.closeDropDown();
+      expect(instance.state.dropdownOpen).toBeFalsy();
+      instance.closeDropDown();
+      expect(instance.state.dropdownOpen).toBeFalsy();
+    });
+  });
+
+  describe('handleChangeSizePerPage', () => {
+    let props;
+    const sizePerPage = 25;
+    beforeEach(() => {
+      props = createMockProps();
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+      instance.handleChangeSizePerPage(sizePerPage);
+    });
+
+    it('should call props.onSizePerPageChange correctly', () => {
+      expect(props.onSizePerPageChange).toHaveBeenCalledTimes(1);
+      expect(props.onSizePerPageChange).toHaveBeenCalledWith(sizePerPage);
+    });
+
+    it('should always set state.dropdownOpen as false', () => {
+      expect(instance.state.dropdownOpen).toBeFalsy();
+    });
+  });
+
+  describe('when props.sizePerPageRenderer is defined', () => {
+    const sizePerPageRenderer = jest.fn().mockReturnValue(null);
+
+    beforeEach(() => {
+      sizePerPageRenderer.mockClear();
+      const props = createMockProps({ sizePerPageRenderer });
+      wrapper = shallow(<SizePerPageDropdownAdapter { ...props } />);
+      instance = wrapper.instance();
+    });
+
+    it('should not render default component', () => {
+      expect(wrapper.find(MockComponent)).toHaveLength(0);
+    });
+
+    it('should call props.sizePerPageRenderer correctly', () => {
+      expect(sizePerPageRenderer).toHaveBeenCalledTimes(1);
+    });
+  });
+});

packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js

@@ -178,4 +178,23 @@ describe('SizePerPageDropDown', () => {
       expect(wrapper.hasClass(className)).toBeTruthy();
     });
   });
+
+  describe('when optionRenderer prop is defined', () => {
+    const optionRenderer = jest.fn();
+    beforeEach(() => {
+      optionRenderer.mockReset();
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } optionRenderer={ optionRenderer } />,
+        { bootstrap4: false }
+      );
+    });
+
+    it('should not render SizePerPageOption', () => {
+      expect(wrapper.find(SizePerPageOption)).toHaveLength(0);
+    });
+
+    it('should call optionRenderer prop correctly', () => {
+      expect(optionRenderer).toHaveBeenCalledTimes(props.options.length);
+    });
+  });
 });

packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import standaloneAdapter from '../src/standalone-adapter';
+
+
+const MockStandalone = () => null;
+
+const MockStandaloneWithAdapter = standaloneAdapter(MockStandalone);
+describe('standaloneAdapter', () => {
+  let wrapper;
+
+  const props = {
+    page: 2,
+    sizePerPage: 10,
+    name1: 'A',
+    name2: 'B'
+  };
+  describe('render', () => {
+    beforeEach(() => {
+      wrapper = shallow(<MockStandaloneWithAdapter { ...props } />);
+    });
+
+    it('should render successfully', () => {
+      expect(wrapper.find(MockStandalone)).toHaveLength(1);
+    });
+
+    it('should convert props.page as currPage to child component', () => {
+      const mockStandalone = wrapper.find(MockStandalone);
+      expect(mockStandalone.props().currPage).toEqual(props.page);
+    });
+
+    it('should convert props.sizePerPage as currSizePerPage to child component', () => {
+      const mockStandalone = wrapper.find(MockStandalone);
+      expect(mockStandalone.props().currSizePerPage).toEqual(props.sizePerPage);
+    });
+
+    it('should just pass remain props to child component', () => {
+      const mockStandalone = wrapper.find(MockStandalone);
+      const { page, sizePerPage, ...origin } = props;
+      const { currPage, currSizePerPage, ...rest } = mockStandalone.props();
+      expect(rest).toEqual(origin);
+    });
+  });
+});

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

@@ -0,0 +1,895 @@
+/* eslint no-param-reassign: 0 */
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Const from '../src/const';
+import createStateContext from '../src/state-context';
+import paginationFactory from '../index';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    id: i,
+    name: `itme name ${i}`
+  });
+}
+
+describe('PaginationStateContext', () => {
+  let wrapper;
+  let remoteEmitter;
+  let PaginationStateContext;
+
+  const defaultPagination = { options: {}, createContext: jest.fn() };
+
+  const MockComponent = () => null;
+  const renderMockComponent = jest.fn((props => (
+    <MockComponent { ...props } />
+  )));
+
+  const handleRemotePaginationChange = jest.fn();
+
+  function shallowContext(
+    customPagination = defaultPagination
+  ) {
+    const additionProps = {};
+    renderMockComponent.mockReset();
+    handleRemotePaginationChange.mockReset();
+    PaginationStateContext = createStateContext();
+
+    return (
+      <PaginationStateContext.Provider
+        pagination={ paginationFactory(customPagination) }
+        data={ data }
+        { ...additionProps }
+      >
+        <PaginationStateContext.Consumer>
+          {
+            paginationProps => renderMockComponent(paginationProps)
+          }
+        </PaginationStateContext.Consumer>
+      </PaginationStateContext.Provider>
+    );
+  }
+
+  function setRemotePaginationEmitter(
+    instance,
+    remoteEnabled = false
+  ) {
+    remoteEmitter = { emit: jest.fn() };
+    if (remoteEnabled) {
+      remoteEmitter.emit = jest.fn().mockImplementation((evtName, d = {}) => {
+        if (evtName === 'isRemotePagination') {
+          d.result = remoteEnabled;
+        }
+      });
+    }
+    instance.setPaginationRemoteEmitter(remoteEmitter);
+  }
+
+  describe('default render', () => {
+    const options = { totalSize: data.length };
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext(options));
+      wrapper.render();
+    });
+
+    it('should have correct Provider property after calling createPaginationStateContext', () => {
+      expect(PaginationStateContext.Provider).toBeDefined();
+    });
+
+    it('should have correct Consumer property after calling createPaginationStateContext', () => {
+      expect(PaginationStateContext.Consumer).toBeDefined();
+    });
+
+    it('should have correct currPage', () => {
+      expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
+    });
+
+    it('should have correct currSizePerPage', () => {
+      expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
+    });
+
+    it('should have correct dataSize', () => {
+      expect(wrapper.instance().dataSize).toEqual(options.totalSize);
+    });
+
+    it('should get correct pagination props', () => {
+      const instance = wrapper.instance();
+      expect(wrapper.length).toBe(1);
+      expect(renderMockComponent).toHaveBeenCalledTimes(1);
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+
+    it('should return correct pagination states from getPaginationProps function', () => {
+      const instance = wrapper.instance();
+      const paginationProps = instance.getPaginationProps();
+
+      expect(paginationProps.dataSize).toEqual(data.length);
+      expect(paginationProps.page).toEqual(instance.currPage);
+      expect(paginationProps.sizePerPage).toEqual(instance.currSizePerPage);
+      expect(paginationProps.onPageChange).toEqual(instance.handleChangePage);
+      expect(paginationProps.onSizePerPageChange).toEqual(instance.handleChangeSizePerPage);
+      expect(paginationProps.sizePerPageList).toEqual(Const.SIZE_PER_PAGE_LIST);
+      expect(paginationProps.paginationSize).toEqual(Const.PAGINATION_SIZE);
+      expect(paginationProps.showTotal).toEqual(options.showTotal);
+      expect(paginationProps.hidePageListOnlyOnePage).toEqual(Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE);
+      expect(paginationProps.pageStartIndex).toEqual(Const.PAGE_START_INDEX);
+      expect(paginationProps.withFirstAndLast).toEqual(Const.With_FIRST_AND_LAST);
+      expect(paginationProps.alwaysShowAllBtns).toEqual(Const.SHOW_ALL_PAGE_BTNS);
+      expect(paginationProps.firstPageText).toEqual(Const.FIRST_PAGE_TEXT);
+      expect(paginationProps.prePageText).toEqual(Const.PRE_PAGE_TEXT);
+      expect(paginationProps.nextPageText).toEqual(Const.NEXT_PAGE_TEXT);
+      expect(paginationProps.lastPageText).toEqual(Const.LAST_PAGE_TEXT);
+      expect(paginationProps.firstPageTitle).toEqual(Const.FIRST_PAGE_TITLE);
+      expect(paginationProps.prePageTitle).toEqual(Const.PRE_PAGE_TITLE);
+      expect(paginationProps.nextPageTitle).toEqual(Const.NEXT_PAGE_TITLE);
+      expect(paginationProps.lastPageTitle).toEqual(Const.LAST_PAGE_TITLE);
+      expect(paginationProps.hideSizePerPage).toEqual(Const.HIDE_SIZE_PER_PAGE);
+      expect(paginationProps.paginationTotalRenderer).toEqual(options.paginationTotalRenderer);
+    });
+  });
+
+  describe('compoientWillReceiveProps', () => {
+    let instance;
+    let nextProps;
+
+    describe('if remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination
+        }, true));
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance, true);
+        nextProps = {
+          data,
+          pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, totalSize: 50 } }
+        };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should always reset currPage and currSizePerPage', () => {
+        expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+        expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+        expect(instance.dataSize).toEqual(nextProps.pagination.options.totalSize);
+      });
+    });
+
+    describe('if options.custom is true', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          custom: true
+        }, true));
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance, true);
+        nextProps = {
+          data,
+          pagination: {
+            ...defaultPagination,
+            options: { page: 3, sizePerPage: 5, custom: true, totalSize: 50 }
+          }
+        };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should always reset currPage and currSizePerPage', () => {
+        expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+        expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+        expect(instance.dataSize).toEqual(nextProps.pagination.options.totalSize);
+      });
+    });
+  });
+
+  describe('handleDataSizeChange', () => {
+    let instance;
+    const newTotalSize = 8;
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        page: 3
+      }));
+      instance = wrapper.instance();
+      setRemotePaginationEmitter(instance);
+      jest.spyOn(instance, 'forceUpdate');
+      instance.handleDataSizeChange(newTotalSize);
+    });
+
+    it('should update dataSize correctly', () => {
+      expect(instance.dataSize).toEqual(newTotalSize);
+      expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+    });
+
+    it('should update currPage correctly if page list shrink', () => {
+      expect(instance.currPage).toEqual(Const.PAGE_START_INDEX);
+      expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('handleChangePage', () => {
+    let instance;
+    const newPage = 3;
+
+    describe('should update component correctly', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance);
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangePage(newPage);
+      });
+
+      it('', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if options.onPageChange is defined', () => {
+      const onPageChange = jest.fn();
+      beforeEach(() => {
+        onPageChange.mockClear();
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          onPageChange
+        }));
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance);
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangePage(newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call options.onPageChange correctly', () => {
+        expect(onPageChange).toHaveBeenCalledTimes(1);
+        expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage);
+      });
+    });
+
+    describe('if remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination
+        }, true));
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance, true);
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangePage(newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
+      });
+
+      it('should emit paginationChange event correctly', () => {
+        expect(remoteEmitter.emit).toHaveBeenLastCalledWith('paginationChange', instance.currPage, instance.currSizePerPage);
+      });
+    });
+  });
+
+  describe('handleChangeSizePerPage', () => {
+    let instance;
+    const newPage = 2;
+    const newSizePerPage = 15;
+
+    describe('should update component correctly', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance);
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.currSizePerPage).toEqual(newSizePerPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if options.onSizePerPageChange is defined', () => {
+      const onSizePerPageChange = jest.fn();
+      beforeEach(() => {
+        onSizePerPageChange.mockClear();
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          onSizePerPageChange
+        }));
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance);
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.currSizePerPage).toEqual(newSizePerPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call options.onSizePerPageChange correctly', () => {
+        expect(onSizePerPageChange).toHaveBeenCalledTimes(1);
+        expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage);
+      });
+    });
+
+    describe('if remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination
+        }, true));
+        instance = wrapper.instance();
+        setRemotePaginationEmitter(instance, true);
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.currSizePerPage).toEqual(newSizePerPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
+      });
+
+      it('should emit paginationChange event correctly', () => {
+        expect(remoteEmitter.emit).toHaveBeenLastCalledWith('paginationChange', instance.currPage, instance.currSizePerPage);
+      });
+    });
+  });
+
+  describe('when options.page is defined', () => {
+    const page = 3;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        page
+      }));
+      wrapper.render();
+    });
+
+    it('should set correct currPage', () => {
+      expect(wrapper.instance().currPage).toEqual(page);
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.sizePerPage is defined', () => {
+    const sizePerPage = Const.SIZE_PER_PAGE_LIST[2];
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        sizePerPage
+      }));
+      wrapper.render();
+    });
+
+    it('should set correct currSizePerPage', () => {
+      expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage);
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.totalSize is defined', () => {
+    const totalSize = 100;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        totalSize
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.showTotal is defined', () => {
+    const showTotal = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        showTotal
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.pageStartIndex is defined', () => {
+    const pageStartIndex = -1;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        pageStartIndex
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.sizePerPageList is defined', () => {
+    const sizePerPageList = [10, 40];
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        sizePerPageList
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.paginationSize is defined', () => {
+    const paginationSize = 10;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        paginationSize
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.withFirstAndLast is defined', () => {
+    const withFirstAndLast = false;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        withFirstAndLast
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.alwaysShowAllBtns is defined', () => {
+    const alwaysShowAllBtns = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        alwaysShowAllBtns
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.firstPageText is defined', () => {
+    const firstPageText = '1st';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        firstPageText
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.prePageText is defined', () => {
+    const prePageText = 'PRE';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        prePageText
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.nextPageText is defined', () => {
+    const nextPageText = 'NEXT';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        nextPageText
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.lastPageText is defined', () => {
+    const lastPageText = 'LAST';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        lastPageText
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.firstPageTitle is defined', () => {
+    const firstPageTitle = '1st';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        firstPageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.prePageTitle is defined', () => {
+    const prePageTitle = 'PRE';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        prePageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.nextPageTitle is defined', () => {
+    const nextPageTitle = 'NEXT';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        nextPageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.lastPageTitle is defined', () => {
+    const lastPageTitle = 'nth';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        lastPageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.hideSizePerPage is defined', () => {
+    const hideSizePerPage = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        hideSizePerPage
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+
+  describe('when options.hidePageListOnlyOnePage is defined', () => {
+    const hidePageListOnlyOnePage = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        hidePageListOnlyOnePage
+      }));
+      wrapper.render();
+    });
+
+    it('should render correctly', () => {
+      const instance = wrapper.instance();
+
+      expect(renderMockComponent).toHaveBeenCalledWith({
+        paginationProps: instance.getPaginationProps(),
+        paginationTableProps: {
+          pagination: {
+            createContext: expect.any(Function),
+            options: instance.getPaginationProps()
+          },
+          setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+          dataChangeListener: expect.any(Object)
+        }
+      });
+    });
+  });
+});

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

@@ -2,9 +2,15 @@
 
 `react-bootstrap-table2` support some additional features in [`react-bootstrap-table2-toolkit`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-toolkit).
 
-In the future, this toolkit will support other feature like row delete, insert etc. Right now we only support Table Search and CSV export.   
+In the future, this toolkit will support other feature like row delete, insert etc. Right now we only following features:
+
+* Table Search
+* Export CSV
+* Column Toggle
 
 **[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
+**[Live Demo For Export CSV](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Export%20CSV&selectedStory=Basic%20Export%20CSV)**
+**[Live Demo For Column Toggle](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Toggle&selectedStory=Basic%20Column%20Toggle)**
 
 **[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
 
@@ -95,8 +101,34 @@ If you want to search on the formatted data, you are supposed to enable this pro
 </ToolkitProvider>
 ```
 
+### Clear Search Button
+We have a built-in clear search function which allow user clear search status via clicking button:
+
+```js
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        ....
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
 ## Export CSV
-There are two step to enable the export CSV functionality:
+There are two steps to enable the export CSV functionality:
 
 1. Give `exportCSV` prop as `true` on `ToolkitProvider`.
 2. Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
@@ -143,3 +175,35 @@ Default is `true`. `false` will only export current data which display on table.
 
 #### onlyExportSelection - [bool]
 Default is `false`. `true` will only export the data which is selected.
+
+## Column Toggle
+
+Let's see how to render the column toggle in your react component:
+
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+> `columnToggleProps` props have enough information to let you custom the toggle list: [demo]([Live Demo For Export CSV](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Export%20CSV&selectedStory=Custom%20Column%20Toggle))
+
+If you want to have default visibility on specified column, you can just give `true` or `false` on `column.hidden`.

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

@@ -1,13 +1,14 @@
+/* eslint no-param-reassign: 0 */
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import statelessDrcorator from './statelessOp';
+import statelessDecorator from './statelessOp';
 
-import createContext from './src/search/context';
+import createSearchContext from './src/search/context';
 
 const ToolkitContext = React.createContext();
 
-class ToolkitProvider extends statelessDrcorator(React.Component) {
+class ToolkitProvider extends statelessDecorator(React.Component) {
   static propTypes = {
     keyField: PropTypes.string.isRequired,
     data: PropTypes.array.isRequired,
@@ -42,12 +43,22 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
 
   constructor(props) {
     super(props);
-    this.state = {
-      searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : ''
-    };
+    const state = {};
     this._ = null;
+    this.onClear = this.onClear.bind(this);
     this.onSearch = this.onSearch.bind(this);
+    this.onColumnToggle = this.onColumnToggle.bind(this);
     this.setDependencyModules = this.setDependencyModules.bind(this);
+
+    if (props.columnToggle) {
+      state.columnToggle = props.columns
+        .reduce((obj, column) => {
+          obj[column.dataField] = !column.hidden;
+          return obj;
+        }, {});
+    }
+    state.searchText = typeof props.search === 'object' ? (props.search.defaultSearch || '') : '';
+    this.state = state;
   }
 
   onSearch(searchText) {
@@ -56,6 +67,18 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     }
   }
 
+  onClear() {
+    this.setState({ searchText: '' });
+  }
+
+  onColumnToggle(dataField) {
+    const { columnToggle } = this.state;
+    columnToggle[dataField] = !columnToggle[dataField];
+    this.setState(({
+      ...this.state,
+      columnToggle
+    }));
+  }
   /**
    * 
    * @param {*} _ 
@@ -79,19 +102,30 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     };
     if (this.props.search) {
       baseProps.search = {
-        searchContext: createContext(this.props.search),
+        searchContext: createSearchContext(this.props.search),
         searchText: this.state.searchText
       };
     }
+    if (this.props.columnToggle) {
+      baseProps.columnToggle = {
+        toggles: this.state.columnToggle
+      };
+    }
     return (
       <ToolkitContext.Provider value={ {
         searchProps: {
           searchText: this.state.searchText,
-          onSearch: this.onSearch
+          onSearch: this.onSearch,
+          onClear: this.onClear
         },
         csvProps: {
           onExport: this.handleExportCSV
         },
+        columnToggleProps: {
+          columns: this.props.columns,
+          toggles: this.state.columnToggle,
+          onColumnToggle: this.onColumnToggle
+        },
         baseProps
       } }
       >

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

@@ -5,3 +5,4 @@ export default ToolkitProvider;
 export const ToolkitContext = Context;
 export { default as Search } from './src/search';
 export { default as CSVExport } from './src/csv';
+export { default as ColumnToggle } from './src/column-toggle';

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

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

packages/react-bootstrap-table2-toolkit/src/column-toggle/index.js

@@ -0,0 +1,3 @@
+import ToggleList from './toggle-list';
+
+export default { ToggleList };

packages/react-bootstrap-table2-toolkit/src/column-toggle/toggle-list.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles,
+  contextual,
+  className,
+  btnClassName
+}) => (
+  <div className={ `btn-group btn-group-toggle ${className}` } data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ `${btnClassName} btn btn-${contextual} ${column.toggle ? 'active' : ''}` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+ToggleList.propTypes = {
+  columns: PropTypes.array.isRequired,
+  toggles: PropTypes.object.isRequired,
+  onColumnToggle: PropTypes.func.isRequired,
+  btnClassName: PropTypes.string,
+  className: PropTypes.string,
+  contextual: PropTypes.string
+};
+
+ToggleList.defaultProps = {
+  btnClassName: '',
+  className: '',
+  contextual: 'primary'
+};
+
+export default ToggleList;

packages/react-bootstrap-table2-toolkit/src/csv/button.js

@@ -5,12 +5,14 @@ const ExportCSVButton = (props) => {
   const {
     onExport,
     children,
+    className,
     ...rest
   } = props;
 
   return (
     <button
       type="button"
+      className={ `react-bs-table-csv-btn btn btn-default ${className}` }
       onClick={ () => onExport() }
       { ...rest }
     >
@@ -26,7 +28,7 @@ ExportCSVButton.propTypes = {
   style: PropTypes.object
 };
 ExportCSVButton.defaultProps = {
-  className: 'react-bs-table-csv-btn btn btn-default',
+  className: '',
   style: {}
 };
 

packages/react-bootstrap-table2-toolkit/src/op/csv.js

@@ -25,13 +25,19 @@ export default Base =>
       let data;
       if (typeof source !== 'undefined') {
         data = source;
+      } else if (options.exportAll) {
+        data = this.props.data;
       } else {
-        data = options.exportAll ? this.props.data : this.getData();
+        const payload = {};
+        this.tableExposedAPIEmitter.emit('get.table.data', payload);
+        data = payload.result;
       }
 
       // filter data
       if (options.onlyExportSelection) {
-        const selections = this.getSelected();
+        const payload = {};
+        this.tableExposedAPIEmitter.emit('get.selected.rows', payload);
+        const selections = payload.result;
         data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
       }
       const content = transform(data, meta, this._.get, options);

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

@@ -26,33 +26,51 @@ const handleDebounce = (func, wait, immediate) => {
   };
 };
 
-const SearchBar = ({
-  delay,
-  onSearch,
-  className,
-  style,
-  placeholder,
-  searchText,
-  ...rest
-}) => {
-  let input;
-  const debounceCallback = handleDebounce(() => {
-    onSearch(input.value);
-  }, delay);
+class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.searchText
+    };
+  }
 
-  return (
-    <input
-      ref={ n => input = n }
-      type="text"
-      style={ style }
-      onKeyUp={ () => debounceCallback() }
-      className={ `form-control ${className}` }
-      defaultValue={ searchText }
-      placeholder={ placeholder || SearchBar.defaultProps.placeholder }
-      { ...rest }
-    />
-  );
-};
+  componentWillReceiveProps(nextProps) {
+    this.setState({ value: nextProps.searchText });
+  }
+
+  onChangeValue = (e) => {
+    this.setState({ value: e.target.value });
+  }
+
+  onKeyup = () => {
+    const { delay, onSearch } = this.props;
+    const debounceCallback = handleDebounce(() => {
+      onSearch(this.input.value);
+    }, delay);
+    debounceCallback();
+  }
+
+  render() {
+    const {
+      className,
+      style,
+      placeholder
+    } = this.props;
+
+    return (
+      <input
+        ref={ n => this.input = n }
+        type="text"
+        style={ style }
+        onKeyUp={ () => this.onKeyup() }
+        onChange={ this.onChangeValue }
+        className={ `form-control ${className}` }
+        value={ this.state.value }
+        placeholder={ placeholder || SearchBar.defaultProps.placeholder }
+      />
+    );
+  }
+}
 
 SearchBar.propTypes = {
   onSearch: PropTypes.func.isRequired,

packages/react-bootstrap-table2-toolkit/src/search/clear-button.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ClearButton = ({
+  onClear,
+  text,
+  className
+}) => (
+  <button className={ `btn btn-default ${className}` } onClick={ onClear }>{ text }</button>
+);
+
+ClearButton.propTypes = {
+  onClear: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  text: PropTypes.string
+};
+
+ClearButton.defaultProps = {
+  text: 'Clear',
+  className: ''
+};
+
+export default ClearButton;