temp fix

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

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

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

README.md

@@ -1,52 +1,43 @@
 # react-bootstrap-table2
-
 [![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
-Rebuild of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
-> Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
+> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it   
 
-`react-bootstrap-table2` separates some functionalities from its core modules to other modules as listed in the following:
+`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
 
-- [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+* [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
-- [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
-- [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
-- [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
-- [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
-- [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
 
-Not only does this reduce the bundle size of your apps but also helps us have a cleaner design to avoid handling too much logic in the kernel module(SRP).
+This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
 
 ## Migration
-
+If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).
-If you are coming from the legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please check out the [migration guide](./docs/migration.md).
 
 ## Usage
-
 See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
 
 ## Online Demo
-
 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 [development guide](./docs/development.md).
 
-Please check the [development guide](./docs/development.md).
+## How should I run storybook example in my local?
-
-## Running storybook example on your local machine
 
 ```sh
-# Clone the repo
 $ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
-
-# change dir to the cloned repo
 $ cd react-bootstrap-table2
-
-# Install all dependencies with yarn
 $ yarn install
-
-# Start the stroybook server, then go to localhost:6006
 $ yarn storybook
-
+$ Go to localhost:6006
 ```
 
-**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**
+**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**

docs/README.md

@@ -17,7 +17,6 @@
 * [hover](#hover)
 * [condensed](#condensed)
 * [id](#id)
-* [tabIndexCell](#tabIndexCell)
 * [classes](#classes)
 * [wrapperClasses](#wrapperClasses)
 * [headerClasses](#headerClasses)
@@ -27,14 +26,11 @@
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
-* [hiddenRows](#hiddenRows)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
-* [filterPosition](filterPosition)
 * [onTableChange](#onTableChange)
-* [onDataSizeChange](#onDataSizeChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
 Tells `react-bootstrap-table2` which column is unique.
@@ -99,14 +95,7 @@ import overlayFactory from 'react-bootstrap-table2-overlay';
 Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
 
 ```js
-overlay={
+overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
-  overlayFactory({
-    spinner: true,
-    styles: {
-      overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'})
-    }
-  })
-}
 ```
 
 ### <a name='caption'>caption - [String | Node]</a>
@@ -123,10 +112,6 @@ Same as bootstrap `.table-condensed` class for making a table more compact by cu
 
 ### <a name='id'>id - [String]</a>
 Customize id on `table` element.
-
-### <a name='tabIndexCell'>tabIndexCell - [Bool]</a>
-Enable the `tabIndex` attribute on `<td>` element.
-
 ### <a name='classes'>classes - [String]</a>
 Customize class on `table` element.
 
@@ -191,14 +176,6 @@ 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.
 
@@ -209,8 +186,6 @@ const defaultSorted = [{
 }];
 ```
 
-**Note**: Only the first column is sorted currently, see #1083.
-
 ### <a name='defaultSortDirection'>defaultSortDirection - [String]</a>
 Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
 
@@ -328,23 +303,4 @@ Following is a shape of `newState`
     newValue
   }
 }
-```
+```
-
-### <a name='filterPosition'>filterPosition - [String]</a>
-Available value is `inline`, `top` and `bottom`, default is `inline`. This prop decide where `react-bootstrap-table` render column filter.
-
-### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
-This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
-
-* `dataSize`: The new data size
-
-```js
-handleDataChange = ({ dataSize }) => {
-  this.setState({ rowCount: dataSize });
-}
-
-<BootstrapTable
-  onDataSizeChange={ handleDataChange }
-  ....
-/>
-```

docs/cell-edit.md

@@ -10,7 +10,6 @@ $ npm install react-bootstrap-table2-editor --save
 * [blurToSave](#blurToSave)
 * [nonEditableRows](#nonEditableRows)
 * [timeToCloseMessage](#timeToCloseMessage)
-* [autoSelectText](#autoSelectText)
 * [beforeSaveCell](#beforeSaveCell)
 * [afterSaveCell](#afterSaveCell)
 * [errorMessage](#errorMessage)
@@ -44,11 +43,6 @@ Default is `false`, enable it will be able to save the cell automatically when b
 ### <a name='nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
 `cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
 
-### <a name='autoSelectText'>cellEdit.autoSelectText - [Bool]</a>
-Default is false, when enable it, `react-bootstrap-table2` will help you to select the text in the text input automatically when editing.
-
-> NOTE: This props only work for `text` and `textarea`.
-
 ### <a name='timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
 If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
 
@@ -62,24 +56,6 @@ const cellEdit = {
 }
 ```
 
-If you want to perform a async `beforeSaveCell`, you can do it like that:
-
-```js
-const cellEdit: {
-  // omit...
-  beforeSaveCell(oldValue, newValue, row, column, done) {
-    setTimeout(() => {
-      if (confirm('Do you want to accept this change?')) {
-        done(); // contine to save the changes
-      } else {
-        done(false); // reject the changes
-      }
-    }, 0);
-    return { async: true };
-  }
-};
-```
-
 ### <a name='afterSaveCell'>cellEdit.afterSaveCell - [Function]</a>
 This callback function will be called after updating cell.
 

docs/columns.md

@@ -11,11 +11,8 @@ Available properties in a column object:
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
-* [type](#type)
 * [sort](#sort)
-* [sortValue](#sortValue)
 * [sortFunc](#sortFunc)
-* [sortCaret](#sortCaret)
 * [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
@@ -32,14 +29,6 @@ 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)
@@ -50,7 +39,6 @@ Available properties in a column object:
 * [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
-* [searchable](#searchable)
 * [csvType](#csvType)
 * [csvFormatter](#csvFormatter)
 * [csvText](#csvText)
@@ -135,49 +123,11 @@ The third argument: `components` have following specified properties:
 ## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
 It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
 
-## <a name='type'>column.type - [String]</a>
-Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`.   
-`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
-
 ## <a name='sort'>column.sort - [Bool]</a>
 Enable the column sort via a `true` value given.
 
-## <a name='sortValue'>column.sortValue - [Function]</a>
-`column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting.
-
-For example, consider following data:
-
-```js
-const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
-const data = [{id: 1, type: 2}, {id: 2, type: 1}, {id: 3, type:0}];
-const columns = [{
-  dataField: 'id',
-  text: 'Job ID'
-}, {
-  dataField: 'type',
-  text: 'Job Type'
-  sort: true,
-  formatter: (cell, row) => types[cell]
-}]
-```
-
-In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via [`column.formatter`](#formatter), which will lead confuse because we are sorting by type value instead of type name. So `sortValue` is a way for you to decide what kind of value should be adopted when sorting on a specify column:
-
-```js
-const columns = [{
-  dataField: 'id',
-  text: 'Job ID'
-}, {
-  dataField: 'type',
-  text: 'Job Type'
-  sort: true,
-  formatter: (cell, row) => types[cell],
-  sortValue: (cell, row) => types[cell] // we use type name to sort.
-}]
-```
-
 ## <a name='sortFunc'>column.sortFunc - [Function]</a>
-`column.sortFunc` only work when `column.sort` enabled. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
+`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
 
 ```js
 {
@@ -204,20 +154,6 @@ const columns = [{
 }
 ```
 
-## <a name='sortCaret'>column.sortCaret - [Function]</a>
-Use`column.sortCaret` to customize the sort caret. This callback function accept two arguments: `order` and `column`
-
-```js
-{
-  // omit...
-  sort: true,
-  sortCaret: (order, column) => {
-    return //...
-  }
-}
-```
-> The possible value of `order` argument is **`asc`**, **`desc`** and **`undefined`**.
-
 ## <a name='classes'>column.classes - [String | Function]</a>
 It's available to have custom class on table column:
 
@@ -351,7 +287,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>
-Configure the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
+`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
 
 ```js
 {
@@ -428,27 +364,17 @@ A new `String` will be the result of element headerAlign.
 
 
 ## <a name='events'>column.events - [Object]</a>
-You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via `events` property.   
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
-
-`react-bootstrap-table2` currently only support following events which will receive some specific information:
-
-* onClick
-* onDoubleClick
-* onMouseEnter
-* onMouseLeave
-* onContextMenu
 
 ```js
 {
   // omit...
   events: {
-    onClick: (e, column, columnIndex, row, rowIndex) => { ... },
+    onClick: e => { ... }
   }
 }
 ```
 
-If the events is not listed above, the callback function will only pass the `event` object.
-
 ## <a name='headerEvents'>column.headerEvents - [Object]</a>
 `headerEvents` same as [`column.events`](#events) but this is for header column.
 
@@ -456,7 +382,7 @@ If the events is not listed above, the callback function will only pass the `eve
 {
   // omit...
   headerEvents: {
-    onClick: (e, column, columnIndex) => { ... }
+    onClick: e => { ... }
   }
 }
 ```
@@ -567,162 +493,6 @@ const sortingHeaderStyle = {
 };
 ```
 
-### <a name='footer'>footer - [String | Function]</a>
-Give a string to render the string value on the footer column.
-
-```js
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-  footerAlign: 'center',
-  footer: 'Footer 1'
-}, .....];
-```
-
-This prop also accept a function:
-
-```js
-{
-  dataField: 'price',
-  text: 'Product Price',
-  footer: column => column.reduce((acc, item) => acc + item, 0)
-}
-```
-
-## <a name='footerFormatter'>column.footerFormatter - [Function]</a>
-`footerFormatter` allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
-
-* `column`
-* `columnIndex`
-
-## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
-It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
-
-```js
-{
-  // omit...
-  footerClasses: 'id-custom-cell'
-}
-```
-Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
-
-```js
-{
-  footerClasses: function callback(column, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `column`: The value of current column. 
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-## <a name='footerStyle'>column.footerStyle - [Object | Function]</a>
-Customized the inline-style on table footer column:
-
-```js
-{
-  // omit...
-  footerStyle: { backgroundColor: 'green' }
-}
-```
-
-Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
-
-```js
-{
-  footerStyle: function callback(column, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `column`: The value of current column. 
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-## <a name='footerTitle'>column.footerTitle - [Bool | Function]</a>
-Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#title), 
-
-```js
-{
-  // omit...
-  footerTitle: true
-}
-```
-
-It's also available to custom via a callback function:
-```js
-{
-  footerTitle: function callback(column, colIndex) { ... }
-}
-```
-
-**Parameters**
-* `column`: The value of current column. 
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-## <a name='footerEvents'>column.footerEvents - [Object]</a>
-`footerEvents` same as [`column.events`](#events) but it is for footer column:
-
-```js
-{
-  // omit...
-  footerEvents: {
-    onClick: (e, column, columnIndex) => { ... }
-  }
-}
-```
-
-## <a name='footerAlign'>column.footerAlign - [String | Function]</a>
-It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column. 
-
-```js
-{
-  // omit...
-  footerAlign: 'center'
-}
-```
-
-Also, you can custom the align by a callback function:
-
-```js
-{
-  // omit...
-  footerAlign: (column, colIndex) => {
-    // column is an object and perform itself
-    // return custom title here
-  }
-}
-```
-**Parameters**
-* `column`: The value of current column. 
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
-## <a name='footerAttrs'>column.footerAttrs - [Object | Function]</a>
-`footerAttrs` is similar to [`column.attrs`](#attrs) but it works for footer column. 
-```js
-{
-  // omit...
-  footerAttrs: {
-    title: 'bar',
-    'data-test': 'foo'
-  }
-}
-```
-
-Additionally, customize the header attributes by a **2** arguments callback function:
-
-```js
-{
-  // omit...
-  footerAttrs: (column, colIndex) => ({
-    // return customized HTML attribute here
-  })
-}
-```
-
-**Parameters**
-* `column`: The value of current column. 
-* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
-
 ## <a name='editable'>column.editable - [Bool | Function]</a>
 `column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
 
@@ -758,28 +528,6 @@ The return value can be a bool or an object. If your validation is pass, return
 }
 ```
 
-If you want to perform a asycn validation, you can do it like this:
-```js
-{
-  // omit...
-  validator: (newValue, row, column, done) => {
-    settimeout(() => {
-      // async validation ok
-      return done();
-
-      // async validation not ok
-      return done({
-        valid: false,
-        message: 'SOME_REASON_HERE'
-      });
-
-    }, 2000);
-    return { async: true };
-  }
-}
-```
-
-
 ## <a name='editCellStyle'>column.editCellStyle - [Object | Function]</a>
 You can use `column.editCellStyle` to custom the style of `<td>` when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
 
@@ -953,9 +701,6 @@ A final `String` value you want to be filtered.
 }
 ```
 
-## <a name='searchable'>column.searchable - [Boolean]</a>
-Default the column is searchable. Give `false` to disable search functionality on specified column.
-
 ## <a name='csvType'>column.csvType - [Object]</a>
 Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
 

docs/development.md

@@ -3,7 +3,7 @@
 ### Setup
 ```bash
 $ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
-$ cd react-bootstrap-table2
+$ cd react-bootstrap-table
 $ npm install
 $ lerna bootstrap  # ./node_modules/.bin/lerna bootstrap
 ```
@@ -25,4 +25,4 @@ $ npm run storybook
 $ npm test
 $ npm run test:watch  # for watch mode
 $ npm run test:coverage  # generate coverage report
-```
+```

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, column toggle etc.
+  * Table Toolkits, like search, csv 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,12 +113,14 @@ 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
-- [x] Clear search
+- [ ] Clear search
 - [ ] Multiple search
 - [ ] Strict search
 

docs/row-expand.md

@@ -2,7 +2,7 @@
 # Row expand
 `react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality. 
 
-> Default is click to expand/collapse a row. In addition, we don't support any way to change this mechanism!
+> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
 
 ## Required
 * [renderer (**required**)](#renderer)
@@ -13,13 +13,8 @@
 * [onExpand](#onExpand)
 * [onExpandAll](#onExpandAll)
 * [showExpandColumn](#showExpandColumn)
-* [onlyOneExpanding](#onlyOneExpanding)
-* [expandByColumnOnly](#expandByColumnOnly)
-* [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
-* [className](#className)
-* [parentClassName](#parentClassName)
 
 ### <a name="renderer">expandRow.renderer - [Function]</a>
 
@@ -27,13 +22,12 @@ Specify the content of expand row, `react-bootstrap-table2` will pass a row obje
 
 #### values
 * **row**
-* **rowIndex**
 
 #### examples
 
 ```js
 const expandRow = {
-  renderer: (row, rowIndex) => (
+  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>
@@ -96,16 +90,13 @@ 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 these properties:
+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
-* `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, rowKey, expandable }) => (
+  expandColumnRenderer: ({ expanded }) => (
     // ....
   )
 };
@@ -136,77 +127,3 @@ const expandRow = {
   showExpandColumn: true
 };
 ```
-
-### <a name='onlyOneExpanding'>expandRow.onlyOneExpanding - [Bool]</a>
-Default is `false`. Enable this will only allow one row get expand at the same time.
-
-```js
-const expandRow = {
-  renderer: (row) => ...
-  onlyOneExpanding: true
-};
-```
-
-### <a name='expandByColumnOnly'>expandRow.expandByColumnOnly - [Bool]</a>
-Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it. 
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  showExpandColumn: true,
-  expandByColumnOnly: true
-};
-```
-
-### <a name='expandColumnPosition'>expandRow.expandColumnPosition - [String]</a>
-Default is `left`. You can give this as `right` for rendering expand column in the right side.
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  showExpandColumn: true,
-  expandColumnPosition: 'right'
-};
-```
-
-### <a name='className'>expandRow.className - [String | Function]</a>
-Apply the custom class name on the expanding row. For example: 
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  className: 'foo'
-};
-```
-following usage is more flexible way for customing the class name: 
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  className: (isExpanded, row, rowIndex) => {
-    if (rowIndex > 2) return 'foo';
-    return 'bar';
-  }
-};
-```
-
-### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
-Apply the custom class name on parent row of expanded row. For example: 
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  parentClassName: 'foo'
-};
-```
-Below case is more flexible way to custom the class name: 
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  parentClassName: (isExpanded, row, rowIndex) => {
-    if (rowIndex > 2) return 'foo';
-    return 'bar';
-  }
-};
-```

docs/row-selection.md

@@ -1,6 +1,6 @@
 
 # Row selection
-`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column. 
+`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first. 
 
 ## Required
 * [mode (**required**)](#mode)
@@ -12,17 +12,12 @@
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
 * [clickToSelect)](#clickToSelect)
-* [clickToExpand)](#clickToExpand)
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
-* [selectColumnPosition](#selectColumnPosition)
 * [hideSelectColumn](#hideSelectColumn)
-* [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
-* [headerColumnStyle](#headerColumnStyle)
-* [selectColumnStyle](#selectColumnStyle)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -152,16 +147,6 @@ const selectRow = {
 > Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing   
 > If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
 
-### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
-Default is false, enable it will let user able to expand and select row when user clicking on the row.
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  clickToExpand: true
-};
-```
-
 ### <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
 Able to click to edit cell and select row
 
@@ -179,7 +164,7 @@ Provide a callback function which allow you to custom the checkbox/radio box. Th
 ```js
 const selectRow = {
   mode: 'checkbox',
-  selectionRenderer: ({ mode, checked, disabled, rowIndex }) => (
+  selectionRenderer: ({ mode, checked, disabled }) => (
     // ....
   )
 };
@@ -201,67 +186,6 @@ const selectRow = {
 
 > By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
 
-
-### <a name='headerColumnStyle'>selectRow.headerColumnStyle - [Object | Function]</a>
-A way to custome the selection header cell. `headerColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
-
-### Style Object
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  headerColumnStyle: { backgroundColor: 'blue' }
-};
-```
-
-### Callback Function
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  headerColumnStyle:  (status) => (
-    // status available value is checked, indeterminate and unchecked
-    return { backgroundColor: 'blue' };
-  )
-};
-```
-
-### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
-A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
-
-### Style Object
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  selectColumnStyle: { backgroundColor: 'blue' }
-};
-```
-
-### Callback Function
-If a callback function present, you can get below information to custom the selection cell:
-
-* `checked`: Whether current row is seleccted or not
-* `disabled`: Whether current row is disabled or not
-* `rowIndex`: Current row index
-* `rowKey`: Current row key
-
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  selectColumnStyle:  ({
-    checked,
-    disabled,
-    rowIndex,
-    rowKey
-  }) => (
-    // ....
-    return { backgroundColor: 'blue' };
-  )
-};
-```
-
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
 `row`, `isSelect`, `rowIndex` and `e`.
@@ -275,54 +199,18 @@ const selectRow = {
 };
 ```
 
-> If you want to reject current select action, just return `false`:
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex, e) => {
-    if (SOME_CONDITION) {
-      return false;
-    }
-  }
-};
-```
-
 ### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
 This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, rows, e) => {
+  onSelectAll: (isSelect, results, e) => {
     // ...
   }
 };
 ```
 
-> If you want to control the final selection result, just return a row key array:
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelectAll: (isSelect, rows, e) => {
-    if (isSelect && SOME_CONDITION) {
-      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
-    }
-  }
-};
-```
-
-### <a name='selectColumnPosition'>selectRow.selectColumnPosition - [String]</a>
-Default is `left`. You can give this as `right` for rendering selection column in the right side.
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  selectColumnPosition: 'right'
-};
-```
-
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 
@@ -334,13 +222,3 @@ const selectRow = {
   bgColor: 'red'
 };
 ```
-
-### <a name='hideSelectAll'>selectRow.hideSelectAll - [Bool]</a>
-Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`!
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  hideSelectAll: true
-};
-```

package.json

@@ -80,17 +80,16 @@
     "webpack-dev-server": "2.7.1"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
+    "classnames": "2.2.5",
     "prop-types": "15.5.10",
-    "react": "16.4.0",
+    "react": "16.3.2",
-    "react-dom": "16.4.0",
+    "react-dom": "16.3.2",
     "underscore": "1.9.1"
   },
   "jest": {
     "collectCoverageFrom": [
       "packages/*/src/**/*.js",
-      "packages/*/index.js",
+      "packages/*/index.js"
-      "!packages/react-bootstrap-table2-example/**/*.js"
     ],
     "roots": [
       "<rootDir>/packages"

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

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

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

@@ -1,6 +1,6 @@
 import createContext from './src/context';
-import withRowLevelCellEdit from './src/row-consumer';
+import bindRowLevelCellEdit from './src/row-binder';
-import createEditingCell from './src/editing-cell-consumer';
+import createEditingCell from './src/editing-cell-binder';
 import {
   EDITTYPE,
   DBCLICK_TO_CELL_EDIT,
@@ -10,7 +10,7 @@ import {
 export default (options = {}) => ({
   createContext,
   createEditingCell,
-  withRowLevelCellEdit,
+  bindRowLevelCellEdit,
   DBCLICK_TO_CELL_EDIT,
   DELAY_FOR_DBCLICK,
   options

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

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

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

@@ -1,8 +1,5 @@
-/* eslint disable-next-line: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
-/* eslint camelcase: 0 */
-/* eslint react/no-unused-prop-types: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
@@ -34,7 +31,6 @@ export default (
 
     constructor(props) {
       super(props);
-      this.doUpdate = this.doUpdate.bind(this);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);
@@ -46,7 +42,7 @@ export default (
       };
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps) {
       if (nextProps.cellEdit && isRemoteCellEdit()) {
         if (nextProps.cellEdit.options.errorMessage) {
           this.setState(() => ({
@@ -59,37 +55,11 @@ export default (
     }
 
     handleCellUpdate(row, column, newValue) {
-      const newValueWithType = dataOperator.typeConvert(column.type, newValue);
-      const { cellEdit } = this.props;
-      const { beforeSaveCell } = cellEdit.options;
-      const oldValue = _.get(row, column.dataField);
-      const beforeSaveCellDone = (result = true) => {
-        if (result) {
-          this.doUpdate(row, column, newValueWithType);
-        } else {
-          this.escapeEditing();
-        }
-      };
-      if (_.isFunction(beforeSaveCell)) {
-        const result = beforeSaveCell(
-          oldValue,
-          newValueWithType,
-          row,
-          column,
-          beforeSaveCellDone
-        );
-        if (_.isObject(result) && result.async) {
-          return;
-        }
-      }
-      this.doUpdate(row, column, newValueWithType);
-    }
-
-    doUpdate(row, column, newValue) {
       const { keyField, cellEdit, data } = this.props;
-      const { afterSaveCell } = cellEdit.options;
+      const { beforeSaveCell, afterSaveCell } = cellEdit.options;
-      const rowId = _.get(row, keyField);
       const oldValue = _.get(row, column.dataField);
+      const rowId = _.get(row, keyField);
+      if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
       if (isRemoteCellEdit()) {
         handleCellChange(rowId, column.dataField, newValue);
       } else {

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

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

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

@@ -2,7 +2,6 @@
 /* eslint no-return-assign: 0 */
 /* eslint class-methods-use-this: 0 */
 /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
-/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
@@ -25,7 +24,6 @@ export default (_, onStartEdit) =>
       onUpdate: PropTypes.func.isRequired,
       onEscape: PropTypes.func.isRequired,
       timeToCloseMessage: PropTypes.number,
-      autoSelectText: PropTypes.bool,
       className: PropTypes.string,
       style: PropTypes.object
     }
@@ -33,7 +31,6 @@ export default (_, onStartEdit) =>
     static defaultProps = {
       timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
       className: null,
-      autoSelectText: false,
       style: {}
     }
 
@@ -45,18 +42,12 @@ export default (_, onStartEdit) =>
       this.handleClick = this.handleClick.bind(this);
       this.handleKeyDown = this.handleKeyDown.bind(this);
       this.beforeComplete = this.beforeComplete.bind(this);
-      this.asyncbeforeCompete = this.asyncbeforeCompete.bind(this);
-      this.displayErrorMessage = this.displayErrorMessage.bind(this);
       this.state = {
         invalidMessage: null
       };
     }
 
-    componentWillUnmount() {
+    componentWillReceiveProps({ message }) {
-      this.clearTimer();
-    }
-
-    UNSAFE_componentWillReceiveProps({ message }) {
       if (_.isDefined(message)) {
         this.createTimer();
         this.setState(() => ({
@@ -65,6 +56,10 @@ export default (_, onStartEdit) =>
       }
     }
 
+    componentWillUnmount() {
+      this.clearTimer();
+    }
+
     clearTimer() {
       if (this.indicatorTimer) {
         clearTimeout(this.indicatorTimer);
@@ -82,41 +77,16 @@ export default (_, onStartEdit) =>
       }, timeToCloseMessage);
     }
 
-    displayErrorMessage(message) {
-      this.setState(() => ({
-        invalidMessage: message
-      }));
-      this.createTimer();
-    }
-
-    asyncbeforeCompete(newValue) {
-      return (result = { valid: true }) => {
-        const { valid, message } = result;
-        const { onUpdate, row, column } = this.props;
-        if (!valid) {
-          this.displayErrorMessage(message);
-          return;
-        }
-        onUpdate(row, column, newValue);
-      };
-    }
-
     beforeComplete(newValue) {
       const { onUpdate, row, column } = this.props;
       if (_.isFunction(column.validator)) {
-        const validateForm = column.validator(
+        const validateForm = column.validator(newValue, row, column);
-          newValue,
+        if (_.isObject(validateForm) && !validateForm.valid) {
-          row,
+          this.setState(() => ({
-          column,
+            invalidMessage: validateForm.message
-          this.asyncbeforeCompete(newValue)
+          }));
-        );
+          this.createTimer();
-        if (_.isObject(validateForm)) {
+          return;
-          if (validateForm.async) {
-            return;
-          } else if (!validateForm.valid) {
-            this.displayErrorMessage(validateForm.message);
-            return;
-          }
         }
       }
       onUpdate(row, column, newValue);
@@ -151,7 +121,7 @@ export default (_, onStartEdit) =>
 
     render() {
       let editor;
-      const { row, column, className, style, rowIndex, columnIndex, autoSelectText } = this.props;
+      const { row, column, className, style, rowIndex, columnIndex } = this.props;
       const { dataField } = column;
 
       const value = _.get(row, dataField);
@@ -202,15 +172,15 @@ export default (_, onStartEdit) =>
       if (_.isFunction(column.editorRenderer)) {
         editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
-        editor = <DropdownEditor { ...editorProps } row={ row } column={ column } />;
+        editor = <DropdownEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
-        editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
+        editor = <TextAreaEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {
         editor = <CheckBoxEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) {
         editor = <DateEditor { ...editorProps } />;
       } else {
-        editor = <TextEditor { ...editorProps } autoSelectText={ autoSelectText } />;
+        editor = <TextEditor { ...editorProps } />;
       }
 
       return (

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 const EditorIndicator = ({ invalidMessage }) =>
   (
-    <div className="alert alert-danger in" role="alert">
+    <div className="alert alert-danger fade in">
       <strong>{ invalidMessage }</strong>
     </div>
   );

packages/react-bootstrap-table2-editor/src/row-binder.js

@@ -30,14 +30,9 @@ export default (Component, selectRowEnabled) => {
       />
     );
   };
-  function withConsumer(props) {
+  return props => (
-    return (
+    <Consumer>
-      <Consumer>
+      { cellEdit => renderWithCellEdit(props, cellEdit) }
-        { cellEdit => renderWithCellEdit(props, cellEdit) }
+    </Consumer>
-      </Consumer>
+  );
-    );
-  }
-
-  withConsumer.displayName = 'WithCellEditingRowConsumer';
-  return withConsumer;
 };

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

@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue, didMount, autoSelectText } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
-    if (autoSelectText) this.text.select();
     if (didMount) didMount();
   }
 
@@ -17,7 +16,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -39,13 +38,11 @@ TextEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
   defaultValue: '',
-  autoSelectText: false,
   didMount: undefined
 };
 export default TextEditor;

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

@@ -10,10 +10,9 @@ class TextAreaEditor extends Component {
   }
 
   componentDidMount() {
-    const { defaultValue, didMount, autoSelectText } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
-    if (autoSelectText) this.text.select();
     if (didMount) didMount();
   }
 
@@ -29,7 +28,7 @@ class TextAreaEditor extends Component {
   }
 
   render() {
-    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-textarea', className);
     return (
       <textarea
@@ -53,13 +52,11 @@ TextAreaEditor.propTypes = {
     PropTypes.number
   ]),
   onKeyDown: PropTypes.func,
-  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  autoSelectText: false,
   onKeyDown: undefined,
   didMount: undefined
 };

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

@@ -0,0 +1,210 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+import op from 'react-bootstrap-table-next/src/store/operators';
+
+import cellEditFactory from '../index';
+import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from '../src/const';
+import createCellEditContext from '../src/context';
+import bindCellEditing from '../src/cell-binder';
+
+describe('Cell Binder', () => {
+  let wrapper;
+  let cellEdit;
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+  let columns;
+  const rowIndex = 1;
+  const row = { id: 1, name: 'A' };
+  const keyField = 'id';
+  const columnIndex = 1;
+
+  const { Provider } = createCellEditContext(_, op, false, jest.fn());
+  const BaseComponent = () => null;
+  const WithCellEditComponent = bindCellEditing(
+    props => <BaseComponent { ...props } />,
+    keyField,
+    _
+  );
+
+  beforeEach(() => {
+    columns = [{
+      dataField: 'id',
+      text: 'ID'
+    }, {
+      dataField: 'name',
+      text: 'Name'
+    }];
+  });
+
+  describe(`if cellEdit.mode is ${CLICK_TO_CELL_EDIT}`, () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject correct props to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeTruthy();
+      expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeFalsy();
+    });
+  });
+
+  describe(`if cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject correct props to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeFalsy();
+      expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeTruthy();
+    });
+  });
+
+  describe('if column prop is a key column', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[0] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            editable
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject negative editable prop to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+    });
+  });
+
+  describe('if editable prop is true(Row Level)', () => {
+    describe('but column.editable prop is false', () => {
+      beforeEach(() => {
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+        columns[1].editable = false;
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent
+              row={ row }
+              column={ columns[1] }
+              rowIndex={ rowIndex }
+              columnIndex={ columnIndex }
+              editable
+            />
+          </Provider>
+        );
+      });
+
+      it('should inject negative editable prop to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+      });
+    });
+
+    describe('and column.editable prop is true or not defined', () => {
+      beforeEach(() => {
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent
+              row={ row }
+              column={ columns[1] }
+              rowIndex={ rowIndex }
+              columnIndex={ columnIndex }
+              editable
+            />
+          </Provider>
+        );
+      });
+
+      it('should inject positive editable prop to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
+      });
+    });
+  });
+
+  describe('if editable prop is false(Row Level)', () => {
+    describe('even if column.editable prop is true or not defined', () => {
+      beforeEach(() => {
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+        columns[1].editable = true;
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent
+              row={ row }
+              column={ columns[1] }
+              rowIndex={ rowIndex }
+              columnIndex={ columnIndex }
+              editable={ false }
+            />
+          </Provider>
+        );
+      });
+
+      it('should inject negative editable prop to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+      });
+    });
+  });
+
+  describe('if column.editable prop is a function', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editable = jest.fn().mockReturnValue(false);
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            editable
+          />
+        </Provider>
+      );
+    });
+
+    it('should call column.editable function correctly', () => {
+      expect(columns[1].editable).toHaveBeenCalledTimes(1);
+    });
+
+    it('should inject correct editable prop to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+    });
+  });
+});

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

@@ -117,7 +117,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().UNSAFE_componentWillReceiveProps({});
+        wrapper.instance().componentWillReceiveProps({});
       });
 
       it('should not set state.message', () => {
@@ -138,7 +138,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().UNSAFE_componentWillReceiveProps({
+        wrapper.instance().componentWillReceiveProps({
           cellEdit: cellEditFactory(defaultCellEdit)
         });
       });
@@ -164,7 +164,7 @@ describe('CellEditContext', () => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
           wrapper.render();
-          wrapper.instance().UNSAFE_componentWillReceiveProps({
+          wrapper.instance().componentWillReceiveProps({
             cellEdit: cellEditFactory({
               ...defaultCellEdit,
               errorMessage: message
@@ -190,7 +190,7 @@ describe('CellEditContext', () => {
         beforeEach(() => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
-          wrapper.instance().UNSAFE_componentWillReceiveProps({
+          wrapper.instance().componentWillReceiveProps({
             cellEdit: cellEditFactory({ ...defaultCellEdit })
           });
           wrapper.update();
@@ -235,8 +235,7 @@ describe('CellEditContext', () => {
 
       it('should call cellEdit.beforeSaveCell correctly', () => {
         expect(beforeSaveCell).toHaveBeenCalledTimes(1);
-        expect(beforeSaveCell)
+        expect(beforeSaveCell).toHaveBeenCalledWith(oldValue, newValue, row, column);
-          .toHaveBeenCalledWith(oldValue, newValue, row, column, expect.anything());
       });
     });
 

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

@@ -3,12 +3,12 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import _ from 'react-bootstrap-table-next/src/utils';
 
-import cellEditFactory from '..';
+import cellEditFactory from '../index';
 import { CLICK_TO_CELL_EDIT } from '../src/const';
 import createCellEditContext from '../src/context';
-import bindEditingCell from '../src/editing-cell-consumer';
+import bindEditingCell from '../src/editing-cell-binder';
 
-describe('Editing Cell Consumer', () => {
+describe('Cell Binder', () => {
   let wrapper;
   let cellEdit;
   const data = [{

packages/react-bootstrap-table2-editor/test/row-binder.test.js

@@ -4,12 +4,12 @@ import { mount } from 'enzyme';
 import _ from 'react-bootstrap-table-next/src/utils';
 import op from 'react-bootstrap-table-next/src/store/operators';
 
-import cellEditFactory from '..';
+import cellEditFactory from '../index';
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT, DELAY_FOR_DBCLICK } from '../src/const';
 import createCellEditContext from '../src/context';
-import withRowLevelCellEdit from '../src/row-consumer';
+import bindCellEditing from '../src/row-binder';
 
-describe('Row Consumer', () => {
+describe('Row Binder', () => {
   let wrapper;
   let cellEdit;
   const data = [{
@@ -28,7 +28,7 @@ describe('Row Consumer', () => {
 
   describe('if cellEdit.nonEditableRows is undefined', () => {
     beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
+      const WithCellEditComponent = bindCellEditing(
         props => <BaseComponent { ...props } />,
         false
       );
@@ -52,7 +52,7 @@ describe('Row Consumer', () => {
     const nonEditableRows = jest.fn().mockReturnValue([value]);
     describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
       beforeEach(() => {
-        const WithCellEditComponent = withRowLevelCellEdit(
+        const WithCellEditComponent = bindCellEditing(
           props => <BaseComponent { ...props } />,
           false
         );
@@ -72,7 +72,7 @@ describe('Row Consumer', () => {
 
     describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
       beforeEach(() => {
-        const WithCellEditComponent = withRowLevelCellEdit(
+        const WithCellEditComponent = bindCellEditing(
           props => <BaseComponent { ...props } />,
           false
         );
@@ -93,7 +93,7 @@ describe('Row Consumer', () => {
 
   describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
     beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
+      const WithCellEditComponent = bindCellEditing(
         props => <BaseComponent { ...props } />,
         true
       );
@@ -115,7 +115,7 @@ describe('Row Consumer', () => {
     const ridx = 0;
     const cidx = 1;
     beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
+      const WithCellEditComponent = bindCellEditing(
         props => <BaseComponent { ...props } />,
         false
       );

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

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

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

@@ -1,186 +0,0 @@
-/* eslint no-return-assign: 0 */
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import paginationFactory 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(63);
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-  sort: true
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  sort: true,
-  filter: textFilter()
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  sort: true,
-  filter: textFilter()
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-class ExposedFunctionTable extends React.Component {
-  handleGetCurrentData = () => {
-    console.log(this.node.table.props.data);
-  }
-
-  handleGetCurrentData = () => {
-    console.log(this.node.table.props.data);
-  }
-
-  handleGetSelectedData = () => {
-    console.log(this.node.selectionContext.selected);
-  }
-
-  handleGetExpandedData = () => {
-    console.log(this.node.rowExpandContext.state.expanded);
-  }
-
-  handleGetCurrentPage = () => {
-    console.log(this.node.paginationContext.currPage);
-  }
-
-  handleGetCurrentSizePerPage = () => {
-    console.log(this.node.paginationContext.currSizePerPage);
-  }
-
-  handleGetCurrentSortColumn = () => {
-    console.log(this.node.sortContext.state.sortColumn);
-  }
-
-  handleGetCurrentSortOrder = () => {
-    console.log(this.node.sortContext.state.sortOrder);
-  }
-
-  handleGetCurrentFilter = () => {
-    console.log(this.node.filterContext.currFilters);
-  }
-
-  render() {
-    const expandRow = {
-      renderer: row => (
-        <div>
-          <p>.....</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
-    };
-    return (
-      <div>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
-        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
-        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
-        <BootstrapTable
-          ref={ n => this.node = n }
-          keyField="id"
-          data={ products }
-          columns={ columns }
-          filter={ filterFactory() }
-          pagination={ paginationFactory() }
-          selectRow={ { mode: 'checkbox', clickToSelect: true } }
-          expandRow={ expandRow }
-        />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-`;
-
-export default class ExposedFunctionTable extends React.Component {
-  handleGetCurrentData = () => {
-    console.log(this.node.table.props.data);
-  }
-
-  handleGetSelectedData = () => {
-    console.log(this.node.selectionContext.selected);
-  }
-
-  handleGetExpandedData = () => {
-    console.log(this.node.rowExpandContext.state.expanded);
-  }
-
-  handleGetCurrentPage = () => {
-    console.log(this.node.paginationContext.currPage);
-  }
-
-  handleGetCurrentSizePerPage = () => {
-    console.log(this.node.paginationContext.currSizePerPage);
-  }
-
-  handleGetCurrentSortColumn = () => {
-    console.log(this.node.sortContext.state.sortColumn);
-  }
-
-  handleGetCurrentSortOrder = () => {
-    console.log(this.node.sortContext.state.sortOrder);
-  }
-
-  handleGetCurrentFilter = () => {
-    console.log(this.node.filterContext.currFilters);
-  }
-
-  render() {
-    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
-    };
-    return (
-      <div>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
-        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
-        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
-        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
-        <BootstrapTable
-          ref={ n => this.node = n }
-          keyField="id"
-          data={ products }
-          columns={ columns }
-          filter={ filterFactory() }
-          pagination={ paginationFactory() }
-          selectRow={ { mode: 'checkbox', clickToSelect: true } }
-          expandRow={ expandRow }
-        />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}

packages/react-bootstrap-table2-example/examples/basic/large-table.js

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
+// import cellEditFactory from 'react-bootstrap-table2-editor';
 import { productsGenerator } from 'utils/common';
 
-const products = productsGenerator(3000);
+const products = productsGenerator(2000);
 
 const columns = [{
   dataField: 'id',
@@ -16,25 +17,41 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const expandRow = {
+// cellEdit={ cellEditFactory({
-  showExpandColumn: true,
+//   mode: 'click'
-  renderer: row => (
+// }) }
-    <div>
+
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+// const expandRow = {
-      <p>You can render anything here, also you can add additional data on every row object</p>
+//   renderer: row => (
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
+//     <div>
-    </div>
+//       <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-  )
+//       <p>You can render anything here, also you can add additional data on every row object</p>
+//       <p>expandRow.renderer callback will pass the origin row object to you</p>
+//     </div>
+//   )
+// };
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  bgColor: 'red'
+  // selected: [2],
+  // hideSelectColumn: true
+  // clickToEdit: true
 };
 
-export default () => (
+/* eslint react/prefer-stateless-function: 0 */
-  <div>
+export default class Table extends React.PureComponent {
-    <BootstrapTable
+  render() {
-      keyField="id"
+    return (
-      data={ products }
+      <div>
-      columns={ columns }
+        <BootstrapTable
-      selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          keyField="id"
-      expandRow={ expandRow }
+          data={ products }
-    />
+          columns={ columns }
-  </div>
+          selectRow={ selectRow }
-);
+        />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js

@@ -1,54 +0,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 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'
-}];
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ { mode: 'checkbox' } }
-  tabIndexCell
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      selectRow={ { mode: 'checkbox' } }
-      tabIndexCell
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,81 +0,0 @@
-/* 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

@@ -1,90 +0,0 @@
-/* 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/auto-select-text-input-table.js

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

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-hooks-table.js

@@ -1,86 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-console: 0 */
-/* eslint no-alert: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-function beforeSaveCell(oldValue, newValue, row, column, done) {
-  setTimeout(() => {
-    if (confirm('Do you want to accep this change?')) {
-      done(true);
-    } else {
-      done(false);
-    }
-  }, 0);
-  return { async: true };
-}
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({
-    mode: 'click',
-    beforeSaveCell
-  }) }
-/>
-`;
-
-function beforeSaveCell(oldValue, newValue, row, column, done) {
-  setTimeout(() => {
-    if (confirm('Do you want to accep this change?')) {
-      done(true);
-    } else {
-      done(false);
-    }
-  }, 0);
-  return { async: true };
-}
-
-export default () => (
-  <div>
-    <h2>You will get a confirm prompt when you try to save a cell</h2>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({
-        mode: 'click',
-        beforeSaveCell
-      }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-validator-table.js

@@ -1,101 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
-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',
-  validator: (newValue, row, column, done) => {
-    setTimeout(() => {
-      if (isNaN(newValue)) {
-        return done({
-          valid: false,
-          message: 'Price should be numeric'
-        });
-      }
-      if (newValue < 2000) {
-        return done({
-          valid: false,
-          message: 'Price should bigger than 2000'
-        });
-      }
-      return done();
-    }, 2000);
-    return {
-      async: true
-    };
-  }
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  validator: (newValue, row, column, done) => {
-    setTimeout(() => {
-      if (isNaN(newValue)) {
-        return done({
-          valid: false,
-          message: 'Price should be numeric'
-        });
-      }
-      if (newValue < 2000) {
-        return done({
-          valid: false,
-          message: 'Price should bigger than 2000'
-        });
-      }
-      return done();
-    }, 2000);
-    return {
-      async: true
-    };
-  }
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({
-    mode: 'click',
-    blurToSave: true
-  }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Product Price should bigger than $2000</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({
-        mode: 'click',
-        blurToSave: true
-      }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

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

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

@@ -18,11 +18,6 @@ class QualityRanger extends React.Component {
   static defaultProps = {
     value: 0
   }
-
-  componentDidMount() {
-    this.range.focus();
-  }
-
   getValue() {
     return parseInt(this.range.value, 10);
   }
@@ -108,7 +103,7 @@ const columns = [{
 }, {
   dataField: 'quality',
   text: 'Product Quality',
-  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+  editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => (
     <QualityRanger { ...editorProps } value={ value } />
   )
 }];

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

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

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

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

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
-import { stockGenerator } from 'utils/common';
+import { productsGenerator } from 'utils/common';
 
-const products = stockGenerator(8);
+const products = productsGenerator(8);
 
 let nameFilter;
 let priceFilter;
-let stockDateFilter;
 
 const columns = [{
   dataField: 'id',
@@ -23,36 +22,25 @@ const columns = [{
   })
 }, {
   dataField: 'price',
-  text: 'Price',
+  text: 'Product 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, dateFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 let nameFilter;
 let priceFilter;
-let stockDateFilter;
 
 const columns = [{
   dataField: 'id',
@@ -67,27 +55,17 @@ const columns = [{
   })
 }, {
   dataField: 'price',
-  text: 'Price',
+  text: 'Product 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

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

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

@@ -1,57 +0,0 @@
-/* eslint no-console: 0 */
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(8);
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  filter: textFilter()
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  filter: textFilter({
-    onFilter: filterVal => console.log(`Filter Value: ${filterVal}`)
-  })
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  filter: textFilter()
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  filter: textFilter({
-    onFilter: filterVal => console.log(\`Filter Value: $\{filterVal}\`)
-  })
-}];
-
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      filter={ filterFactory() }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,93 +0,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()
-}];
-
-const sourceCode1 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  filter: textFilter()
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  filter: textFilter()
-}];
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  filter={ filterFactory() }
-  filterPosition="top"
-/>
-`;
-
-const sourceCode2 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  filter: textFilter()
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  filter: textFilter()
-}];
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  filter={ filterFactory() }
-  filterPosition="bottom"
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      filter={ filterFactory() }
-      filterPosition="top"
-    />
-    <Code>{ sourceCode1 }</Code>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      filter={ filterFactory() }
-      filterPosition="bottom"
-    />
-    <Code>{ sourceCode2 }</Code>
-  </div>
-);

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

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

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js

@@ -1,70 +0,0 @@
-/* eslint max-len: 0 */
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsQualityGenerator } from 'utils/common';
-
-const products = productsQualityGenerator(6);
-
-const selectOptions = [
-  { value: 0, label: 'good' },
-  { value: 1, label: 'Bad' },
-  { value: 2, label: 'unknown' }
-];
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
-
-const selectOptions = [
-  { value: 0, label: 'good' },
-  { value: 1, label: 'Bad' },
-  { value: 2, label: 'unknown' }
-];
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
-`;
-
-export default () => (
-  <div>
-    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      filter={ filterFactory() }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

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

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

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

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

@@ -1,135 +0,0 @@
-/* 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

@@ -1,81 +0,0 @@
-/* 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

@@ -1,81 +0,0 @@
-/* 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

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

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

@@ -1,6 +1,5 @@
 /* eslint no-unused-vars: 0 */
 /* eslint no-alert: 0 */
-/* eslint no-console: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -13,22 +12,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   events: {
-    onClick: (e, column, columnIndex, row, rowIndex) => {
+    onClick: () => alert('Click on Product ID field')
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      alert('Click on Product ID field');
-    },
-    onMouseEnter: (e, column, columnIndex, row, rowIndex) => {
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      console.log('onMouseEnter on Product ID field');
-    }
   }
 }, {
   dataField: 'name',
@@ -45,22 +29,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   events: {
-    onClick: (e, column, columnIndex, row, rowIndex) => {
+    onClick: () => alert('Click on Product ID field')
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      alert('Click on Product ID field');
-    },
-    onMouseEnter: (e, column, columnIndex, row, rowIndex) => {
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      console.log('onMouseEnter on Product ID field');
-    }
   }
 }, {
   dataField: 'name',
@@ -75,7 +44,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Try to Click or Mouse over on Product ID columns</h3>
+    <h3>Try to Click on Product ID columns</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

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

@@ -2,9 +2,9 @@ import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
-import { productsGenerator, withOnSale } from 'utils/common';
+import { productsGenerator } from 'utils/common';
 
-const products = withOnSale(productsGenerator());
+const products = productsGenerator();
 
 function priceFormatter(cell, row) {
   if (row.onSale) {

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

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

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

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

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

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

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

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

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

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

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

@@ -1,70 +0,0 @@
-/* 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

@@ -1,80 +0,0 @@
-/* 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

@@ -1,68 +0,0 @@
-/* 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

@@ -1,72 +0,0 @@
-/* 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

@@ -1,80 +0,0 @@
-/* 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

@@ -1,53 +0,0 @@
-/* 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

@@ -1,54 +0,0 @@
-/* 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

@@ -1,60 +0,0 @@
-/* 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

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

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

@@ -1,67 +0,0 @@
-/* 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

@@ -1,76 +0,0 @@
-/* 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

@@ -1,53 +0,0 @@
-/* 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

@@ -1,61 +0,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 = [
-    {
-      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

@@ -1,52 +0,0 @@
-/* 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

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

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

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

packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js

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

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

@@ -1,106 +0,0 @@
-/* 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

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

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

@@ -1,78 +0,0 @@
-/* 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-pagination.js

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

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

@@ -1,96 +0,0 @@
-/* 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

@@ -1,89 +0,0 @@
-/* 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

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

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

@@ -1,166 +0,0 @@
-/* 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/pagination-with-dynamic-data.js

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

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

@@ -1,190 +0,0 @@
-/* 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

@@ -1,102 +0,0 @@
-/* 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

@@ -1,107 +0,0 @@
-/* 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

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

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

@@ -1,77 +0,0 @@
-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,
-  expandByColumnOnly: true
-};
-
-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,
-  expandByColumnOnly: true
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  expandRow={ expandRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Only able to expand row via clicking expand column(indicator)</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      expandRow={ expandRow }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsExpandRowsGenerator } from 'utils/common';
-
-const products = productsExpandRowsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const expandRow = {
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  ),
-  showExpandColumn: true,
-  expandColumnPosition: 'right'
-};
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const expandRow = {
-  renderer: row => (
-    <div>
-      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  ),
-  showExpandColumn: true,
-  expandColumnPosition: 'right'
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  expandRow={ expandRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      expandRow={ expandRow }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,74 +0,0 @@
-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 = {
-  onlyOneExpanding: true,
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  )
-};
-
-const 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 = {
-  onlyOneExpanding: true,
-  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>
-  )
-};
-
-<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/expanding-row-classname.js

@@ -1,106 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsExpandRowsGenerator } from 'utils/common';
-
-const products = productsExpandRowsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const expandRow1 = {
-  className: 'expanding-foo',
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  )
-};
-
-const expandRow2 = {
-  className: (isExpanded, row, rowIndex) => {
-    if (rowIndex > 2) return 'expanding-foo';
-    return 'expanding-bar';
-  },
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  )
-};
-
-
-const sourceCode1 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = // omit...
-
-const expandRow = {
-  className: 'expanding-foo',
-  renderer: row => (
-    <div>.....</div>
-  )
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  expandRow={ expandRow }
-/>
-`;
-
-const sourceCode2 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = // omit...
-
-const expandRow = {
-  className: (isExpanded, row, rowIndex) => {
-    if (rowIndex > 2) return 'expanding-foo';
-    return 'expanding-bar';
-  },
-  renderer: row => (
-    <div>...</div>
-  )
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  expandRow={ expandRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      expandRow={ expandRow1 }
-    />
-    <Code>{ sourceCode1 }</Code>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      expandRow={ expandRow2 }
-    />
-    <Code>{ sourceCode2 }</Code>
-  </div>
-);

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

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

packages/react-bootstrap-table2-example/examples/row-expand/non-expandable-rows.js

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

@@ -1,106 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsExpandRowsGenerator } from 'utils/common';
-
-const products = productsExpandRowsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const expandRow1 = {
-  parentClassName: 'parent-expand-foo',
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  )
-};
-
-const expandRow2 = {
-  parentClassName: (isExpanded, row, rowIndex) => {
-    if (rowIndex > 2) return 'parent-expand-foo';
-    return 'parent-expand-bar';
-  },
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  )
-};
-
-
-const sourceCode1 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = // omit...
-
-const expandRow = {
-  parentClassName: 'parent-expand-foo',
-  renderer: row => (
-    <div>.....</div>
-  )
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  expandRow={ expandRow }
-/>
-`;
-
-const sourceCode2 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = // omit...
-
-const expandRow = {
-  parentClassName: (isExpanded, row, rowIndex) => {
-    if (rowIndex > 2) return 'parent-expand-foo';
-    return 'parent-expand-bar';
-  },
-  renderer: row => (
-    <div>...</div>
-  )
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  expandRow={ expandRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      expandRow={ expandRow1 }
-    />
-    <Code>{ sourceCode1 }</Code>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      expandRow={ expandRow2 }
-    />
-    <Code>{ sourceCode2 }</Code>
-  </div>
-);

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

@@ -1,111 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(2);
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const selectRow1 = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  headerColumnStyle: {
-    backgroundColor: 'blue'
-  }
-};
-
-const sourceCode1 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = ...
-
-const selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  headerColumnStyle: {
-    backgroundColor: 'blue'
-  }
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRow }
-/>
-`;
-
-const selectRow2 = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  headerColumnStyle: (status) => {
-    if (status === 'checked') {
-      return {
-        backgroundColor: 'yellow'
-      };
-    } else if (status === 'indeterminate') {
-      return {
-        backgroundColor: 'pink'
-      };
-    } else if (status === 'unchecked') {
-      return {
-        backgroundColor: 'grey'
-      };
-    }
-    return {};
-  }
-};
-
-const sourceCode2 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = ...
-
-const selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  headerColumnStyle: (status) => {
-    if (status === 'checked') {
-      return {
-        backgroundColor: 'yellow'
-      };
-    } else if (status === 'indeterminate') {
-      return {
-        backgroundColor: 'pink'
-      };
-    } else if (status === 'unchecked') {
-      return {
-        backgroundColor: 'grey'
-      };
-    }
-    return {};
-  }
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
-    <Code>{ sourceCode1 }</Code>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
-    <Code>{ sourceCode2 }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js

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

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

@@ -1,110 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(2);
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const selectRow1 = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  selectColumnStyle: {
-    backgroundColor: 'grey'
-  }
-};
-
-const sourceCode1 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = ...
-
-const selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  selectColumnStyle: {
-    backgroundColor: 'grey'
-  }
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRow }
-/>
-`;
-
-const selectRow2 = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  selectColumnStyle: ({
-    checked,
-    disabled,
-    rowIndex,
-    rowKey
-  }) => {
-    if (checked) {
-      return {
-        backgroundColor: 'yellow'
-      };
-    }
-    return {
-      backgroundColor: 'pink'
-    };
-  }
-};
-
-const sourceCode2 = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = ...
-
-const selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  selectColumnStyle: ({
-    checked,
-    disabled,
-    rowIndex,
-    rowKey
-  }) => {
-    if (checked) {
-      return {
-        backgroundColor: 'yellow'
-      };
-    }
-    return {
-      backgroundColor: 'pink'
-    };
-  }
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
-    <Code>{ sourceCode1 }</Code>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
-    <Code>{ sourceCode2 }</Code>
-  </div>
-);