20191207 release

This is a proposed rewrite of the about page

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["react", "es2015", "stage-0"]
-}

.eslintrc

@@ -1,27 +0,0 @@
-{
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "jest": true,
-    "node": true
-  },
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    "comma-dangle": ["error", "never"],
-    "react/jsx-curly-spacing": [2, "always"],
-    "react/forbid-prop-types": 0,
-    "react/jsx-filename-extension": 0,
-    "react/jsx-space-before-closing": 0,
-    "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
-    "import/extensions": 0, // skip import extensions
-    "import/no-unresolved": [0, { "ignore": ["^react-bootstrap-table"] }], // monorepo setup
-    "import/prefer-default-export": 0,
-    "import/no-extraneous-dependencies": 0
-  },
-  "globals": {
-    "jest": false
-  }
-}

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

.gitignore

@@ -1,24 +0,0 @@
-# node
-node_modules
-package-lock.json
-
-# testing
-coverage
-.eslintcache
-
-# misc
-.DS_Store
-.vscode
-
-# logs
-lerna-debug.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# gh-pages
-storybook-static
-
-# build
-lib
-dist

.npmignore

@@ -1,7 +0,0 @@
-node_modules
-.DS_Store
-*~
-*.sublime-project
-*.sublime-workspace
-*.idea
-*.iml

CONTRIBUTING.md

@@ -1,23 +0,0 @@
-# Contributing
-
-# Issues
-Before opening an issue, please make sure your problem or request doesn't exist. When opening an issue, please provide the following information if possible:
-
-* Example code or repo (please keep it simple and minimal)
-* Steps to reproduce.
-* `react-bootstrap-table2` version.
-
-Additionally, asking questions and requesting new features are welcomed via [issue tracker](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues).
-
-# Pull Requests
-Check [here](./docs/development.md) for getting started with development.
-
-* PR base is `develop` branch
-* We recommend filing an [issue](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues) before you implement any new features.
-* Please ensure that all the test suites have passed before submitting a PR. Besides, always test the actual business logic.
-* If your PR is trying to fix a bug, please describe the details as much as you could and tag the bug number with hashtag.
-
-# For the members of react-bootstrap-table2 org
-* Please convert the ticket to issue when the ticket has moved from `Backlog` to `Ready`.
-* Please update the docs if any API, feature or component props was changed or added. The code and docs should always be in sync.
-* Please add a story example if any new feature was implemented.

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 react-bootstrap-table2
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,52 +0,0 @@
-# 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)
-
-> 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` separates some functionalities from its core modules to other modules as listed in the following:
-
-- [`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-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-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
-- [`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).
-
-## Migration
-
-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).
-
-## Development
-
-Please check the [development guide](./docs/development.md).
-
-## 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
-
-```
-
-**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)**

_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-cayman

docs/about.md

@@ -0,0 +1,18 @@
+---
+id: about
+title: react-bootstrap-table2
+sidebar_label: About
+---
+
+[`react-bootstrap-table2`](https://github.com/react-bootstrap-table/react-bootstrap-table2) is next generation of [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table). We rebuilt it to make it better and easier to use. Following is our mission:
+
+* Refactor core module and make challenges possible
+* More customizable table
+* Reduce bugs and bundled size
+* Solve performance issues
+* Improve the [`remote`](https://allenfang.github.io/react-bootstrap-table/docs.html#remote) mode
+* Improve handling of DOM events
+* Support nested data
+* Support table footer
+
+> Due to `react-bootstrap-table2` already being taken on npm our npm module name is **`react-bootstrap-table-next`**. Anyway, we still use and mention `react-bootstrap-table2` in any of our git repositories, offical website and documents, only the npm name is different!

docs/basic-celledit.md

@@ -1,10 +1,13 @@
-# react-bootstrap-table2-editor
+---
+id: basic-celledit
+title: Cell Edit
+sidebar_label: Cell Edit
+---
 
 `react-bootstrap-table2` separate the cell edit code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so there's a little bit different when you use cell edit than `react-bootstrap-table`. In the following, we are going to show you how to enable the cell edit
 
-**[Live Demo For Cell Edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing)**
+**[Live Demo For Cell Edit](../storybook/index.html?selectedKind=Cell%20Editing)**   
-
+**[API & Props Definition](./cell-edit-props.html)**
-**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html)**
 
 -----
 
@@ -16,7 +19,7 @@ $ npm install react-bootstrap-table2-editor --save
 
 ## How
 
-We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as editing cell:
+We have [two ways](./cell-edit-props.html#celleditmode-string) to trigger a editable cell as editing cell:
 
 * click
 * dbclick
@@ -39,27 +42,26 @@ import cellEditFactory from 'react-bootstrap-table2-editor';
 How user save their new editings? We offer two ways:
 
 * Press ENTER(**default**)
-* Blur from current editing cell(Need to enable the [cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool))
+* Blur from current editing cell(Need to enable the [cellEdit.blurToSave](./cell-edit-props.html#celleditblurtosave-bool))
 
 ## Editable Cell
 `react-bootstrap-table2` support you to configure the cell editable on three level:
 
-* Row Level ([cellEdit.nonEditableRows](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditnoneditablerows-function))
+* Row Level ([cellEdit.nonEditableRows](./cell-edit-props.html#celleditnoneditablerows-function))
-* Column Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value)
+* Column Level (Configure [column.editable](./column-props.html#columneditable-bool-function) as bool value)
-* Cell Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function)
+* Cell Level (Configure [column.editable](./column-props.html#columneditable-bool-function) as a callback function)
 
 ## Validation
 
-[column.validator](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it!
+[`column.validator`](./column-props.html#columnvalidator-function) will help you to work on it!
+
+
 ## Customize Style/Class
-### Editing Cell
 
-* Customize the editing cell style via [column.editCellStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditcellstyle-object-function)
+* Customize the editing cell style via [column.editCellStyle](./column-props.html#columneditcellstyle-object-function)
-* Customize the editing cell classname via [column.editCellClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditcellclasses-string-function)
+* Customize the editing cell classname via [column.editCellClasses](./column-props.html#columneditcellclasses-string-function)
-
+* Customize the editor style via [column.editorStyle](./column-props.html#columneditorstyle-object-function)
-### Editor
+* Customize the editor classname via [column.editoClasses](./column-props.html#columneditorclasses-string-function)
-* Customize the editor style via [column.editorStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorstyle-object-function)
-* Customize the editor classname via [column.editoClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function)
 
 ## Rich Editors
 `react-bootstrap-table2` have following predefined editor:
@@ -133,34 +135,36 @@ There are two case for `getOptions`:
 
 ```js
 // Synchronous
-
+ const columns = [
-const columns = [
   ..., {
   dataField: 'type',
   text: 'Job Type',
   editor: {
     type: Type.SELECT,
-    getOptions: (setOptions, { row, column }) => [.....]
+    getOptions: () => [.....]
   }
 }];
 
 // Asynchronous
-
+ const columns = [
-const columns = [
   ..., {
   dataField: 'type',
   text: 'Job Type',
   editor: {
     type: Type.SELECT,
-    getOptions: (setOptions, { row, column }) => {
+    getOptions: (setOptions) => {
       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.
+
+`getOptions` have two arguments:
+
+* `setOptions`: call it when you are ready to set the options asynchronous.
+* `params`: An object which have `row` and `column` for current editing cell.
+
 
 ### Date Editor
 Date editor is use `<input type="date">`, the configuration is very simple:
@@ -216,16 +220,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 {

docs/basic-column-toggle.md

@@ -0,0 +1,123 @@
+---
+id: basic-column-toggle
+title: Column Toggle
+sidebar_label: Column Toggle
+---
+
+`react-bootstrap-table2` support a toggle list for user to toggle the column visibility.
+
+**[Live Demo For Column Toggle](../storybook/index.html?selectedKind=Column%20Toggle)**  
+
+-----
+
+## Prepare
+
+Please check [How to start with table toolkit](./toolkits-getting-started.html)
+
+
+## Enable Column Toggle
+
+```js
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+//...
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+1. Enable column toggle via `columnToggle` prop on `ToolkitProvider`.
+
+2. `ToolkitProvider` is a wrapper of react context, you should wrap the `BootstrapTable` and `ToggleList` as the child of `ToolkitProvider`.
+
+3. Rendering `ToggleList` with `columnToggleProps`. The position of `ToggleList` is depends on you.
+
+
+## Customize ToggleList Component
+
+So far we only have limited customization on `ToggleList` component, following props is available for you:
+
+* `btnClassName`: Add custom class on toggle button.
+* `className`: Add custom class on toggle list.
+* `contextual`: config bootstrap contextual, default is `primary`.
+
+However, you can custom the whole thing by yourself like following:
+
+```js
+// This is my custom column toggle component
+
+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 const MyTable = () => (
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columnsdt }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <CustomToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+);
+```
+
+Following, we just explain how it work:   
+
+`ToolkitProvider` will pass a props which have a property called `columnToggleProps`. `columnToggleProps` have following properties: 
+
+* `columns`: Column list
+* `toggles`: An object which describe current column visibilities. `true` is on and `false` is off.
+* `onColumnToggle`: Call this method when user toggle a column.
+

docs/basic-column.md

@@ -0,0 +1,41 @@
+---
+id: basic-column
+title: Work on Column
+sidebar_label: Work on Column
+---
+
+Firstly, legacy `react-bootstrap-table` is hard to customize the DOM Event, Attributes on column or header column. In the `react-bootstrap-table2`, we make those bad design become more easy and flexible.
+
+**[Live Demo For Column](../storybook/index.html?selectedKind=Work%20on%20Columns)**   
+**[Live Demo For Header Column](../storybook/index.html?selectedKind=Work%20on%20Header%20Columns)**   
+**[API & Props Definition](./column-props.html)**
+
+-----
+
+## Formatting Table Column
+
+[`column.formatter`](./column-props.html#columnformatter-function) is a good chance for you to customize the cell. If you just want to add some styling, attributes or DOM event linstener, `react-bootstrap-table2` have respective props to handle:
+
+* [`column.style`](./column-props.html#columnstyle-object-function)
+* [`column.classes`](./column-props.html#columnclasses-string-function)
+* [`column.events`](./column-props.html#columnevents-object)
+* [`column.attrs`](./column-props.html#columnattrs-object-function)
+
+In addition, we also give some useful props to let you have a quickly configuration:
+
+* [`column.hidden`](./column-props.html#columnhidden-bool)
+* [`column.title`](./column-props.html#columntitle-bool-function)
+* [`column.align`](./column-props.html#columnalign-string-function)
+* *Welcome to submit a PR or issue for asking a convinence props for column :)*
+
+## Formatting Table Header
+Formatting header column is almost same as column formatting, we got [`column.headerFormatter`](./column-props.html#columnheaderformatter-function) to let you customize the content of a header column. Default `react-bootstrap-table2` will take [`column.text`](./column-props.html#columntext-required-string) as the content of header column.
+
+Following, we list some useful props for customization:
+
+* [`column.headerStyle`](./column-props.html#columnheaderstyle-object-function)
+* [`column.headerClasses`](./column-props.html#columnheaderclasses-string-function)
+* [`column.headerEvents`](./column-props.html#columnheaderevents-object)
+* [`column.headerAttrs`](./column-props.html#columnheaderattrs-object-function)
+* [`column.headerTitle`](./column-props.html#columnheadertitle-bool-function)
+* [`column.headerAlign`](./column-props.html#columnheaderalign-string-function)

docs/basic-export-csv.md

@@ -0,0 +1,110 @@
+---
+id: basic-export-csv
+title: Export to CSV
+sidebar_label: Export to CSV
+---
+
+`react-bootstrap-table2` support export table data to CSV.
+
+**[Live Demo For CSV Export](../storybook/index.html?selectedKind=Export%20CSV)**   
+**[API & Props Definition](./export-csv-props.html)**   
+
+-----
+
+## Prepare
+
+Please check [How to start with table toolkit](./toolkits-getting-started.html)
+
+
+## Enable Export CSV
+
+```js
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+* Give [`exportCSV`](./export-csv-props.html) prop as `true` on `ToolkitProvider`.
+* Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
+
+
+## Customize Export CSV Component
+
+`ExportCSVButton` is a independent component, it's free to place this component in anywhere, just make sure it is inside of the `ToolkitProvider`.   
+You can add any `style` and `className` prop on `ExportCSVButton` for styling it.   
+
+However, if you feel `ExportCSVButton` can not fit your requirement or you want more customization, you can create your own button like following:
+
+```js
+// This is my custom csv export component
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    props.onExport();
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Click me to export CSV</button>
+    </div>
+  );
+};
+
+export const MyTable = () => (
+  <ToolkitProvider
+    keyField="id"
+    data={ products }
+    columns={ columns }
+    exportCSV
+  >
+    {
+      props => (
+        <div>
+          <BootstrapTable { ...props.baseProps } />
+          <hr />
+          <MyExportCSV { ...props.csvProps } />
+        </div>
+      )
+    }
+  </ToolkitProvider>
+);
+
+```
+
+Following, we just explain how it work:   
+
+`ToolkitProvider` will pass a props which have a property called `csvProps`. `csvProps` have following properties: 
+
+* `onExport`: Call this method will trigger export CSV.
+
+
+In the customization case, you just need to pass `csvProps` to your component and call `csvProps.onExport` when export action trigger.
+
+## Customize CSV Content
+
+* Configure [column.csvExport](./column-props.html#columncsvExport-bool) to decide if hiden a column when exporting CSV.
+* Configure [column.csvType](./column-props.html#columncsvType-object) to decide the data type.
+* Configure [column.csvFormatter](./column-props.html#columncsvFormatter-function) to customize the column when exporting CSV.
+* Configure [column.csvText](./column-props.html#columncsvText-string) to customize the column header.
+
+
+## CSV Configuration
+
+Please see available [`exportCSV`](./export-csv-props.html) props.
+
+

docs/basic-filter.md

@@ -1,10 +1,13 @@
-# react-bootstrap-table2-filter
+---
+id: basic-filter
+title: Column Filter
+sidebar_label: Column Filter
+---
 
 `react-bootstrap-table2` separate the filter core code base to [`react-bootstrap-table2-filter`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter), so there's a little bit different when you use column filter than `react-bootstrap-table`. In the following, we are going to show you how to enable the column filter:
 
-**[Live Demo For Column Filter](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/gh-pages-src/storybook/index.html?selectedKind=Column%20Filter)**
+**[Live Demo For Column Filter](../storybook/index.html?selectedKind=Column%20Filter)**   
-
+**[API & Props Definition](./filter-props.html)**
-**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html)**
 
 -----
 
@@ -14,6 +17,16 @@
 $ npm install react-bootstrap-table2-filter --save
 ```
 
+## Add CSS
+
+```js
+// es5 
+require('react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css');
+
+// es6
+import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
+```
+
 You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
 
 * TextFilter
@@ -24,16 +37,6 @@ You can get all types of filters via import and these filters are a factory func
 * CustomFilter
 * **Coming soon!**
 
-## Add CSS
-
-```js
-// es5 
-require('react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css');
-
-// es6
-import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
-```
-
 ## Text Filter
 Following is a quick demo for enable the column filter on **Product Price** column!!
 
@@ -64,7 +67,8 @@ const priceFilter = textFilter({
   comparator: Comparator.EQ, // default is Comparator.LIKE
   caseSensitive: true, // default is false, and true will only work when comparator is LIKE
   style: { ... }, // your custom styles on input
-  delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
+  delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
+  getFilter: (f) => { ... } // accept callback function and you can call it for filter programmtically
 });
 
 // omit...
@@ -108,14 +112,16 @@ const qualityFilter = selectFilter({
   className: 'my-custom-text-filter', // custom classname on input
   defaultValue: '2', // default filtering value
   comparator: Comparator.LIKE, // default is Comparator.EQ
+  caseSensitive: false, // default is true
   style: { ... }, // your custom styles on input
-  withoutEmptyOption: true  // hide the default select option
+  withoutEmptyOption: true,  // hide the default select option
+  getFilter: (f) => { ... } // accept callback function and you can call it for filter programmtically
 });
 
 // omit...
 ```
 
-> Note, the selectOptions can be an array or a function which return an array: 
+> Note, the `selectOptions` can be an array or a function as well: 
 
 ### Array as options
 
@@ -135,6 +141,7 @@ const columns = [
   })
 }];
 ```
+
 ### Function as options
 
 ```js
@@ -156,9 +163,10 @@ const columns = [
 
 The benifit is `react-bootstrap-table2` will render the select options by the order of array.
 
+
 ## MultiSelect Filter
 
-A quick example: 
+Multi-select filter is almost same as regular select filterfilter : 
 
 ```js
 import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
@@ -183,7 +191,7 @@ const columns = [
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
-Following is an example for custom select filter:
+Following is an example for custom multi-select filter:
 
 ```js
 import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter';
@@ -219,7 +227,7 @@ const columns = [..., {
 Numner filter is same as other filter, you can custom the number filter via `numberFilter` factory function:
 
 ```js
-import filterFactory, { selectFilter, Comparator, numberFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
 // omit...
 
 const numberFilter = numberFilter({
@@ -235,7 +243,8 @@ const numberFilter = numberFilter({
   comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
   numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on number input/select
   numberClassName: 'custom-number-class',  // custom the class on ber input/select
-  defaultValue: { number: 2103, comparator: Comparator.GT }  // default value
+  defaultValue: { number: 2103, comparator: Comparator.GT },  // default value
+  getFilter: (f) => { ... } // accept callback function and you can call it for filter programmtically
 })
 
 // omit...
@@ -255,7 +264,7 @@ const columns = [..., {
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
-> **Notes:** date filter accept a Javascript Date object in your raw data and you have to use `column.formatter` to make it as your prefer string result
+> **Notes:** date filter accept a Javascript Date object in your raw data and you have to use `column.formatter` to make it as your prefer string result.
 
 Date filter is same as other filter, you can custom the date filter via `dateFilter` factory function:
 
@@ -275,7 +284,7 @@ const dateFilter = dateFilter({
   dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
   dateClassName: 'custom-date-class',  // custom the class on date input
   defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
-})
+});
 
 // omit...
 ```
@@ -309,50 +318,64 @@ In the end, please remember to return your custom filter element!
 
 ### customFilter
 
-`customFilter` function just same as `textFilter`, `selectFilter` etc, it is for customization reason. However, in the custom filter case, there's only one props is valid: `type`
+`customFilter` function just same as `textFilter`, `selectFilter` etc, it is for customization reason. However, in the custom filter case, there're only few props are valid:
 
 
 ```js
-import filterFactory, { FILTER_TYPES } from 'react-bootstrap-table2-filter';
+import filterFactory, { FILTER_TYPES, Comparator } from 'react-bootstrap-table2-filter';
 
 const customFilter = customFilter({
   type: FILTER_TYPES.NUMBER,  // default is FILTER_TYPES.TEXT
+  comparator: Comparator.EQ, // only work if type is FILTER_TYPES.SELECT
+  caseSensitive: false, // default is true
 })
 ```
 
-`type` is a way to ask `react-bootstrap-table` to filter you data as number, select, date or normal text.
+<hr />
 
-### FILTER_TYPES
+## Programmatically Filter
 
-Following properties is valid in `FILTER_TYPES`:
+`react-bootstrap-table2` allow you to control filter externally, which means user no need to type something on filter!!
-* TEXT
-* SELECT
-* NUMBER
-* DATE
-* MULTISELECT
 
-### Position
+### How
-Default filter is rendered inside the table column header, but you can choose to render them as a row by `filterPosition`:
+All the filters have a `getFilter` prop which accept a callback function and pass a filter object to you.
-
-#### Render in the top of table body
 
 ```js
-<BootstrapTable
+class Table extends Components {
-  keyField='id'
+  constructor(props) {
-  data={ products }
+    super(props);
-  columns={ columns }
+    this.filterPrice = this.filterPrice.bind(this);
-  filter={ filterFactory() }
+    const columns = [
-  filterPosition="top"
+      ..., {
-/>
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        // preserve filter instance
+        getFilter: (filter) => this.priceFilter = filter;
+      })
+    }];
+  }
+
+  filterPrice() {
+    // call it anywhere when you want!!
+    this.priceFilter(100);
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={ this.filterPrice }>Click to filter</button>
+        <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+      </div>
+    );
+  }
+}
+
 ```
 
-#### Render in the bottom of table body
+### Examples
-```js
+* [Example For Programmtically Text Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Text%20Filter%20)
-<BootstrapTable
+* [Example For Programmtically Select Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Select%20Filter%20)  
-  keyField='id'
+* [Example For Programmtically MultiSelect Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Multi%20Select%20Filter)  
-  data={ products }
+* [Example For Programmtically Number Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Number%20Filter%20)
-  columns={ columns }
+* [Example For Programmtically Date Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%Date%20Filter%20)
-  filter={ filterFactory() }
-  filterPosition="bottom"
-/>
-```

docs/basic-pagination.md

@@ -1,10 +1,13 @@
-# react-bootstrap-table2-paginator
+---
+id: basic-pagination
+title: Pagination
+sidebar_label: Pagination
+---
 
-`react-bootstrap-table2` separate the pagination code base to [`react-bootstrap-table2-paginator`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator), so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table
+`react-bootstrap-table2` separate the pagination code base to [`react-bootstrap-table2-pagination`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator), so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table
 
-**[Live Demo For Pagination](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination)**
+**[Live Demo For Pagination](../storybook/index.html?selectedKind=Pagination)**   
-
+**[API & Props Definition](./pagination-props.html)**
-**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
 
 -----
 
@@ -13,7 +16,6 @@
 ```sh
 $ npm install react-bootstrap-table2-paginator --save
 ```
-
 ## Add CSS
 
 ```js
@@ -41,21 +43,21 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
 
 `react-bootstrap-table2` give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization:
 
-* [paginationSize](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationsize-number)
+* [paginationSize](./pagination-props.html#paginationpaginationsize-number)
-* [sizePerPageList](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagelist-array)
+* [sizePerPageList](./pagination-props.html#paginationsizeperpagelist-array)
-* [withFirstAndLast](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationwithfirstandlast-bool)
+* [withFirstAndLast](./pagination-props.html#paginationwithfirstandlast-bool)
-* [alwaysShowAllBtns](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationalwaysshowallbtns-bool)
+* [alwaysShowAllBtns](./pagination-props.html#paginationalwaysshowallbtns-bool)
-* [firstPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetext-any)
+* [firstPageText](./pagination-props.html#paginationfirstpagetext-any)
-* [prePageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetext-any)
+* [prePageText](./pagination-props.html#paginationprepagetext-any)
-* [nextPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetext-any)
+* [nextPageText](./pagination-props.html#paginationnextpagetext-any)
-* [lastPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetext-any)
+* [lastPageText](./pagination-props.html#paginationlastpagetext-any)
-* [firstPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetitle-any)
+* [firstPageTitle](./pagination-props.html#paginationfirstpagetitle-any)
-* [prePageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetitle-any)
+* [prePageTitle](./pagination-props.html#paginationprepagetitle-any)
-* [nextPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetitle-any)
+* [nextPageTitle](./pagination-props.html#paginationnextpagetitle-any)
-* [lastPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetitle-any)
+* [lastPageTitle](./pagination-props.html#paginationlastpagetitle-any)
-* [hideSizePerPage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidesizeperpage-bool)
+* [hideSizePerPage](./pagination-props.html#paginationhidesizeperpage-bool)
-* [hidePageListOnlyOnePage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidepagelistonlyonepage-bool)
+* [hidePageListOnlyOnePage](./pagination-props.html#paginationhidepagelistonlyonepage-bool)
-* [showTotal](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationshowtotal-bool)
+* [showTotal](./pagination-props.html#paginationshowtotal-bool)
 
 You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage.
 
@@ -63,20 +65,20 @@ You can check [this online demo](https://react-bootstrap-table.github.io/react-b
 
 Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination:
 
-* [pageListRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagelistrenderer-function)
+* [pageListRenderer](./pagination-props.html#paginationpagelistrenderer-function)
-* [pageButtonRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagebuttonrenderer-function)
+* [pageButtonRenderer](./pagination-props.html#paginationpagebuttonrenderer-function)
-* [sizePerPageRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagerenderer-function)
+* [sizePerPageRenderer](./pagination-props.html#paginationsizeperpagerenderer-function)
-* [sizePerPageOptionRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpageoptionrenderer-function)
+* [sizePerPageOptionRenderer](./pagination-props.html#paginationsizeperpageoptionrenderer-function)
-* [paginationTotalRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationtotalrenderer-function)
+* [paginationTotalRenderer](./pagination-props.html#paginationpaginationtotalrenderer-function)
 
-### Fully Customization
+### Completely Customization
 
-If you want to customize the pagination component completely, you may get interesting on following solutions:
+If you want to customize the pagination component completely, you may get interesting on following solution:
 
 * Standalone
 * Non-standalone
 
-`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and that will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
 
 #### 1. Import PaginationProvider
 
@@ -98,7 +100,7 @@ const paginationOption = {
 
 ```js
 <PaginationProvider
-  pagination={ paginationFactory(options) }
+  pagination={ paginationFactory(paginationOption) }
 >
   {
     ({
@@ -111,15 +113,15 @@ const paginationOption = {
 </PaginationProvider>
 ```
 
-`PaginationProvider` actually is a wrapper for the concumser of react context, so that now you have to get the props from context provide then render to your compoennt and `BootstrapTable`:
+`PaginationProvider` actually is a wrapper for the consumer of react context so that you are able to get the props from context then render to your compoennt and `BootstrapTable`:
 
 * `paginationProps`: this include everything about pagination, you will use it when you render standalone component or your custom component.
-* `paginationTableProps`: you don't need to know about this, but you have to render this as props to `BootstrapTable`.
+* `paginationTableProps`: you don't need to know about this, but you have to give it as props when render `BootstrapTable`.
 
-So far, your customization pagination is supposed to look like it:
+So far, your customization pagination should look like it:
 ```js
 <PaginationProvider
-  pagination={ paginationFactory(options) }
+  pagination={ paginationFactory(paginationOption) }
 >
   {
     ({
@@ -139,12 +141,14 @@ So far, your customization pagination is supposed to look like it:
 </PaginationProvider>
 ```
 
-Now, you have to choose which solution you like: standalone or non-standalone ?
+Now, you have two choices
+* Use Standalone Component
+* Customize everything by yourself
 
 #### 4.1 Use Standalone Component
 `react-bootstrap-table2-paginator` provider three standalone components:
 
-* Size Per Page Dropdwn Standalone
+* Size Per Page Dropdown Standalone
 * Pagination List Standalone
 * Pagination Total Standalone
 
@@ -154,8 +158,8 @@ When render each standalone, you just need to pass the `paginationProps` props t
 import paginationFactory, {
   PaginationProvider,
   PaginationListStandalone,
-  SizePerPageDropdownStandalone,
+  PaginationTotalStandalone,
-  PaginationTotalStandalone
+  SizePerPageDropdownStandalone
 } from 'react-bootstrap-table2-paginator';
 
 <PaginationProvider
@@ -188,24 +192,26 @@ import paginationFactory, {
 </PaginationProvider>
 ```
 
-That's it!!  The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
+That's it!!  The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.    
 
-##### Customizable props for `PaginationListStandalone`
+
+<h5><b>Customizable props on `PaginationListStandalone`</b></h5>
 * N/A
 
-##### Customizable props for `SizePerPageDropdownStandalone`
+<h5><b>Customizable props on `SizePerPageDropdownStandalone`</b></h5>
-* `open`: `true` to make dropdown show.
+* `open`: <b>true</b> to make dropdown show.
-* `hidden`: `true` to hide the size per page dropdown.
+* `hidden`: <b>true</b> to hide the size per page dropdown.
-* `btnContextual`: Set the button contextual
+* `btnContextual`: Set the button contextual.
 * `variation`: Variation for dropdown, available value is `dropdown` and `dropup`.
 * `className`: Custom the class on size per page dropdown
 
-##### Customizable props for `SizePerPageDropdownStandalone`
+<h5><b>Customizable props on `SizePerPageDropdownStandalone`</b></h5>
 * N/A
 
+
 #### 4.2 Customization Everything
 
-If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:
+If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Therefore, following is all the props in `paginationProps` object:
 
 ```js
 page,
@@ -236,11 +242,11 @@ onPageChange,
 onSizePerPageChange
 ```
 
-In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important things for developer.
+In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important properties for you:
 
 * `page`: Current page.
 * `sizePerPage`: Current size per page.
 * `onPageChange`: Call it when you nede to change page. This function accept one number argument which indicate the new page 
 * `onSizePerPageChange`: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page
 
-[Here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Fully%20Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) is a online example.
+[This](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Fully%20Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) is a online example for showing how to custom pagination completely.

docs/basic-remote.md

@@ -0,0 +1,35 @@
+---
+id: basic-remote
+title: Remote Table
+sidebar_label: Work on Remote
+---
+
+## What is Remote
+
+By default, `react-bootstrap-table2` always handle the data changes internally, such as sorting, paging, filtering etc. However, you may want to handle those logic or sync up to backend or Redux store so that `remote` can help you on it as well.
+
+**[Live Demo for Remote Table](../storybook/index.html?selectedKind=Remote)**   
+
+-----
+
+## How
+Make sure you already see [`remote`](./table-props.html#remote-bool-object) props on `BootstrapTable` firstly. In the beginning, you can assign `true` to enable the remote mode on table but few people doing like that, because it will enable all the functionalities(sort, filter etc) become `remote` mode.
+
+In the most of case, you probably only need some functionalites handled on the remote, so `remote` allow you to pass an object to control it.
+
+## Table/Data Change
+It's the key point that you need to know something changed so that you can handle your data or logic externally. In the `remote` mode, you are supposed to give [`onTableChange`](./table-props.html#ontablechange-function) on `BootstrapTable` and it will being called when table have any changes if you enable the `remote` mode.
+
+> All the changes are go though `onTableChange` listener,
+> it's only way that table give fully control to you
+
+Please read [`onTableChange`](./table-props.html#ontablechange-function) docs to understand how to leverage it.
+
+## Remote Pagination
+Pagination remote is a particular case in `react-bootstrap-table2`. If you enable the pagination remote mode, `react-bootstrap-table2` will not handle **sort** and **filter** internally, instead your application is supposed to handle it in the remote way.   
+
+Because, **sort** and **filter** need to work on overall data. In the remote pagination, `react-bootstrap-table2` doesn't know all the data, only have the data on current page. So that's why you need to handle the remote filtering or sorting also.   
+
+You can see [this](../storybook/index.html?selectedKind=Remote&selectedStory=Remote%20All) example to see how it work for above case.   
+
+A good news is we are consider to easing this limitation through partial sorting/filtering on current page.

docs/basic-row-expand.md

@@ -0,0 +1,67 @@
+---
+id: basic-row-expand
+title: Expandable Row
+sidebar_label: Expandable Row
+---
+
+**[Live Demo For Row Expand](../storybook/index.html?selectedKind=Row%20Expand)**   
+**[API & Props Definition](./row-expand-props.html)**
+
+-----
+
+## Expand Mode
+
+`react-bootstrap-table2` allow support click to expand or collapse a row. When you enable row expandable functionality, you have to give [`expandRow.renderer`](./row-expand-props.html#expandrowrenderer-function) to tell what kind of context you want to render in the expanding content, for example: 
+
+```js
+const expandRow = {
+  renderer: row => (
+    <div>....</div>
+  )
+};
+
+// omit...
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+
+```
+
+## Expand Management
+Please check [`expandRow.expanded`](./row-expand-props.html#expandrowexpanded-array), it's used for default expanding usually but also can be used as a external expandation control.   
+
+This is an example for [manage on expands](../storybook/index.html?selectedKind=Row%20Expand&selectedStory=Expand%20Management)
+
+## Customization
+
+### Style/Class
+`expandRow.renderer` allow you to render everything in the content of expanding row. You can custom the style or class by yourself. However, a expand row is wrapped by a HTML `tr` element(Parent row). Currently, we support following way to custom the class/style on parent row element:
+
+* For the class of parent row: [`expandRow.parentClassName`](./row-expand-props.html#expandrowparentclassname-string-function)
+* For the style of parent row: N/A
+
+In addition, the way to custom the class/style on expanding row element:
+* For the class of expanding row: [`expandRow.className`](./row-expand-props.html#expandrowclassname-string-function)
+* For the style of expanding row: N/A
+
+
+### Expand Column
+`react-bootstrap-table2` default doesn't render a additional indicator column, just like row selection. But if you want it, you can enable it via [`expandRow.showExpandColumn`](./row-expand-props.html#expandrowshowexpandcolumn-bool)
+
+In addition, we allow you to custom the expand columns in following ways:
+
+* For header cell: [`expandRow.expandHeaderColumnRenderer`](row-expand-props.html#expandrowexpandheadercolumnrenderer-function)
+* For normal cell: [`expandRow.expandColumnRenderer`](./row-expand-props.html#expandrowexpandcolumnrenderer-function)
+
+
+You can render expand column at the right side of table via [`expandRow.expandColumnPosition`](./row-expand-props.html#expandrowexpandcolumnposition-string).
+
+
+## Event Listening
+
+* [`expandRow.onExpand`](./row-expand-props.html#expandrowonexpand-function) allow you to listen a row is expand or collapse. 
+* [`expandRow.onExpandAll`](./row-expand-props.html#expandrowonexpandall-function) for listening the expand/collapse all event.

docs/basic-row-select.md

@@ -0,0 +1,62 @@
+---
+id: basic-row-select
+title: Row Selection
+sidebar_label: Row Selection
+---
+
+For the table row selection functionality, the usage is almost same as `react-bootstrap-table`. If you are a user from legacy `react-bootstrap-table`, you can consider to skip this part.
+
+**[Live Demo For Row Selection](../storybook/index.html?selectedKind=Row%20Selection)**   
+**[API & Props Definition](./row-select-props.html)**
+
+-----
+
+## Selection Mode
+
+We support the single and multiple selection on table, config the [`selectRow.mode`](./row-select-props.html#selectrowmode-string) on `BootstrapTable` will enable the selection on the table.
+
+By default behavior, user need to click on the selection column or the checkbox/radio to select/unselect a row, for a user experience perspective, we have [`selectoRow.clickToSelect`](./row-select-props.html#selectrowclicktoselect-bool) to allow user to select/unselect row by clicking on the row.
+
+## Selection Management
+Please check [`selectoRow.selected`](./row-select-props.html#selectrowselected-array), it's used for default selection usually but also can be used as a external selection control.   
+
+This is an example for [selection management](../storybook/index.html?selectedKind=Row%20Selection&selectedStory=Selection%20Management).   
+
+
+In addition, this is another example for [selection management](../storybook/index.html?selectedKind=Row%20Selection&selectedStory=Advance%20Selection%20Management)
+
+## Customization
+
+
+### Style/Class
+Like column, we support to custom the style, class on the selecting row easily via following `selectRow` props:
+
+* [`selectRow.bgColor`](row-select-props.html#selectrowbgcolor-string-function)
+* [`selectRow.style`](./row-select-props.html#selectrowstyle-object-function)
+* [`selectRow.classes`](./row-select-props.html#selectrowclasses-string-function)
+
+If you configure some specific rows as non-selectable, you can also custom them via:
+
+* [`selectRow.nonSelectableStyle`](./row-select-props.html#selectrownonselectablestyle-object-function)
+* [`selectRow.nonSelectableClasses`](./row-select-props.html#selectrownonselectableclasses-string-function)
+
+### Selection Column
+
+* For Custom header cell: [`selectRow.selectionRenderer`](./row-select-props.html#selectrowselectionrenderer-function)
+* For Custom normal cell: [`selectRow.selectionHeaderRenderer`](./row-select-props.html#selectrowselectionheaderrenderer-function)
+* For Custom header cell style: [`selectRow.headerColumnStyle`](./row-select-props.html#selectrowheadercolumnstyle-object-function)
+* For Custom normal cell style: [`selectRow.selectColumnStyle`](./row-select-props.html#selectrowselectcolumnstyle-object-function)
+
+### Position
+Default we render selection column in the left side of table, you can use [`selectRow.selectColumnPosition`](./row-select-props.html#selectrowselectcolumnposition-string) to make it on the right.
+
+<br/>
+
+In addition, `react-bootstrap-table2` offer below props to hide selection column:
+
+* [`selectRow.hideSelectColumn`](./row-select-props.html#selectrowhideselectcolumn-bool): Hide the selection column.
+* [`selectRow.hideSelectAll`](./row-select-props.html#selectrowhideselectall-bool): Hide the select all checkbox in the selection header cell.
+
+## Event Listening
+
+[`selectRow.onSelect`](./row-select-props.html#selectrowonselect-function) allow you to listen a row is select or unselect. For the multiple selection, we also have [`selectRow.onSelectAll`](./selectrowonselectall-function) to listen the select/unselect all event.

docs/basic-row.md

@@ -0,0 +1,43 @@
+---
+id: basic-row
+title: Work on Row
+sidebar_label: Work on Row
+---
+
+`react-bootstrap-table2` allow you to custom the row style/class/attributes and event on row(`tr`)
+
+**[Live Demo For Rows](../storybook/index.html?selectedKind=Work%20on%20Rows)**   
+
+-----
+
+## Row Style/Class
+
+* [rowStyle](./table-props.html#rowstyle-object-function)
+* [rowClasses](./table-props.html#rowclasses-string-function)
+
+## Row Events
+
+* [rowEvents](./table-props.html#rowevents-object)
+
+Currently, `react-bootstrap-table2` only wrapped up the following events to allow its callback to receive `row` and `rowIndex`, for example:
+
+* `onClick`
+* `onDoubleClick`
+* `onMouseEnter`
+* `onMouseLeave`
+* `onContextMenu`
+
+```js
+const rowEvents = {
+  onClick: (e, row, rowIndex) => {
+    ....
+  }
+};
+<BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
+```
+
+Anyway, it's welcome to ask us to add more wrapped events. 
+
+## Row Attributes
+
+**Coming Soon!**

docs/basic-search.md

@@ -0,0 +1,181 @@
+---
+id: basic-search
+title: Table Search
+sidebar_label: Table Search
+---
+
+`react-bootstrap-table2` support a table search function just like legacy search in `react-bootstrap-table`. However, new way will be more easier to custom.
+
+**[Live Demo For Table Search](../storybook/index.html?selectedKind=Table%20Search)**  
+**[API & Props Definition](./search-props.html)**   
+
+-----
+
+## Prepare
+
+Please check [How to start with table toolkit](./toolkits-getting-started.html)
+
+
+## Enable Search
+
+```js
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+//...
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+* Enable search via [`search`](./search-props.html) prop on `ToolkitProvider`.
+
+* `ToolkitProvider` is a wrapper of react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitProvider`.
+
+* You should render `SearchBar` with `searchProps` as well. The `SearchBar` position is depends on you.
+
+### `SearchBar` Props
+
+#### className - [string]
+Custom the class on input element.
+
+#### placeholder - [string]
+Custom the placeholder on input element.
+
+#### style - [object]
+Custom the style on input element.
+
+#### delay = [number]
+milionsecond for debounce user input.
+
+## Customize Search Component
+
+`SearchBar` is a independent component, it's free to place this component in anywhere, just make sure it is inside of the `ToolkitProvider`.   
+You can add any `style` and `className` prop on `SearchBar` for component styling
+
+In addition, following is some valid props on `SearchBar` component:
+
+* `delay`: How long should trigger search after user enter the search text, default is `250` ms.
+* placeholder: The placeholder on the input field, default is `Search`.
+
+However, if you feel `SearchBar` can not fit your requirement or you want more customization, you can create your own search bar like following:
+
+```js
+// This is my custom search component
+const MySearch = (props) => {
+  let input;
+  const handleClick = () => {
+    props.onSearch(input.value);
+  };
+  return (
+    <div>
+      <input
+        className="form-control"
+        style={ { backgroundColor: 'pink' } }
+        ref={ n => input = n }
+        type="text"
+      />
+      <button className="btn btn-warning" onClick={ handleClick }>Click to Search!!</button>
+    </div>
+  );
+};
+
+export const MyTable = () => (
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <MySearch { ...props.searchProps } />
+            <br />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+);
+```
+
+Following, we just explain how it work:   
+
+`ToolkitProvider` will pass a props which have a property called `searchProps`. `searchProps` have following properties: 
+
+* `onSearch`: Call this method with search text when you want to do the search.
+
+
+In the customization case, you just need to pass `searchProps` to your component and call `searchProps.onSearch` when search trigger.
+
+
+## Search on Formatted Data
+
+`react-bootstrap-table2` default is search on your raw data. If you define a [`column.formatter`](./column-props.html#columnformatter-function) on a column, sometime that will cause
+the search can't be performed accurately.
+
+Therefore, we support [`searchFormatted`](./search-props.html#searchsearchformatted-bool) to let search can work on the formatted data.
+
+## Customize the Search Value
+
+Sometime, you hope `react-bootstrap-table2` to search another value instead of raw data, you can use [`column.filterValue`](./column-props.html#columnfiltervalue-function).
+When table search on a specified column, will use the return value from `column.filterValue` for searching.
+
+
+```js
+..., {
+  dataField: 'type',
+  text: 'Job Type',
+  formatter: (cell, row) => types[cell],
+  filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
+}
+```
+
+## Clear Search Button
+We have a built-in clear search function which allow user to clear search status via clicking button:
+
+```js
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        ....
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+### Props
+* `className`: Add custom class name on clear search button.

docs/basic-sort.md

@@ -0,0 +1,84 @@
+---
+id: basic-sort
+title: Table Sort
+sidebar_label: Table Sort
+---
+
+`react-bootstrap-table2` allow you to configure columns to be sortable. Currently, we don't support the multi-column sort, but it will be implemented in the future.
+
+**[Live Demo For Table Sort](../storybook/index.html?selectedKind=Sort%20Table)**
+
+-----
+
+## Enable Sort on Column
+Firstly, you need to know what column you allow user to sort and give the [`sort`](./column-props.html#columnsort-bool) as `true` in the column definition.
+
+```js
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+```
+
+After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:
+![sort caret](/react-bootstrap-table2/img/docs/basic-sort-caret.png)
+
+## Control Sorting
+### Default Sort
+`react-bootstrap-table2` will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via [`defaultSorted`](./table-props.html#defaultsorted-array).
+
+### Sort Event Listener
+Defined [`onSort`](./column-props.html#columnonsort-function) on target column:
+
+```js
+{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true,
+  onSort: (field, order) => {
+    // ...
+  }
+}
+```
+
+### Manage Sorting Externally
+You can configure `sort` props and give `dataField` and `order` on `BootstrapTable` component to set the sorting state:
+Please refer [this](./table-props.html#sort-object) docs.
+
+Usually you will need it when you want to control the sorting state externally, like clicking on a button outside the table to force to sort a specified column.
+
+## Custom the Sorting Algorithm
+
+It's simple!! configure [`sortFunc`](./column-props.html#columnsortfunc-function) on column definition.
+
+```js
+{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+  // Perform a reverse sorting here
+  sortFunc: (a, b, order, dataField, rowA, rowB) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+}
+```
+
+## Custom the Sorting Style
+There're two way you can change or prettify the header when sorting: [`headerSortingClasses`](./column-props.html#headersortingclasses-string-function) and [`headerSortingStyle`](./column-props.html#headersortingstyle-object-function) 
+
+## Custom the Sort Caret
+
+See [`column.sortCaret`](./column-props.html#columnsortcaret-function).

docs/bootstrap4.md

@@ -0,0 +1,11 @@
+---
+id: bootstrap4
+title: Bootstrap 4
+sidebar_label: Bootstrap 4
+---
+
+## Bootstrap 3
+`react-bootstrap-table2` default support bootstrap 3.
+
+## Bootstrap 4
+Add [`bootstrap4`](./table-props.html#bootstrap4-bool) prop on `BootstrapTable` or `ToolkitProvider` to enable the Bootstrap 4.

docs/cell-edit-props.md

@@ -0,0 +1,104 @@
+---
+id: cell-edit-props
+title: Cell Editing Props
+---
+Following we list all props for `cellEditFactory` from [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor).
+
+```js
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const cellEdit = cellEditFactory({
+  mode: 'click',
+  ...
+});
+
+<BootstrapTable cellEdit={ cellEdit } ... />
+```
+
+
+## Required
+* [mode (**required**)](#celleditmode-string)
+
+## Optional
+* [blurToSave](#celleditblurtosave-bool)
+* [nonEditableRows](#celleditnoneditablerows-function)
+* [timeToCloseMessage](#celledittimetoclosemessage-function)
+* [autoSelectText](#celleditautoselecttext-bool)
+* [beforeSaveCell](#celleditbeforesavecell-function)
+* [afterSaveCell](#celleditaftersavecell-function)
+* [onStartEdit](#celleditonstartedit-function)
+* [errorMessage](#cellediterrormessage-string)
+* [onErrorMessageDisappear](#celleditonerrormessagedisappear-function)
+
+-----
+
+## cellEdit.mode - [String]
+`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing.
+
+## cellEdit.blurToSave - [Bool]
+Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
+
+## cellEdit.nonEditableRows - [Function]
+`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`)
+
+## cellEdit.timeToCloseMessage - [Function]
+If a [`column.validator`](./column-props.html#columnvalidator-function) 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.
+
+## cellEdit.autoSelectText - [Bool]
+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`.
+
+## cellEdit.beforeSaveCell - [Function]
+This callback function will be called before triggering cell update.
+
+```js
+const cellEdit = {
+  // omit...
+  beforeSaveCell: (oldValue, newValue, row, column) => { ... }
+}
+```
+
+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 accep this change?')) {
+        done(); // contine to save the changes
+      } else {
+        done(false); // reject the changes
+      }
+    }, 0);
+    return { async: true };
+  }
+};
+```
+
+## cellEdit.afterSaveCell - [Function]
+This callback function will be called after updating cell.
+
+```js
+const cellEdit = {
+  // omit...
+  afterSaveCell: (oldValue, newValue, row, column) => { ... }
+};
+```
+
+## cellEdit.onStartEdit - [Function]
+This callback function will be called after editor component mounted
+
+```js
+const cellEdit = {
+  // omit...
+  onStartEdit: (row, column, rowIndex, columnIndex) => { ... }
+};
+```
+
+## cellEdit.errorMessage - [String]
+This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on [`remote`](./table-props.html#remote-bool-object) mode.
+
+## cellEdit.onErrorMessageDisappear - [Function]
+This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.

docs/cell-edit.md

@@ -1,98 +0,0 @@
-# Cell Editing
-Before start to use cell edit, please remember to install `react-bootstrap-table2-editor`
-
-```sh
-$ npm install react-bootstrap-table2-editor --save
-```
-
-# Properties on cellEdit prop
-* [mode (**required**)](#mode)
-* [blurToSave](#blurToSave)
-* [nonEditableRows](#nonEditableRows)
-* [timeToCloseMessage](#timeToCloseMessage)
-* [autoSelectText](#autoSelectText)
-* [beforeSaveCell](#beforeSaveCell)
-* [afterSaveCell](#afterSaveCell)
-* [errorMessage](#errorMessage)
-* [onErrorMessageDisappear](#onErrorMessageDisappear)
-
-## <a name='cellEdit'>cellEdit - [Object]</a>
-Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing.
-
-> Note: The `keyField` column can't be edited
-
-Following is the shape of `cellEdit` object:
-```js
-{
-  mode: 'click',
-  blurToSave: true,
-  timeToCloseMessage: 2500,
-  errorMessage: '',
-  beforeSaveCell: (oldValue, newValue, row, column) => { ... },
-  afterSaveCell: (oldValue, newValue, row, column) => { ... },
-  onErrorMessageDisappear: () => { ... },
-  nonEditableRows: () => { ... }
-}
-```
-
-### <a name='mode'>cellEdit.mode - [String]</a>
-`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing.
-
-### <a name='blurToSave'>cellEdit.blurToSave - [Bool]</a>
-Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
-
-### <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.
-
-### <a name='beforeSaveCell'>cellEdit.beforeSaveCell - [Function]</a>
-This callback function will be called before triggering cell update.
-
-```js
-const cellEdit = {
-  // omit...
-  beforeSaveCell: (oldValue, newValue, row, column) => { ... }
-}
-```
-
-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.
-
-```js
-const cellEdit = {
-  // omit...
-  afterSaveCell: (oldValue, newValue, row, column) => { ... }
-};
-```
-
-### <a name='errorMessage'>cellEdit.errorMessage - [String]</a>
-This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on remote mode.
-
-### <a name='onErrorMessageDisappear'>cellEdit.onErrorMessageDisappear - [Function]</a>
-This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.
-

docs/column-props.md

@@ -1,81 +1,67 @@
-# Definition of columns props on BootstrapTable
+---
+id: column-props
+title: Columns Props
+---
 
-Available properties in a column object:
+Definition of columns props on BootstrapTable
 
-#### Required
+## Required
-* [dataField (**required**)](#dataField)
+* [dataField (**required**)](#columndatafield-required-string)
-* [text (**required**)](#text)
+* [text (**required**)](#columntext-required-string)
 
-#### Optional
+## Optional
-* [isDummyField](#isDummyField)
+* [isDummyField](#columnisdummyfield-bool)
-* [hidden](#hidden)
+* [type](#columntype-string)
-* [formatter](#formatter)
+* [hidden](#columnhidden-bool)
-* [formatExtraData](#formatExtraData)
+* [formatter](#columnformatter-function)
-* [type](#type)
+* [formatExtraData](#columnformatextradata-any)
-* [sort](#sort)
+* [sort](#columnsort-bool)
-* [sortValue](#sortValue)
+* [sortValue](#columnsortvalue-function)
-* [sortFunc](#sortFunc)
+* [sortFunc](#columnsortfunc-function)
-* [sortCaret](#sortCaret)
+* [sortCaret](#columnsortcaret-function)
-* [onSort](#onSort)
+* [onSort](#columnonsort-function)
-* [classes](#classes)
+* [classes](#columnclasses-string-function)
-* [style](#style)
+* [style](#columnstyle-object-function)
-* [title](#title)
+* [title](#columntitle-bool-function)
-* [events](#events)
+* [events](#columnevents-object)
-* [align](#align)
+* [align](#columnalign-string-function)
-* [attrs](#attrs)
+* [attrs](#columnattrs-object-function)
-* [headerFormatter](#headerFormatter)
+* [headerFormatter](#columnheaderformatter-function)
-* [headerClasses](#headerClasses)
+* [headerClasses](#columnheaderclasses-string-function)
-* [headerStyle](#headerStyle)
+* [headerStyle](#columnheaderstyle-object-function)
-* [headerTitle](#headerTitle)
+* [headerTitle](#columnheadertitle-bool-function)
-* [headerEvents](#headerEvents)
+* [headerEvents](#columnheaderevents-object)
-* [headerAlign](#headerAlign)
+* [headerAlign](#columnheaderalign-string-function)
-* [headerAttrs](#headerAttrs)
+* [headerAttrs](#columnheaderattrs-object-function)
-* [headerSortingClasses](#headerSortingClasses)
+* [headerSortingClasses](#headersortingclasses-string-function)
-* [headerSortingStyle](#headerSortingStyle)
+* [headerSortingStyle](#headersortingstyle-object-function)
-* [footer](#footer)
+* [footer](#columnfooter-string-function)
-* [footerFormatter](#footerFormatter)
+* [footerFormatter](#columnfooterformatter-function)
-* [footerClasses](#footerClasses)
+* [footerClasses](#columnfooterclasses-string-function)
-* [footerStyle](#footerStyle)
+* [footerStyle](#columnfooterstyle-object-function)
-* [footerTitle](#footerTitle)
+* [footerTitle](#columnfootertitle-string-function)
-* [footerEvents](#footerEvents)
+* [footerEvents](#columnfooterevents-object)
-* [footerAlign](#footerAlign)
+* [footerAlign](#columnfooteralign-string-function)
-* [footerAttrs](#footerAttrs)
+* [footerAttrs](#columnfooterattrs-object-function)
-* [editable](#editable)
+* [editable](#columneditable-bool-function)
-* [validator](#validator)
+* [validator](#columnvalidator-function)
-* [editCellStyle](#editCellStyle)
+* [editCellStyle](#columneditcellstyle-object-function)
-* [editCellClasses](#editCellClasses)
+* [editCellClasses](#columneditcellclasses-string-function)
-* [editorStyle](#editorStyle)
+* [editorStyle](#columneditorstyle-object-function)
-* [editorClasses](#editorClasses)
+* [editorClasses](#columneditorclasses-string-function)
-* [editor](#editor)
+* [editor](#columneditor-object)
-* [editorRenderer](#editorRenderer)
+* [editorRenderer](#columneditorrenderer-function)
-* [filter](#filter)
+* [filter](#columnfilter-object)
-* [filterValue](#filterValue)
+* [filterValue](#columnfiltervalue-function)
-* [searchable](#searchable)
+* [searchable](#columnsearchable-bool)
-* [csvType](#csvType)
+* [csvType](#columncsvType-object)
-* [csvFormatter](#csvFormatter)
+* [csvFormatter](#columncsvFormatter-function)
-* [csvText](#csvText)
+* [csvText](#columncsvText-string)
-* [csvExport](#csvExport)
+* [csvExport](#columncsvExport-bool)
 
-Following is a most simplest and basic usage:
+-----
 
-```js
+## column.dataField (**required**) - [String]
-const rows = [ { id: 1, name: '...', price: '102' } ];
-const columns = [ {
-    dataField: 'id', 
-    text: 'Production ID'
-  }, {
-    dataField: 'name',
-    text: 'Production Name'
-  }, {
-    dataField: 'price',
-    text: 'Production Price'
-  }
-];
-```
-
-Let's introduce the definition of column object
-
-## <a name='dataField'>column.dataField (**required**) - [String]</a>
 Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example:
 
 ```js
@@ -94,30 +80,35 @@ dataField: 'address.postal'
 dataField: 'address.city'
 ```
 
-## <a name='text'>column.text (**required**) - [String]</a>
+## column.text (**required**) - [String]
-`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
+`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#columnheaderformatter-function)
 
-## <a name='isDummyField'>column.isDummyField - [Bool]</a>
+## column.type - [String]
-Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless.
+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.
+
+## column.isDummyField - [Bool]
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless. However, please keep `dataField` as unique as possible.
 
 There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call `shouldComponentUpdate`.
 
-## <a name='hidden'>column.hidden - [Bool]</a>
+
+## column.hidden - [Bool]
 `hidden` allow you to hide column when `true` given.
 
-## <a name='formatter'>column.formatter - [Function]</a>
+## column.formatter - [Function]
 `formatter` allow you to customize the table column and only accept a callback function which take four arguments and a JSX/String are expected for return.
 
 * `cell`
 * `row`
 * `rowIndex`
-* [`formatExtraData`](#formatExtraData)
+* [`formatExtraData`](#columnformatextradata-any)
 
 > Attention:
 > Don't use any state data or any external data in formatter function, please pass them via [`formatExtraData`](#formatExtraData).
 > In addition, please make formatter function as pure function as possible as you can.
 
-## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
+## column.headerFormatter - [Function]
 `headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
 
 * `column`: current column object itself
@@ -132,17 +123,13 @@ The third argument: `components` have following specified properties:
 }
 ```
 
-## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
+## column.formatExtraData - [Any]
-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.
+It's only used for [`column.formatter`](#columnformatter-function), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#columnformatter-function) callback function.
 
-## <a name='type'>column.type - [String]</a>
+## column.sort - [Bool]
-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 - [Function]
 `column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting.
 
 For example, consider following data:
@@ -176,23 +163,36 @@ const columns = [{
 }]
 ```
 
-## <a name='sortFunc'>column.sortFunc - [Function]</a>
+## column.sortFunc - [Function]
-`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
 {
   // omit...
   sort: true,
-  sortFunc: (valueA, valueB, order, dataField, rowA, rowB) => {
+  sortFunc: (a, b, order, dataField, rowA, rowB) => {
-    if (order === 'asc') return valueA - valueB;
+    if (order === 'asc') return a - b;
-    else return valueB - valueA;
+    else return b - a;
   }
 }
 ```
 > The possible value of `order` argument is **`asc`** and **`desc`**.
 
-## <a name='sortFunc'>column.onSort - [Function]</a>
+## column.sortCaret - [Function]
-`column.onSort` is an event listener for sort change event:
+Use`column.sortCaret` to custom 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`**.
+
+## column.onSort - [Function]
+`column.onSort` is an event listener for subscribing the event of sort:
 
 ```js
 {
@@ -204,21 +204,7 @@ const columns = [{
 }
 ```
 
-## <a name='sortCaret'>column.sortCaret - [Function]</a>
+## column.classes - [String | Function]
-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:
 
 ```js
@@ -227,7 +213,7 @@ It's available to have custom class on table column:
   classes: 'id-custom-cell'
 }
 ```
-In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take **4** arguments and a `String` is expected to return:: 
+In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take **4** arguments and a `String` is expected to return: 
 
 
 ```js
@@ -246,8 +232,8 @@ In addition, `classes` also accept a callback function which have more power to
 
 A new `String` will be the result as element class.
 
-## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
+## column.headerClasses - [String | Function]
-It's similar to [`column.classes`](#classes), `headerClasses` is available to have customized class on table header column:
+It's similar to [`column.classes`](#columnclasses-string-function), `headerClasses` is available to have customized class on table header column:
 
 ```js
 {
@@ -271,7 +257,7 @@ Furthermore, it also accept a callback function which takes 2 arguments and a `S
 
 A new `String` will be the result of element headerClasses.
 
-## <a name='style'>column.style - [Object | Function]</a>
+## column.style - [Object | Function]
 It's available to have custom style on table column:
 
 ```js
@@ -281,7 +267,7 @@ It's available to have custom style on table column:
 }
 ```
 
-In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes **4** arguments and an `Object` is expect to return: 
+In addition, similar to [`column.classes`](#columnclasses-string-function), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes **4** arguments and an `Object` is expect to return: 
 
 
 ```js
@@ -301,7 +287,7 @@ In addition, similar to [`column.classes`](#classes), `style` also accept a call
 A new `Object` will be the result of element style.
 
 
-## <a name='headerStyle'>column.headerStyle - [Object | Function]</a>
+## column.headerStyle - [Object | Function]
 It's available to have customized inline-style on table header column:
 
 ```js
@@ -311,7 +297,7 @@ It's available to have customized inline-style on table header column:
 }
 ```
 
-Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
+Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
 
 ```js
 {
@@ -328,7 +314,7 @@ Moreover, it also accept a callback function which takes **2** arguments and an
 A new `Object` will be the result of element headerStyle.
 
 
-## <a name='title'>column.title - [Bool | Function]</a>
+## column.title - [Bool | Function]
 `react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes **4** arguments and a `String` is expect to return: 
 
 
@@ -350,8 +336,8 @@ 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>
+## column.headerTitle - [Bool | Function]
-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`](#columntitle-bool-function), 
 
 ```js
 {
@@ -375,7 +361,7 @@ It's also available to custom via a callback function:
 
 A new `String` will be the result of element headerTitle.
 
-## <a name='align'>column.align - [String | Function]</a>
+## column.align - [String | Function]
 You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. 
 
 Besides, `align` also accept a callback function for dynamically setting text align. It takes **4** arguments and a `String` is expect to return: 
@@ -397,8 +383,8 @@ Besides, `align` also accept a callback function for dynamically setting text al
 
 A new `String` will be the result of element text alignment.
 
-## <a name='headerAlign'>column.headerAlign - [String | Function]</a>
+## column.headerAlign - [String | Function]
-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 header column. 
+It's almost same as [`column.align`](#columnalign-string-function), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column. 
 
 ```js
 {
@@ -427,7 +413,7 @@ Also, you can custom the align by a callback function:
 A new `String` will be the result of element headerAlign.
 
 
-## <a name='events'>column.events - [Object]</a>
+## column.events - [Object]
 You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via `events` property.   
 
 `react-bootstrap-table2` currently only support following events which will receive some specific information:
@@ -447,10 +433,10 @@ You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattribut
 }
 ```
 
-If the events is not listed above, the callback function will only pass the `event` object.
+If the events is not listed above, the callback function will only receive the `event` object.
 
-## <a name='headerEvents'>column.headerEvents - [Object]</a>
+## column.headerEvents - [Object]
-`headerEvents` same as [`column.events`](#events) but this is for header column.
+`headerEvents` same as [`column.events`](#columnevents-object) but this is for header column.
 
 ```js
 {
@@ -461,7 +447,7 @@ If the events is not listed above, the callback function will only pass the `eve
 }
 ```
 
-## <a name='attrs'>column.attrs - [Object | Function]</a>
+## column.attrs - [Object | Function]
 Via `attrs` property, You can customize table column [HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) which allow user to configure the elements or adjust their behavior.
 
 ```js
@@ -473,7 +459,7 @@ Via `attrs` property, You can customize table column [HTML attribute](https://de
   }
 }
 ```
-Not only `Object`, `callback function` is also acceptable. It takes `4` arguments and an `Object` is expect to return: 
+Not only `Object`, `callback function` is also acceptable. It takes **4** arguments and an `Object` is expect to return: 
 
 ```js
 {
@@ -492,8 +478,7 @@ Not only `Object`, `callback function` is also acceptable. It takes `4` argument
 A new `Object` will be the result of element HTML attributes.
 
 > Caution:   
-
+> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priority and it will be overwritten:
-> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priority and it will be overwritten.
 
 ```js
 {
@@ -503,8 +488,8 @@ A new `Object` will be the result of element HTML attributes.
 }
 ```
 
-## <a name='headerAttrs'>column.headerAttrs - [Object | Function]</a>
+## column.headerAttrs - [Object | Function]
-`headerAttrs` is similar to [`column.attrs`](#attrs) but it works for header column. 
+`headerAttrs` is similar to [`column.attrs`](#columnattrs-object-function) but it works for header column. 
 ```js
 {
   // omit...
@@ -535,10 +520,10 @@ Additionally, customize the header attributes by a **2** arguments callback func
 A new `Object` will be the result of element headerAttrs.
 
 > Caution:   
-> Same as [column.attrs](#attrs), it has lower priority and will be
+> Same as [column.attrs](#columnattrs-object-function), it has lower priority and will be
-> overwritten when other props related to HTML attributes were given.
+> overwrited when other props related to HTML attributes were given.
 
-### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
+## headerSortingClasses - [String | Function]
 
 `headerSortingClasses` allows to customize `class` for header cell when this column is sorting.
 
@@ -557,9 +542,9 @@ const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { .
 * `isLastSorting`: Is the last one of sorted columns.
 * `colIndex`: The index of the current column being processed in BootstrapTable.
 
-### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
+## headerSortingStyle - [Object | Function]
 
-It's similar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
+It's similiar to [headerSortingClasses](#headersortingclasses-string-function). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
 
 ```js
 const sortingHeaderStyle = {
@@ -567,7 +552,7 @@ const sortingHeaderStyle = {
 };
 ```
 
-### <a name='footer'>footer - [String | Function]</a>
+## column.footer - [String | Function]
 Give a string to render the string value on the footer column.
 
 ```js
@@ -585,18 +570,18 @@ This prop also accept a function:
 {
   dataField: 'price',
   text: 'Product Price',
-  footer: column => column.reduce((acc, item) => acc + item, 0)
+  footer: (columnData, column, columnIndex) => columnData.reduce((acc, item) => acc + item, 0)
 }
 ```
 
-## <a name='footerFormatter'>column.footerFormatter - [Function]</a>
+## column.footerFormatter - [Function]
 `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>
+## column.footerClasses - [String | Function]
-It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
+It's similar to [`column.classes`](#columnclasses-string-function), `footerClasses` is available to have customized class on table footer column:
 
 ```js
 {
@@ -616,7 +601,7 @@ Furthermore, it also accept a callback function which takes 2 arguments and a `S
 * `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>
+## column.footerStyle - [Object | Function]
 Customized the inline-style on table footer column:
 
 ```js
@@ -638,8 +623,8 @@ Moreover, it also accept a callback function which takes **2** arguments and an
 * `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>
+## column.footerTitle - [Bool | Function]
-Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#title), 
+Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#columntitle-bool-function), 
 
 ```js
 {
@@ -659,8 +644,8 @@ It's also available to custom via a callback function:
 * `column`: The value of current column. 
 * `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
 
-## <a name='footerEvents'>column.footerEvents - [Object]</a>
+## column.footerEvents - [Object]
-`footerEvents` same as [`column.events`](#events) but it is for footer column:
+`footerEvents` same as [`column.events`](#columnevents-object) but it is for footer column:
 
 ```js
 {
@@ -671,8 +656,8 @@ It's also available to custom via a callback function:
 }
 ```
 
-## <a name='footerAlign'>column.footerAlign - [String | Function]</a>
+## column.footerAlign - [String | Function]
-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. 
+It's almost same as [`column.align`](#columnalign-string-function), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column. 
 
 ```js
 {
@@ -696,8 +681,8 @@ Also, you can custom the align by a callback function:
 * `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>
+## column.footerAttrs - [Object | Function]
-`footerAttrs` is similar to [`column.attrs`](#attrs) but it works for footer column. 
+`footerAttrs` is similar to [`column.attrs`](#columnattrs-object-function) but it works for footer column. 
 ```js
 {
   // omit...
@@ -723,8 +708,8 @@ Additionally, customize the header attributes by a **2** arguments callback func
 * `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 - [Bool | Function]
-`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`.
+`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./cell-edit-props.html). But you can disable some columns editable via setting `false`.
 
 If a callback function given, you can control the editable level as cell level:
 
@@ -737,7 +722,7 @@ If a callback function given, you can control the editable level as cell level:
 }
 ```
 
-## <a name='validator'>column.validator - [Function]</a>
+## column.validator - [Function]
 `column.validator` used for validate the data when cell on updating. it's should accept a callback function with following argument:
 `newValue`, `row` and `column`:
 
@@ -779,8 +764,7 @@ If you want to perform a asycn validation, you can do it like this:
 }
 ```
 
-
+## column.editCellStyle - [Object | Function]
-## <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:
 
 **Parameters**
@@ -804,8 +788,8 @@ Or take a callback function
 }
 ```
 
-## <a name='editCellClasses'>column.editCellClasses - [String | Function]</a>
+## column.editCellClasses - [String | Function]
-You can use `column.editCellClasses` to add custom class on `<td>` when cell editing. It's same as [`column.editCellStyle`](#editCellStyle) which also accept a callback function to able to custom your class more flexible. Following is the arguments of this callback function: `cell`, `row`, `rowIndex`, `colIndex`.
+You can use `column.editCellClasses` to add custom class on `<td>` when cell editing. It's same as [`column.editCellStyle`](#columneditcellstyle-object-function) which also accept a callback function to able to custom your class more flexible. Following is the arguments of this callback function: `cell`, `row`, `rowIndex`, `colIndex`.
 
 ```js
 {
@@ -822,13 +806,13 @@ Or take a callback function
 }
 ```
 
-## <a name='editorStyle'>column.editorStyle - [Object | Function]</a>
+## column.editorStyle - [Object | Function]
-This is almost same as [`column.editCellStyle`](#editCellStyle), but `column.editorStyle` is custom the style on editor instead of cell(`td`).
+This is almost same as [`column.editCellStyle`](#columneditcellstyle-object-function), but `column.editorStyle` is for custom the style on editor instead of cell(`td`).
 
-## <a name='editorClasses'>column.editorClasses - [Object | Function]</a>
+## column.editorClasses - [String | Function]
-This is almost same as [`column.editCellClasses`](#editCellClasses), but `column.editorClasses` is custom the class on editor instead of cell(`td`).
+This is almost same as [`column.editCellClasses`](#columneditcellclasses-string-function), but `column.editorClasses` is for custom the class on editor instead of cell(`td`).
 
-## <a name='editor'>column.editor - [Object]</a>
+## column.editor - [Object]
 `column.editor` allow you to custom the type of cell editor by following predefined type:
 
 * Text(Default)
@@ -855,9 +839,9 @@ const columns = [
 ];
 ```
 
-If you want more information, please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-editor).
+Please check [here](./basic-celledit.html#rich-editors) for more detail about rich editors.
 
-## <a name='editorRenderer'>column.editorRenderer - [Function]</a>
+## column.editorRenderer - [Function]
 If you feel above predefined editors are not satisfied to your requirement, you can totally custom the editor via `column.editorRenderer`:
 
 ```js
@@ -908,18 +892,19 @@ const columns = [
   }
 ];
 ```
+Please check [here](./basic-celledit.html#customize-editor) for more detail.
 
-## <a name='filter'>column.filter - [Object]</a>
+## column.filter - [Object]
 Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
 
-* Text(`textFilter`)
+* Text Filter
-* Select(`selectFilter`)
+* Select Filter
-* Number(`numberFilter`)
+* Number Filter
-* Date(`dateFilter`)
+* Date Filter
 
 We have a quick example to show you how to use `column.filter`:
 
-```
+```js
 import { textFilter } from 'react-bootstrap-table2-filter';
 
 // omit...
@@ -932,7 +917,7 @@ import { textFilter } from 'react-bootstrap-table2-filter';
 
 For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
 
-## <a name='filterValue'>column.filterValue - [Function]</a>
+## column.filterValue - [Function]
 Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filtered:
 
 **Parameters**
@@ -953,18 +938,20 @@ A final `String` value you want to be filtered.
 }
 ```
 
-## <a name='searchable'>column.searchable - [Boolean]</a>
+## column.searchable - [Bool]
 Default the column is searchable. Give `false` to disable search functionality on specified column.
 
-## <a name='csvType'>column.csvType - [Object]</a>
+
+## column.csvType - [Object]
 Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
 
-## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
+## column.csvFormatter - [Function]
 
-This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
+This is same as [`column.formatter`](#columnformatter-function). But `csvFormatter` only for CSV export and called when export CSV.
 
-## <a name='csvText'>column.csvText - [String]</a>
+## column.csvText - [String]
-Custom the CSV header cell, Default is [`column.text`](#text).
+Custom the CSV header cell, Default is [`column.text`](#columntext-required-string).
 
-## <a name='csvExport'>column.csvExport - [Bool]</a>
+## column.csvExport - [Bool]
 Default is `true`, `false` will hide this column when export CSV.
+

docs/development.md

@@ -1,28 +0,0 @@
-## Development Guide
-
-### Setup
-```bash
-$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
-$ cd react-bootstrap-table2
-$ npm install
-$ lerna bootstrap  # ./node_modules/.bin/lerna bootstrap
-```
-### Development
-```bash
-$ npm run storybook
-```
-
-### Launch StoryBook
-We use [storybook](https://storybook.js.org/) to list our examples and it also has hot reload from source code. Sometimes, it is also a good entry point to development.
-
-```bash
-$ cd packages/react-bootstrap-table2-example
-$ npm run storybook
-```
-
-### Testing
-```bash
-$ npm test
-$ npm run test:watch  # for watch mode
-$ npm run test:coverage  # generate coverage report
-```

docs/export-csv-props.md

@@ -0,0 +1,69 @@
+---
+id: export-csv-props
+title: Export CSV Props
+---
+Export CSV in one of features supported by `react-bootstrap-table2-toolkit`. By passing `exportCSV` prop to `ToolkitProvider` for enabling this functionality. 
+
+
+## Required
+**N/A**
+
+## Optional
+* [fileName](#exportCSVfilename-string)
+* [separator](#exportCSVseparator-string)
+* [ignoreHeader](#exportCSVignoreheader-bool)
+* [ignoreFooter](#exportCSVignorefooter-bool)
+* [noAutoBOM](#exportCSVnoautobom-bool)
+* [blobType](#exportCSVblobtype-string)
+* [exportAll](#exportCSVexportall-bool)
+* [onlyExportSelection](#exportCSVonlyexportselection-bool)
+* [onlyExportFiltered](#exportCSVonlyexportfiltered-bool)
+
+## Example
+
+```js
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV={ {
+    fileName: 'custom.csv',
+    separator: '|',
+    ignoreHeader: true,
+    noAutoBOM: false
+  } }
+>
+  //...
+</ToolkitProvider>
+```
+
+-----
+
+## exportCSV.fileName - [Bool]
+Custom the csv file name.
+
+## exportCSV.separator - [String]
+Custom the csv file separator.
+
+## exportCSV.ignoreHeader - [bool]
+Default is `false`. Give true to avoid to attach the csv header.
+
+## exportCSV.ignoreFooter - [bool]
+Default is `true`. Give `false` to attach the table footer if enabled.
+
+## exportCSV.noAutoBOM - [bool]
+Default is `true`.
+
+## exportCSV.blobType - [string]
+Default is `text/plain;charset=utf-8`. Change to update the blob type of the exported file.
+
+## exportCSV.exportAll - [bool]
+Default is `true`. `false` will only export current display data on table.
+
+## exportCSV.onlyExportSelection - [bool]
+Default is `false`. `true` will only export the data which is selected
+
+## exportCSV.onlyExportFiltered - [bool]
+Default is `false`. `true` will only export the data which is filtered/searched.
+
+>> Note: When you configure this prop as true, you must turn off `exportAll`.

docs/exposed-api.md

@@ -0,0 +1,55 @@
+---
+id: exposed-api
+title: Introduction Exposed API
+sidebar_label: Introduction
+---
+
+`react-bootstrap-table2` support some hooks function that you can use to know what state changes, for example: a row is select or unselect.
+In addition, we also allow you use `React` `Refs` to directly access the components so that you can easier to get some table states.
+
+**[Live Demo](../storybook/index.html?selectedKind=Basic%20Table&selectedStory=Exposed%20API)**   
+
+## Add a Refs on `BootstrapTable`
+
+```js
+<BootstrapTable
+  ref={ n => this.node = n }
+  ...
+/>
+```
+
+## Get Current Display Rows
+
+`this.node.table.props.data`
+
+## Get Current Selected Rows
+
+`this.node.selectionContext.selected`
+
+## Get Current Expanded Rows
+
+`this.node.rowExpandContext.state.expanded`
+
+## Get Current Page
+
+`this.node.paginationContext.currPage`
+
+## Get Current Size Per Page
+
+`this.node.paginationContext.currSizePerPage`
+
+## Get Current Sorting Column
+
+`this.node.sortContext.state.sortColumn`
+
+## Get Current Sorting Order
+
+`this.node.sortContext.state.sortOrder`
+
+## Get Current Filters
+
+`this.node.filterContext.currFilters`
+
+## Trigger Cell Editing:
+
+`this.node.cellEditContext.startEditing(0, 1);  // rowindex, columnindex`

docs/filter-props.md

@@ -0,0 +1,500 @@
+---
+id: filter-props
+title: Column Filter Props
+---
+`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). For more information, please take refer to the samples as [link](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) here.
+
+## **Content Table**
+
+* [Getting Started](#getting-started)
+* [How to use](#how-to-use)
+* [Props of FilterFactory](#props-of-filterfactory)
+* [Props of Filters](#props-of-filters)
+   * [textFilter](#textfilter)
+   * [selectFilter](#selectFilter)
+   * [multiSelectFilter](#multiSelectFilter)
+   * [numberFilter](#numberFilter)
+   * [dateFilter](#dateFilter)
+   * [customFilter](#customFilter)
+* [Comparator](#comparator)
+* [FILTER_TYPES](#filter-types)
+* [Position](#position)
+
+## **Getting Started**
+Please check [Getting Started Guide](./basic-filter.html)
+
+## **How to use**
+You should apply following two props to enable filter functionality:
+* Give `filter` prop on `BootstrapTable` which value is the return value from calling `filterFactory` function
+* Add `filter` property on `column` object:
+   * textFilter
+   * selectFilter
+   * multiSelectFilter
+   * numberFilter
+   * dateFilter
+   * customFilter
+
+For example:
+
+```js
+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'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## **Props of FilterFactory**
+**No Any Available Props Yet**
+
+## **Props of Filters**
+
+## textFilter
+
+**Required**: NONE
+
+**Optional**:
+### textFilter.placeholder - [String]
+* custom the input placeholder
+
+### textFilter.className - [String]
+* custom class name on input
+
+### textFilter.defaultValue - [String]
+* default filtering value
+
+### textFilter.comparator - [Comparator]
+* Specify what kind of comparator to compare. Default is Comparator.LIKE
+
+### textFilter.caseSensitive - [Boolean]
+* default is `false`, and `true` will only work when comparator is `LIKE`.
+
+### textFilter.style - [Object]
+* your custom inline styles on `input`
+
+### textFilter.delay - [Number]
+* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`. 
+
+### textFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For textFilter, `filter(value)` to filter columns dynamically.
+
+### textFilter.onFilter - [Function]
+* Register a listener which will be called when column filter being triggered. If you return an array value, `react-bootstrap-table2` will adopt this value as final filted result.
+
+**Example**
+```js
+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({
+    placeholder: 'My Custom PlaceHolder',  // custom the input placeholder
+    className: 'my-custom-text-filter', // custom classname on input
+    defaultValue: 'test', // default filtering value
+    comparator: Comparator.EQ, // default is Comparator.LIKE
+    caseSensitive: true, // default is false, and true will only work when comparator is LIKE
+    style: { backgroundColor: 'yellow' }, // your custom inline styles on input
+    delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
+    onClick: e => console.log(e),
+    getFilter: (filter) => { // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
+    },
+    onFilter: (filterValue) => { filter listener
+      //...
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## selectFilter
+**Required**:
+
+### selectFilter.options - [Object | Array | Function]
+* (Required) the options for the list of drop down.
+
+**Optional**:
+
+### selectFilter.className - [String]
+* custom class name on input
+
+### selectFilter.withoutEmptyOption - [Boolean]
+* When it was set to `true`, the drop down list would hide the default selection.
+### selectFilter.defaultValue - [String]
+* default filtering value
+
+### selectFilter.comparator - [Comparator]
+* Specify what kind of comparator to compare. Default is `Comparator.EQ`
+
+### selectFilter.style - [Object]
+* your custom inline styles on `input`
+
+### selectFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For selectFilter, `filter(value)` to filter columns dynamically.
+
+### selectFilter.onFilter - [Function]
+* Register a listener which will be called when column filter being triggered. If you return an array value, `react-bootstrap-table2` will adopt this value as final filted result.
+
+**Example**
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+// options as Object
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+// options as Array
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+
+// options as Function
+function selectOptions = (column) => [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+
+
+const columns = [
+  { ... }, { ... }, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    className: 'test-classname',
+    withoutEmptyOption: true,
+    defaultValue: 2,
+    comparator: Comparator.LIKE, // default is Comparator.EQ
+    style: { backgroundColor: 'pink' },
+    getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    },
+    onFilter: (filterValue) => { filter listener
+      //...
+    }
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## multiSelectFilter
+**Required**:
+
+### multiSelectFilter.options - [Object]
+* (Required) the options for the list of drop down.
+
+**Optional**:
+
+### multiSelectFilter.className - [String]
+* custom class name on input
+
+### multiSelectFilter.withoutEmptyOption - [Boolean]
+* When it was set to `true`, the drop down list would hide the default selection.
+
+### multiSelectFilter.defaultValue - [Array]
+* default filtering value
+
+### multiSelectFilter.comparator - [Comparator]
+* Specify what kind of comparator to compare. Default is `Comparator.EQ`
+
+### multiSelectFilter.style - [Object]
+* your custom inline styles on `input`
+
+### multiSelectFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For multiSelectFilter, `filter(value)` to filter columns dynamically.
+
+### multiSelectFilter.onFilter - [Function]
+* Register a listener which will be called when column filter being triggered. If you return an array value, `react-bootstrap-table2` will adopt this value as final filted result.
+
+**Example**
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [
+  { ... }, { ... }, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    className: 'test-classname',
+    withoutEmptyOption: true,
+    defaultValue: [0, 2],
+    comparator: Comparator.LIKE, // default is Comparator.EQ
+    style: { backgroundColor: 'pink' },
+    getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    },
+    onFilter: (filterValue) => { filter listener
+      //...
+    }
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## numberFilter
+**Required**: NONE
+
+**Optional**:
+
+### numberFilter.options - [Array]
+* Once the `options` has been defined, it will render number `select` drop down instead of number input field.
+
+### numberFilter.delay - [Number]
+* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`.
+
+### numberFilter.placeholder - [String]
+* customized placeholder for number input.
+
+### numberFilter.withoutEmptyComparatorOption - [Boolean]
+* When it was set to `true`, the drop down list of `comparator` would hide the default selection.
+
+### numberFilter.withoutEmptyNumberOption - [Boolean]
+* When it was set to `true`, the drop down list of `number` would hide the default selection. Besides, before picking up this prop, please make sure that you've defined the `props.options` correctly.
+
+### numberFilter.defaultValue - [Object]
+* It is the default filtering value. Furthermore, it accepts **2** attributes:
+   * number: filter value
+   * comparator: what kind of comparator to compare
+
+### numberFilter.comparator - [[Comparator]]
+* Specify what kind of comparator to compare. Default is to list `all` of comparators.
+
+### numberFilter.className - [String]
+* custom class name on the `wrapper` of number input and comparator drop down.
+
+### numberFilter.comparatorClassName - [String]
+* custom class name on the `comparator` drop down.
+
+### numberFilter.numberClassName - [String]
+* custom class name on the number `input`.
+
+### numberFilter.style - [Object]
+* custom inline styles on the `wrapper` of number input and comparator drop down.
+
+### numberFilter.comparatorStyle - [Object]
+* custom inline styles on the `comparator` drop down.
+
+### numberFilter.numberStyle - [Object]
+* custom inline styles on the number `input`.
+
+### numberFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For numberFilter,<br>`filter({ number, comparator })` to filter columns dynamically.
+
+### numberFilter.onFilter - [Function]
+* Register a listener which will be called when column filter being triggered. If you return an array value, `react-bootstrap-table2` will adopt this value as final filted result.
+
+**Example**:
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{ ... }, { ... }, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    options: [2100, 2103, 2105],  // if options defined, will render number select instead of number input
+    delay: 600, // how long will trigger filtering after user typing, default is 500 ms
+    placeholder: 'custom placeholder',  // placeholder for number input
+    withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+    withoutEmptyNumberOption: true,  // dont render empty option for number select if it is defined
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+    style: { display: 'inline-grid' }, // custom the style on number filter
+    className: 'custom-numberfilter-class',  // custom the class on number filter
+    comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+    comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+    numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on number input/select
+    numberClassName: 'custom-number-class',  // custom the class on ber input/select
+    defaultValue: { number: 2103, comparator: Comparator.GT },  // default value
+    getFilter: (filter) => { // priceFilter was assigned once the component has been mounted.
+      priceFilter = filter;
+    },
+    onFilter: (filterValue) => { filter listener
+      //...
+    }
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## dateFilter
+**Required**: NONE
+
+**Optional**:
+
+### dateFilter.delay - [Number]
+* Debounce time, which means how long will trigger filtering after user typing. Default is 0.
+
+### dateFilter.placeholder - [String]
+* customized placeholder for date input.
+
+### dateFilter.withoutEmptyComparatorOption - [Boolean]
+* When it was set to `true`, the drop down list of `comparator` would hide the default selection.
+
+### dateFilter.defaultValue - [Object]
+* It is the default filtering value. Furthermore, it accepts **2** attributes:
+   * date: a date object which need to be filtered
+   * comparator: what kind of comparator to compare
+
+### dateFilter.comparator - [[Comparator]]
+* Specify what kind of comparator to compare. Default is to list `all` of comparators.
+
+### dateFilter.className - [String]
+* custom class name on the `wrapper` of date input and comparator drop down.
+
+### dateFilter.comparatorClassName - [String]
+* custom class name on the `comparator` drop down.
+
+### dateFilter.dateClassName - [String]
+* custom class name on the date `input`.
+
+### dateFilter.style - [Object]
+* custom inline styles on the `wrapper` of date input and comparator drop down.
+
+### dateFilter.comparatorStyle - [Object]
+* custom inline styles on the `comparator` drop down.
+
+### dateFilter.dateStyle - [Object]
+* custom inline styles on the date `input`.
+
+### dateFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For dateFilter,<br>`filter({ date, comparator })` to filter columns dynamically.
+
+### dateFilter.onFilter - [Function]
+* Register a listener which will be called when column filter being triggered. If you return an array value, `react-bootstrap-table2` will adopt this value as final filted result.
+
+**Example**:
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{ ... }, { ... }, {
+  dataField: 'date',
+  text: 'Product Date',
+  filter: dateFilter({
+    delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
+    placeholder: 'custom placeholder',  // placeholder for date input
+    withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+    style: { display: 'inline-grid' },  // custom the style on date filter
+    className: 'custom-dateFilter-class',  // custom the class on date filter
+    comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+    comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+    dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
+    dateClassName: 'custom-date-class',  // custom the class on date input
+    defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT },  // default value
+    getFilter: (filter) => { // prodDateFilter was assigned once the component has been mounted.
+      prodDateFilter = filter;
+    },
+    onFilter: (filterValue) => { filter listener
+      //...
+    }
+  });
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## customFilter
+**Required**: NONE
+
+**Optional**:
+### customFilter.type - [String]
+* Assign the filter mode when `react-bootstrap-table` filering your data, please check [FILTER_TYPES](#filter-types) for available values.
+### customFilter.comparator - [Comparator]
+* Specify what kind of comparator to compare. Default is `Comparator.LIKE`. But if `customFilter.type` is `FILTER_TYPES.SELECT`, this default value will be `Comparator.EQ`
+
+### customFilter.caseSensitive - [Boolean]
+* default is `false`, and `true` will only work when comparator is `LIKE`.
+
+
+## **Comparator**
+We support the following ways to do the comparison. Each `filter` has its default comparator. For more information, please take refer to the introduction of props above.
+
+|   | Comparator      | Symbol | description             |
+|---|-----------------|--------|-------------------------|
+| 1 | Comparator.LIKE | N/A    | To include filter value |
+| 2 | Comparator.EQ   | =      |                         |
+| 3 | Comparator.NE   | !=     |                         |
+| 4 | Comparator.GT   | >      |                         |
+| 5 | Comparator.GE   | >=     |                         |
+| 6 | Comparator.LT   | <      |                         |
+| 7 | Comparator.LE   | <=     |                         |
+
+## **FILTER_TYPES**
+
+Following properties is valid in `FILTER_TYPES`:
+* TEXT
+* SELECT
+* MULTISELECT
+* NUMBER
+* DATE
+
+You will only need the `FILTER_TYPES` when you are customize the filter component and you want to assign a specify filter mode.
+
+## **Position**
+
+Default filter is rendered inside the table column header, but you can choose to render them as a row by `filterPosition`:
+
+### Render in the top of table body
+
+```js
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="top"
+/>
+```
+
+### Render in the bottom of table body
+```js
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  filterPosition="bottom"
+/>
+```

docs/getting-started.md

@@ -0,0 +1,73 @@
+---
+id: getting-started
+title: Getting Started
+sidebar_label: Getting Started
+---
+
+## Installation
+
+> Due to `react-bootstrap-table2` already taken on npm our module is called **`react-bootstrap-table-next`**. We still use `react-bootstrap-table2` in any our git repository, official website and documentation - only the npm name is different!
+
+```sh
+$ npm install react-bootstrap-table-next --save
+```
+
+## Add CSS
+
+> You first need to add bootstrap css in your application. After **v1.0.0**, we start to suport `bootstrap@4`.
+
+Finish above step, then add the `react-bootstrap-table2` styles: 
+
+```js
+// es5 
+require('react-bootstrap-table-next/dist/react-bootstrap-table2.min.css');
+
+// es6
+import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
+```
+
+## Your First Table
+
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const products = [ ... ];
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () =>
+  <BootstrapTable keyField='id' data={ products } columns={ columns } />
+```
+<hr />
+
+## UMD
+
+### Namespace
+
+* The namespace of `react-bootstrap-table-next` is `ReactBootstrapTable2`
+* The namespace of `react-bootstrap-table2-editor` is `ReactBootstrapTable2Editor`
+* The namespace of `react-bootstrap-table2-filter` is `ReactBootstrapTable2Filter`
+* The namespace of `react-bootstrap-table2-paginator` is `ReactBootstrapTable2Paginator`
+* The namespace of `react-bootstrap-table2-overlay` is `ReactBootstrapTable2Overlay`
+* The namespace of `react-bootstrap-table2-toolkit` is `ReactBootstrapTable2Toolkit`
+
+### npm
+
+After install from npm, your can get UMD module from the `dist`.
+
+### unpkg
+
+* Download`react-bootstrap-table-next` from [here](https://unpkg.com/react-bootstrap-table-next/dist/react-bootstrap-table-next.min.js)
+* Download `react-bootstrap-table2-editor` from [here](https://unpkg.com/react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min.js)
+* Download `react-bootstrap-table2-filter` from [here](https://unpkg.com/react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.js)
+* Download `react-bootstrap-table2-paginator` from [here](https://unpkg.com/react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.js)
+* Download `react-bootstrap-table2-overlay` from [here](https://unpkg.com/react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min.js)
+* Download `react-bootstrap-table2-toolkit` from [here](https://unpkg.com/react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.js)

docs/migration.md

@@ -1,7 +1,12 @@
-# Migration Guide
+---
+id: migration
+title: Migration
+sidebar_label: Migration
+---
+
+## Migration Guide
 
 * Please see the [CHANGELOG](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/new-version-0.1.0.html) for `react-bootstrap-table2` first drop.
-* Please see the [Road Map](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html)  for `react-bootstrap-table2` in 2018/Q1.
 * Feel free to see the [official docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
 
 ## Preface
@@ -20,10 +25,12 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
   * Cell Editing Addons
 * [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
   * Pagination Addons
+* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+  * Table Search
+  * CSV Export
+  * Column Toggle
 * [`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.
 
 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.
 
@@ -48,99 +55,108 @@ const columns = [{
 <BootstrapTable keyField='id' data={ products } columns={ columns } />
 ```
 
-The `text` property is just same as the children for the `TableHeaderColumn`, if you want to custom the header, there's a new property is: [`headerFormatter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnheaderformatter-function).
+The `text` property is just same as the children for the `TableHeaderColumn`, if you want to custom the header, there's a new property is: [`headerFormatter`](./column-props.html#columnheaderformatter-function).
 
-* [`BootstrapTable` Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html)
+* [`BootstrapTable` Definition](./table-props.html)
-* [Column Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html)
+* [Column Definition](./column-props.html)
 
 ## Table Sort
 
-Please see [Work with table sort](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html).   
+Please see [Work with table sort](./basic-sort.html).   
 
-- [x] Basic sorting
+- [v] Basic sorting
-- [x] Custom sort function
+- [v] Custom sort function
-- [x] Default Sort
+- [v] Default Sort
-- [x] Remote mode
+- [v] Remote mode
-- [x] Custom the sorting header
+- [v] Custom the sorting header
-- [x] Sort event listener
+- [v] Sort event listener
-- [ ] Custom the sort caret
+- [v] Custom the sort caret
-- [ ] Sort management
+- [v] Sort management
 - [ ] Multi sort
 
-Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnsort-bool) property on column definition.
+Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](./column-props.html#columnsort-bool) property on column definition.
 
 ## Row Selection
 
-Please see [Work with selection](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-row-select.html).   
+Please see [Work with selection](./basic-row-select.html).   
-Please see [available selectRow configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html).   
+Please see [available selectRow configurations](./row-select-props.html).   
 
-No huge change for row selection.
+No huge changes in row selection.
 
 ## Column Filter
 
-Please see [Work with column filter](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-filter.html).   
+Please see [Work with column filter](./basic-filter.html).   
-Please see [available filter configuration](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html).   
+Please see [available filter configuration](./filter-props.html).   
 
-- [x] Text Filter
+- [v] Text Filter
-- [x] Custom Text Filter
+- [v] Remote Filter
-- [x] Remote Filter
+- [v] Custom Filter Component
-- [x] Custom Filter Component
 - [ ] Regex Filter
-- [x] Select Filter
+- [v] Select Filter
-- [x] Custom Select Filter
+- [v] Number Filter
-- [X] Number Filter
+- [v] Date Filter
-- [X] Date Filter
+- [v] Array Filter
-- [X] Array Filter
+- [v] Programmatically Filter
-- [X] Programmatically Filter
 
 Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   
 
-Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnfilter-object) property on column definition and [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filter-object) prop on `BootstrapTable`.
+Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](./column-props.html#columnfilter-object) property on column definition and [`filter`](./table-props.html#filter-object) prop on `BootstrapTable`.
 
 ## Cell Edit
 
-Please see [Work with cell edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-celledit.html).   
+Please see [Work with cell edit](./basic-celledit.html).   
-Please see [available cell edit configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html).   
+Please see [available cell edit configurations](./cell-edit-props.html).   
 
 Remember to install [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor) firstly.   
 
-No big changes for cell editing, [`validator`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will not support the async call(Promise).
+No big changes for cell editing, [`validator`](./column-props.html#columnvalidator-function) will not support the async call(Promise).
 
 ## Pagination
 
-Please see [Work with pagination](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-pagination.html).   
+Please see [Work with pagination](./basic-pagination.html).   
-Please see [available pagination configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html).   
+Please see [available pagination configurations](./pagination-props.html).   
 
 Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.   
 
-## Table Search
+In newest `react-bootstrap-table2-paginator@2.0.0`, we allow you to custom any part of pagination component more flexible.
-Ｔ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
+## Table Search
-- [x] Custom search value
+Please see [Work with table search](./basic-search.html).   
-- [x] Clear search
+Please see [Search configurations](./search-props.html).   
+
+The 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.
+
+- [v] Custom search component and position
+- [v] Custom search value
+- [v] Clear search
 - [ ] Multiple search
 - [ ] Strict search
 
 ## Row Expand
-- [x] Expand Row Events
+Please see [Work with expandable row](./basic-row-expand.html).   
-- [x] Expand Row Indicator
+Please see [Row expand configurations](./row-expand-props.html).   
-- [x] Expand Row Management
+
-- [x] Custom Expand Row Indicators
+- [v] Expand Row Events
-- [ ] Compatiable with Row Selection
+- [v] Expand Row Indicator
-- [ ] Expand Column position
+- [v] Expand Row Management
-- [ ] Expand Column Style/Class
+- [v] Custom Expand Row Indicators
+- [v] Compatiable with Row Selection
+- [v] Expand Column position
+- [v] Expand Column Style/Class
 
 ## Export CSV
+Please see [Work with export to CSV](./basic-export-csv.html).   
+Please see [Export CSV configurations](./export-csv-props.html).   
+
 Export CSV functionality is like search, which is one of functionality in the `react-bootstrap-table2-toolkit`. All of the legacy functions we already implemented.
 
 ## Remote
 
-> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
+> It's totally different in `react-bootstrap-table2`. Please [see](./basic-remote.html).
 
 
 ## Row insert/Delete
 Not support yet
 
 ## Keyboard Navigation
-Not support yet
+Not support yet

docs/overlay.md

@@ -0,0 +1,19 @@
+---
+id: overlay
+title: Remote Loading/Overlay
+sidebar_label: Overlay
+---
+
+In `react-bootstrap-table2`, you will be easier to custom the loading or overlay on table no matter if remote enabled or not. In the following, we have two way to do it:
+
+-----
+
+## Empty Table
+[**`noDataIndication`**](./table-props.html#nodataindication-function) is a simple case you can take it, if current data size is empty, `react-bootstrap-table2` will call the `noDataIndication` prop and get the result to display on the table.   
+
+[**Here**](../storybook/index.html?selectedKind=EmptyTableOverlay) is a quick exmaple for `noDataIndication`.
+
+## Loading Table
+In the most of case for remote mode, you need the loading animation to tell the user the table is loading or doing some action in the background. Hence, you can lervarge [**`overlay`**](./table-props.html#overlay-function) prop.
+
+[**Here**](../storybook/index.html?selectedKind=EmptyTableOverlay) is also a example for `overlay`

docs/pagination-props.md

@@ -0,0 +1,309 @@
+---
+id: pagination-props
+title: Pagination Props
+---
+
+Following we list all props for `paginationFactory` from [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator).
+
+```js
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const pagination = paginationFactory({
+  page: 2,
+  ...
+});
+
+<BootstrapTable pagination={ pagination } ... />
+```
+
+## Required
+**NONE**
+
+## Optional
+* [custom](#paginationcustom-bool)
+* [page](#paginationpage-number)
+* [sizePerPage](#paginationsizeperpage-number)
+* [totalSize](#paginationtotalsize-number)
+* [pageStartIndex](#paginationpagestartindex-number)
+* [paginationSize](#paginationpaginationsize-number)
+* [sizePerPageList](#paginationsizeperpagelist-array)
+* [withFirstAndLast](#paginationwithfirstandlast-bool)
+* [alwaysShowAllBtns](#paginationalwaysshowallbtns-bool)
+* [firstPageText](#paginationfirstpagetext-any)
+* [prePageText](#paginationprepagetext-any)
+* [nextPageText](#paginationnextpagetext-any)
+* [lastPageText](#paginationlastpagetext-any)
+* [firstPageTitle](#paginationfirstpagetitle-any)
+* [prePageTitle](#paginationprepagetitle-any)
+* [nextPageTitle](#paginationnextpagetitle-any)
+* [lastPageTitle](#paginationlastpagetitle-any)
+* [hideSizePerPage](#paginationhidesizeperpage-bool)
+* [hidePageListOnlyOnePage](#paginationhidepagelistonlyonepage-bool)
+* [onPageChange](#paginationonpagechange-function)
+* [onSizePerPageChange](#paginationonsizeperpagechange-function)
+* [showTotal](#paginationshowtotal-bool)
+* [pageButtonRenderer](#paginationpagebuttonrenderer-function)
+* [pageListRenderer](#paginationpagelistrenderer-function)
+* [sizePerPageRenderer](#paginationsizeperpagerenderer-function)
+* [sizePerPageOptionRenderer](#paginationsizeperpageoptionrenderer-function)
+* [paginationTotalRenderer](#paginationpaginationtotalrenderer-function)
+-----
+
+## pagination.custom - [Bool]
+Default is false, you will enable it only when you need to implement a [customization completely](./basic-pagination.html#completely-customization).
+
+
+## pagination.page - [Number]
+Use `pagination.page` specify the current page when table render.
+
+> It's necessary value when [remote](./table-props.html#remote-bool-object) pagination is enabled.
+
+## pagination.sizePerPage - [Number]
+Use `pagination.sizePerPage` specify the current size per page when table render.
+
+> It's necessary value when [remote](./table-props.html#remote-bool-object) pagination is enabled.
+
+## pagination.totalSize - [Number]
+This props will be necessary value for below two cases:
+
+### remote mode
+
+Because `react-bootstrap-table2` will never know the totally data size actually. Remeber to assign `totalSize` when you enable the remote pagination.
+
+### Customization
+When you need to implement a [customization completely](./basic-pagination.html#completely-customization). You have to give props.
+
+
+## pagination.pageStartIndex - [Number]
+Default is **1**, which means the first page index is start from 1. If your first page want to start from **0**, you can control it via `pageStartIndex`.
+
+## pagination.paginationSize - [Number]
+Default is **5**, which means the size of pagination.
+
+## pagination.sizePerPageList - [Array]
+Default size per page have **10**, **25**, **30**, **50**. You can assign a number of array to replace this default list. However, `sizePerPageList` is flexible to let you decide the text display on the dropdown list:
+
+```js
+[ {
+  text: '5th', value: 5
+}, {
+  text: '10th', value: 10
+}, {
+  text: 'All', value: data.length
+} ]
+```
+
+## pagination.withFirstAndLast - [Bool]
+Default is `true`, you can disable it if you don't want to show the **"Go to first"** and **"Go to last"** page buttons.
+
+## pagination.alwaysShowAllBtns - [Bool]
+Default is `false`, which means `react-bootstrap-table2` will hide the next or previouse page button if unnecessary. Anyway, you can still show them always via `alwaysShowAllBtns` prop.   
+If you also enable `withFirstAndLast`, this prop also keep to show first and last page when you enable it.
+
+## pagination.firstPageText - [Any]
+A quick way to specify the text on the first page button.
+
+## pagination.prePageText - [Any]
+A quick way to specify the text on the previous page button.
+
+## pagination.nextPageText - [Any]
+A quick way to specify the text on the next page button.
+
+## pagination.lastPageText - [Any]
+A quick way to specify the text on the last page button.
+
+## pagination.firstPageTitle - [Any]
+A quick way to specify the title on the first page button.
+
+## pagination.prePageTitle - [Any]
+A quick way to specify the title on the previous page button.
+
+## pagination.nextPageTitle - [Any]
+A quick way to specify the title on the next page button.
+
+## pagination.lastPageTitle - [Any]
+A quick way to specify the title on the last page button.
+
+## pagination.hideSizePerPage - [Bool]
+You can hide the size per page dropdown.
+
+## pagination.hidePageListOnlyOnePage - [Bool]
+You can hide the pagination when there's only one page in table. Default is `false`.
+
+## pagination.showTotal - [Bool]
+Default is `false`, if enable will display a text to indicate the row range of current page.
+
+## pagination.pageButtonRenderer - [Function]
+Custom the page button inside the pagination list. This callback function have one argument which is an object and contain following props:
+
+* `page`: Page number
+* `active`: If this page is current page or not.
+* `disabled`: If this page is disabled or not.
+* `title`: Page title
+* `onPageChange`: Call it when you need to change page
+
+Following is a minimal example:
+```js
+const pageButtonRenderer = ({
+  page,
+  active,
+  disabled,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  // ....
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } ....>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+```
+
+
+## pagination.pageListRenderer - [Function]
+Custom the pagination list component, this callback function have one argument which is an object and contain following props:
+
+* `pages`: Current page
+* `onPageChange`: Call it when you need to change page
+
+Below is a minimal example: 
+```js
+const pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  // just exclude <, <<, >>, >
+  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) } />
+```
+
+## pagination.sizePerPageRenderer - [Function]
+Custom the size per page dropdown component, this callback function have one argument which is an object and contain following props:
+
+* `options`: Dropdown option.
+* `currSizePerPage`: Current size per page.
+* `onSizePerPageChange`: Call it when you need to change size per page.
+
+
+Below is a minimal example: 
+```js
+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
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+```
+
+## pagination.sizePerPageOptionRenderer - [Function]
+Custom the option of size per page dropdown component, this callback function have one argument which is an object and contain following props:
+
+* `text`: The text of option.
+* `page`: The size per page of option.
+* `onSizePerPageChange`: Call it when you need to change size per page.
+
+Below is a minimal example: 
+```js
+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) } />
+```
+
+## pagination.paginationTotalRenderer - [Function]
+Custom the total information, this callbacok function have three arguments: `from`, `to` and `size`. Following is an example:
+
+```js
+const customTotal = (from, to, size) => (
+  <span className="react-bootstrap-table-pagination-total">
+    Showing { from } to { to } of { size } Results
+  </span>
+);
+```
+
+## pagination.onPageChange - [Function]
+Accept a callback function and will be called when page changed. This callback function get below arguments:
+
+**Arguments**
+* page
+* sizePerPage
+
+## pagination.onSizePerPageChange - [Function]
+Accept a callback function and will be called when size per page changed. This callback function get below arguments:
+
+**Arguments**
+* page
+* sizePerPage

docs/row-expand-props.md

@@ -1,35 +1,37 @@
-
+---
-# Row expand
+id: row-expand-props
+title: Row Expand Props
+---
 `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)
+* [renderer (**required**)](#expandrowrenderer-function)
 
 ## Optional
-* [expanded](#expanded)
+* [expanded](#expandrowexpanded-array)
-* [nonExpandable](#nonExpandable)
+* [nonExpandable](#expandrownonexpandable-array)
-* [onExpand](#onExpand)
+* [onExpand](#expandrowonexpand-function)
-* [onExpandAll](#onExpandAll)
+* [onExpandAll](#expandrowonexpandall-function)
-* [showExpandColumn](#showExpandColumn)
+* [showExpandColumn](#expandrowshowexpandcolumn-bool)
-* [onlyOneExpanding](#onlyOneExpanding)
+* [onlyOneExpanding](#expandrowonlyoneexpanding-bool)
-* [expandByColumnOnly](#expandByColumnOnly)
+* [expandByColumnOnly](#expandrowexpandbycolumnonly-bool)
-* [expandColumnPosition](#expandColumnPosition)
+* [expandColumnPosition](#expandrowexpandcolumnposition-string)
-* [expandColumnRenderer](#expandColumnRenderer)
+* [expandColumnRenderer](#expandrowexpandcolumnrenderer-function)
-* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [expandHeaderColumnRenderer](#expandrowexpandheadercolumnrenderer-function)
-* [className](#className)
+* [className](#expandrowclassname-string-function)
-* [parentClassName](#parentClassName)
+* [parentClassName](#expandrowparentclassname-string-function)
 
-### <a name="renderer">expandRow.renderer - [Function]</a>
+-----
 
-Specify the content of expand row, `react-bootstrap-table2` will pass a row object as argument and expect return a react element.
+## expandRow.renderer - [Function]
 
-#### values
+Specify the content of expand row, `react-bootstrap-table2` will pass the two arguments and expect to return a react element:
-* **row**
+
-* **rowIndex**
+* `row`: Currnet row data.
+* `rowIndex`: Currnet row index.
 
-#### examples
 
 ```js
 const expandRow = {
@@ -50,8 +52,9 @@ const expandRow = {
 />
 ```
 
-### <a name='expanded'>expandRow.expanded - [Array]</a>
+
-`expandRow.expanded` allow you have default row expandations on table.
+## expandRow.expanded - [Array]
+`expandRow.expanded` is useful to manage the row expand on table, for example: you can use it to perform the default expands.
 
 ```js
 const expandRow = {
@@ -60,7 +63,7 @@ const expandRow = {
 };
 ```
 
-### <a name='nonExpandable'>expandRow.nonExpandable - [Array]</a>
+## expandRow.nonExpandable - [Array]
 This prop allow you to restrict some rows which can not be expanded by user. `expandRow.nonExpandable` accept an rowkeys array.
 
 ```js
@@ -70,8 +73,8 @@ const expandRow = {
 };
 ```
 
-### <a name='onExpand'>expandRow.onExpand - [Function]</a>
+## expandRow.onExpand - [Function]
-This callback function will be called when a row is expand/collapse and pass following four arguments:
+This prop accept a callback function which will be called when a row is expand/collapse and pass following four arguments:
 `row`, `isExpand`, `rowIndex` and `e`.
 
 ```js
@@ -83,19 +86,74 @@ const expandRow = {
 };
 ```
 
-### <a name='onExpandAll'>expandRow.onExpandAll - [Function]</a>
+
-This callback function will be called when expand/collapse all. It only work when you configure [`expandRow.showExpandColumn`](#showExpandColumn) as `true`.
+## expandRow.onExpandAll - [Function]
+This prop accept a callback function which will be called when expand/collapse all. It only work when you configure [`expandRow.showExpandColumn`](#expandrowshowexpandcolumn-bool) as `true`.
 
 ```js
 const expandRow = {
-  renderer: (row) => ...
+  renderer: (row) => ...,
+  showExpandColumn: true,
   onExpandAll: (isExpandAll, results, e) => {
     // ...
   }
 };
 ```
 
-### <a name='expandColumnRenderer'>expandRow.expandColumnRenderer - [Function]</a>
+## expandRow.showExpandColumn - [Bool]
+Default is `false`, if you want to have a expand indicator, give this prop as `true`.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  showExpandColumn: true
+};
+```
+
+## expandRow.onlyOneExpanding - [Bool]
+Default is `false`. Enable this will only allow one row get expand at the same time.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  onlyOneExpanding: true
+};
+```
+
+## expandRow.expandByColumnOnly - [Bool]
+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
+};
+```
+
+## expandRow.expandColumnPosition - [String]
+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'
+};
+
+## expandRow.expandByColumnOnly - [Bool]
+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
+};
+```
+
+## expandRow.expandColumnRenderer - [Function]
+
 Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
 * `expanded`: If current row is expanded or not
 * `rowKey`: Current row key
@@ -111,65 +169,21 @@ const expandRow = {
 };
 ```
 
-> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
 
-### <a name='expandHeaderColumnRenderer'>expandRow.expandHeaderColumnRenderer - [Function]</a>
+## expandRow.expandHeaderColumnRenderer - [Function]
-Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property `isAnyExpands` which indicate if there's any rows are expanded:
+Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property `isAnyExpands` to indicate if there are any expanded rows:
 
 ```js
 const expandRow = {
-  renderer: (row) => ...
+  renderer: (row) => ...,
+  showExpandColumn: true,
   expandHeaderColumnRenderer: ({ isAnyExpands }) => (
     // ....
   )
 };
 ```
 
-> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+## expandRow.className - [String | Function]
-
-### <a name='showExpandColumn'>expandRow.showExpandColumn - [Bool]</a>
-Default is `false`, if you want to have a expand indicator, give this prop as `true`
-
-```js
-const expandRow = {
-  renderer: (row) => ...
-  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
@@ -178,7 +192,8 @@ const expandRow = {
   className: 'foo'
 };
 ```
-following usage is more flexible way for customing the class name: 
+
+Following case is more flexible way to custom the class name: 
 
 ```js
 const expandRow = {
@@ -190,7 +205,7 @@ const expandRow = {
 };
 ```
 
-### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
+## expandRow.parentClassName - [String | Function]
 Apply the custom class name on parent row of expanded row. For example: 
 
 ```js
@@ -209,4 +224,4 @@ const expandRow = {
     return 'bar';
   }
 };
-```
+```

docs/row-select-props.md

@@ -1,40 +1,54 @@
+---
+id: row-select-props
+title: Row Selection Props
+---
 
-# Row selection
+Following we list all props for [`selectRow` props](./table-props.html#selectrow-object)
-`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.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  ...
+});
+
+<BootstrapTable selectRow={ selectRow } ... />
+```
 
 ## Required
-* [mode (**required**)](#mode)
+* [mode (**required**)](#selectrowmode-string)
 
 ## Optional
-* [selected](#selected)
+* [selected](#selectrowselected-array)
-* [style](#style)
+* [style](#selectrowstyle-object-function)
-* [classes)](#classes)
+* [classes](#selectrowclasses-string-function)
-* [bgColor](#bgColor)
+* [bgColor](#selectrowbgcolor-string-function)
-* [nonSelectable)](#nonSelectable)
+* [nonSelectable](#selectrownonselectable-array)
-* [nonSelectableStyle](#nonSelectableStyle)
+* [nonSelectableStyle](#selectrownonselectablestyle-object-function)
-* [nonSelectableClasses](#nonSelectableClasses)
+* [nonSelectableClasses](#selectrownonselectableclasses-string-function)
-* [clickToSelect)](#clickToSelect)
+* [clickToSelect](#selectrowclicktoselect-bool)
-* [clickToExpand)](#clickToExpand)
+* [clickToExpand](#selectrowclicktoexpand-bool)
-* [clickToEdit](#clickToEdit)
+* [clickToEdit](#selectrowclicktoedit-bool)
-* [onSelect](#onSelect)
+* [onSelect](#selectrowonselect-function)
-* [onSelectAll](#onSelectAll)
+* [onSelectAll](#selectrowonselectall-function)
-* [selectColumnPosition](#selectColumnPosition)
+* [selectColumnPosition](#selectrowselectcolumnposition-string)
-* [hideSelectColumn](#hideSelectColumn)
+* [hideSelectColumn](#selectrowhideselectcolumn-bool)
-* [hideSelectAll](#hideSelectAll)
+* [hideSelectAll](#selectrowhideselectall-bool)
-* [selectionRenderer](#selectionRenderer)
+* [selectionRenderer](#selectrowselectionrenderer-function)
-* [selectionHeaderRenderer](#selectionHeaderRenderer)
+* [selectionHeaderRenderer](#selectrowselectionheaderrenderer-function)
-* [headerColumnStyle](#headerColumnStyle)
+* [headerColumnStyle](#selectrowheadercolumnstyle-object-function)
-* [selectColumnStyle](#selectColumnStyle)
+* [selectColumnStyle](#selectrowselectcolumnstyle-object-function)
 
-### <a name="mode">selectRow.mode - [String]</a>
+-----
+
+## selectRow.mode - [String]
 
 Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `radio` was assigned, there will be a radio button in the selection column; otherwise, the `checkbox` instead.
 
-#### values
+### Available values
 * **radio**
 * **checkbox**
 
-#### examples
+Following is a quick example for single selection: 
 
 ```js
 const selectRow = {
@@ -49,20 +63,7 @@ const selectRow = {
 />
 ```
 
-```js
+## selectRow.selected - [Array]
-const selectRow = {
-  mode: 'checkbox' // multiple row selection
-};
-
-<BootstrapTable
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRowProp }
-/>
-```
-
-### <a name='selected'>selectRow.selected - [Array]</a>
 `selectRow.selected` allow you have default selections on table.
 
 ```js
@@ -72,7 +73,7 @@ const selectRow = {
 };
 ```
 
-### <a name='style'>selectRow.style - [Object | Function]</a>
+## selectRow.style - [Object | Function]
 `selectRow.style` allow you to have custom style on selected rows:
 
 ```js
@@ -91,7 +92,7 @@ const selectRow = {
 };
 ```
 
-### <a name='classes'>selectRow.classes - [String | Function]</a>
+## selectRow.classes - [String | Function]
 `selectRow.classes` allow you to add css class on selected rows:
 
 ```js
@@ -110,8 +111,8 @@ const selectRow = {
 };
 ```
 
-### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
+## selectRow.bgColor - [String | Function]
-The background color when row is selected
+A quick way to specify the background color when row is selected
 
 ```js
 const selectRow = {
@@ -131,7 +132,7 @@ const selectRow = {
 };
 ```
 
-### <a name='nonSelectable'>selectRow.nonSelectable - [Array]</a>
+## selectRow.nonSelectable - [Array]
 This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array.
 
 ```js
@@ -141,7 +142,7 @@ const selectRow = {
 };
 ```
 
-### <a name='nonSelectableStyle'>selectRow.nonSelectableStyle - [Object | Function]</a>
+## selectRow.nonSelectableStyle - [Object | Function]
 This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
 and a callback function for more flexible customization.
 
@@ -165,7 +166,7 @@ const selectRow = {
 };
 ```
 
-### <a name='nonSelectableClasses'>selectRow.nonSelectableClasses - [String | Function]</a>
+## selectRow.nonSelectableClasses - [String | Function]
 This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
 flexible customization
 
@@ -189,7 +190,7 @@ const selectRow = {
 };
 ```
 
-### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
+## selectRow.clickToSelect - [Bool]
 Allow user to select row by clicking on the row.
 
 ```js
@@ -199,10 +200,9 @@ const selectRow = {
 };
 ```
 
-> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
+> Note: When you also enable [cellEdit](./cell-edit-props.html), 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`](#selectrowclicktoedit-bool)
-> 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>
+## selectRow.clickToExpand - [Bool]
 Default is false, enable it will let user able to expand and select row when user clicking on the row.
 
 ```js
@@ -212,8 +212,8 @@ const selectRow = {
 };
 ```
 
-### <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
+## selectRow.clickToEdit - [Bool]
-Able to click to edit cell and select row
+Able to click to edit cell and select row at the same time.
 
 ```js
 const selectRow = {
@@ -223,21 +223,99 @@ const selectRow = {
 };
 ```
 
-### <a name='selectionRenderer'>selectRow.selectionRenderer - [Function]</a>
+## selectRow.onSelect - [Function]
+This callback function will be called when a row is select/unselect and pass following four arguments:
+`row`, `isSelect`, `rowIndex` and `e`.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelect: (row, isSelect, rowIndex, e) => {
+    // ...
+  }
+};
+```
+
+> 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;
+    }
+  }
+};
+```
+
+## selectRow.onSelectAll - [Function]
+This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#selectrowmode-string) as `checkbox`.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelectAll: (isSelect, rows, 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 
+    }
+  }
+};
+```
+
+## selectRow.selectColumnPosition - [String]
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnPosition: 'right'
+};
+```
+
+## selectRow.hideSelectColumn - [Bool]
+Default is `false`, if you don't want to have a selection column, give this prop as `true`
+
+```js
+const selectRow = {
+  mode: 'radio',
+  hideSelectColumn: true,
+  clickToSelect: true,
+  bgColor: 'red'
+};
+```
+
+## selectRow.hideSelectAll - [Bool]
+Default is `false`, if you don't want to render the select all checkbox ine the header of selection column, give this prop as `true`!
+ ```js
+const selectRow = {
+  mode: 'checkbox',
+  hideSelectAll: true
+};
+```
+
+## selectRow.selectionRenderer - [Function]
 Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  selectionRenderer: ({ mode, checked, disabled, rowIndex }) => (
+  selectionRenderer: ({ mode, checked, disabled }) => (
     // ....
   )
 };
 ```
 
-> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+## selectRow.selectionHeaderRenderer - [Function]
-
-### <a name='selectionHeaderRenderer'>selectRow.selectionHeaderRenderer - [Function]</a>
 Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
 
 ```js
@@ -249,10 +327,7 @@ const selectRow = {
 };
 ```
 
-> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+## selectRow.headerColumnStyle - [Object | Function]
-
-
-### <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
@@ -276,7 +351,7 @@ const selectRow = {
 };
 ```
 
-### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
+## selectRow.selectColumnStyle - [Object | Function]
 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
@@ -311,86 +386,3 @@ const selectRow = {
   )
 };
 ```
-
-### <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`.
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex, e) => {
-    // ...
-  }
-};
-```
-
-> 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) => {
-    // ...
-  }
-};
-```
-
-> 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`
-
-```js
-const selectRow = {
-  mode: 'radio',
-  hideSelectColumn: true,
-  clickToSelect: true,
-  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
-};
-```

docs/search-props.md

@@ -0,0 +1,76 @@
+---
+id: search-props
+title: Search Props
+---
+Table search in one of features supported by `react-bootstrap-table2-toolkit`. By passing `search` prop to `ToolkitProvider` for enabling this functionality. 
+
+
+## Required
+**N/A**
+
+## Optional
+* [searchFormatted](#searchsearchformatted-bool)
+* [defaultSearch](#searchdefaultSearch-string)
+* [onColumnMatch](#searchoncolumnmatch-function)
+
+-----
+
+## search.searchFormatted - [Bool]
+
+If you want to search on the formatted data, you are supposed to enable this prop. `react-bootstrap-table2` will check if you define the [column.formatter](./column-props.html#columnformatter-function) when doing search.
+
+```js
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    searchFormatted: true
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
+## search.defaultSearch - [String]
+Accept a string that will be used for default searching when first time table render.
+
+```js
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    defaultSearch: 'search something here'
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
+## search.onColumnMatch - [Function]
+Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:
+
+```js
+function onColumnMatch({
+  searchText,
+  value,
+  column,
+  row
+}) {
+  // implement your custom match logic on every cell value
+}
+ <ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    onColumnMatch
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
+> Notes: You have to return `true` when your match logic is positive and vice versa.
+

docs/table-props.md

@@ -1,68 +1,71 @@
-# Documentation
+---
+id: table-props
+title: BootstrapTable Props
+---
+## Required
+* [keyField (**required**)](#keyfield-required-string)
+* [data (**required**)](#data-required-array)
+* [columns (**required**)](#columns-required-object)
 
-## BootstrapTable Props
+## Optional
+* [remote](#remote-bool-object)
+* [bootstrap4](#bootstrap4-bool)
+* [noDataIndication](#nodataindication-function)
+* [loading](#loading-bool)
+* [overlay](#overlay-function)
+* [caption](#caption-string-node)
+* [striped](#striped-bool)
+* [bordered](#bordered-bool)
+* [hover](#hover-bool)
+* [condensed](#condensed-bool)
+* [id](#id-string)
+* [tabIndexCell](#tabindexcell-bool)
+* [classes](#classes-string)
+* [wrapperClasses](#wrapperClasses-string)
+* [headerClasses](#headerClasses-string)
+* [cellEdit](#celledit-object)
+* [selectRow](#selectrow-object)
+* [rowStyle](#rowstyle-object-function)
+* [rowClasses](#rowclasses-string-function)
+* [rowEvents](#rowevents-object)
+* [hiddenRows](#hiddenrows-array)
+* [sort](#sort-object)
+* [defaultSorted](#defaultsorted-array)
+* [defaultSortDirection](#defaultSortDirection-string)
+* [pagination](#pagination-object)
+* [filter](#filter-object)
+* [filterPosition](#filterposition-string)
+* [onTableChange](#ontablechange-function)
+* [onDataSizeChange](#ondatasizechange-function)
 
-#### Required
+-----
-* [keyField (**required**)](#keyField)
-* [data (**required**)](#data)
-* [columns (**required**)](#columns)
 
-#### Optional
+## keyField(**required**) - [String]
-* [remote](#remote)
-* [bootstrap4](#bootstrap4)
-* [loading](#loading)
-* [caption](#caption)
-* [striped](#striped)
-* [bordered](#bordered)
-* [hover](#hover)
-* [condensed](#condensed)
-* [id](#id)
-* [tabIndexCell](#tabIndexCell)
-* [classes](#classes)
-* [wrapperClasses](#wrapperClasses)
-* [headerClasses](#headerClasses)
-* [cellEdit](#cellEdit)
-* [selectRow](#selectRow)
-* [expandRow](#expandRow)
-* [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.
 
-### <a name='data'>data(**required**) - [Array]</a>
+## data(**required**) - [Array]
 Provides data for your table. It accepts a single Array object.
 
-### <a name='columns'>columns(**required**) - [Object]</a>
+## columns(**required**) - [Object]
-Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
+Accepts a single Array object, please see [columns definition](./column-props.html) for more detail.
 
-### <a name='remote'>remote - [Bool | Object]</a>
+## remote - [Bool | Object]
-Default is `false`, if enable`remote`, you are suppose to handle all the table change events, like: pagination, insert, filtering etc.
+Default is `false`, if enable `remote`, you are supposed to be handle all the table change events, like: pagination, insert, filtering etc.
 This is a chance that you can connect to your remote server or database to manipulate your data.   
 For flexibility reason, you can control what functionality should be handled on remote via a object return:
 
 ```js
 remote={ {
   filter: true,
-  pagination: true,
+  pagination: false,
-  filter: true,
+  sort: false,
-  sort: true,
+  cellEdit: false
-  cellEdit: true
 } }
 ```
 
-In above case, only column filter will be handled on remote.
+In above case, only column filter will be handled on remote because we enable it by giving `true`.
 
-> Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable`
+> Note: when remote is enable, you are suppose to give [`onTableChange`](#ontablechange-function) prop on `BootstrapTable`
 > It's the only way to communicate to your remote server and update table states.
 
 A special case for remote pagination:
@@ -72,14 +75,17 @@ remote={ { pagination: true, filter: false, sort: false } }
 
 There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
 
-### <a name='bootstrap4'>bootstrap4 - [Bool]</a>
+## bootstrap4 - [Bool]
 `true` to indicate your bootstrap version is 4. Default version is 3.
 
-### <a name='loading'>loading - [Bool]</a>
+## noDataIndication - [Function]
-Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
+`noDataIndication` should be a callback function which return anything that will be showed in the table when data is **empty**.
-When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
 
-### <a name='overlay'>overlay - [Function]</a>
+## loading - [Bool]
+Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote-bool-object) is enabled.
+When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay-function) prop, if [`overlay`](#overlay-function) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
+
+## overlay - [Function]
 `overlay` accept a factory function which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
 
 ```sh
@@ -96,56 +102,46 @@ 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`:
+Actually, `react-bootstrap-table2-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>
+## caption - [String | Node]
 Same as HTML [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp), you can set it as String or a React JSX.
 
-### <a name='striped'>striped - [Bool]</a>
+## striped - [Bool]
 Same as bootstrap `.table-striped` class for adding zebra-stripes to a table.
-### <a name='bordered'>bordered - [Bool]</a>
+## bordered - [Bool]
 Same as bootstrap `.table-bordered` class for adding borders to a table and table cells.
-### <a name='hover'>hover - [Bool]</a>
+## hover - [Bool]
 Same as bootstrap `.table-hover` class for adding mouse hover effect (grey background color) on table rows.
-### <a name='condensed'>condensed - [Bool]</a>
+## condensed - [Bool]
 Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
 
-### <a name='id'>id - [String]</a>
+## id - [String]
 Customize id on `table` element.
 
-### <a name='tabIndexCell'>tabIndexCell - [Bool]</a>
+## tabIndexCell - [Bool]
 Enable the `tabIndex` attribute on `<td>` element.
 
-### <a name='classes'>classes - [String]</a>
+## classes - [String]
 Customize class on `table` element.
 
-### <a name='wrapperClasses'>wrapperClasses - [String]</a>
+## wrapperClasses - [String]
-Customize class on the outer element which wrap up the `table` element. 
+Customize class on the outer element which wrap up the `table` element.
 
-### <a name='headerClasses'>headerClasses - [String]</a>
+## headerClasses - [String]
-Customize class on the header row(`tr`). 
+Customize class on the header row(`tr`).
 
-### <a name='cellEdit'>cellEdit - [Object]</a>
+## cellEdit - [Object]
-Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
+Makes table cells editable, please see [cellEdit definition](./cell-edit-props.html) for more detail.
 
-### <a name='selectRow'>selectRow - [Object]</a>
+## selectRow - [Object]
-Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
+Makes table rows selectable, please see [selectRow definition](./row-select-props.html) for more detail.
 
-### <a name='expandRow'>expandRow - [Object]</a>
+## rowStyle - [Object | Function]
-Makes table rows expandable, please see [expandRow definition](./row-expand.md) for more detail.
-
-### <a name='rowStyle'>rowStyle = [Object | Function]</a>
 Custom the style of table rows:
 
 ```js
@@ -162,7 +158,7 @@ const rowStyle = (row, rowIndex) => {
 <BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />
 ```
 
-### <a name='rowClasses'>rowClasses = [String | Function]</a>
+## rowClasses - [String | Function]
 Custom the style of table rows:
 
 ```js
@@ -179,7 +175,7 @@ const rowClasses = (row, rowIndex) => {
 <BootstrapTable data={ data } columns={ columns } rowClasses={ rowClasses } />
 ```
 
-### <a name='rowEvents'>rowEvents - [Object]</a>
+## rowEvents - [Object]
 Custom the events on row:
 
 ```js
@@ -191,7 +187,7 @@ const rowEvents = {
 <BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
 ```
 
-### <a name='hiddenRows'>hiddenRows - [Array]</a>
+## hiddenRows - [Array]
 Hide rows, this props accept an array of row keys:
 
 ```js
@@ -199,7 +195,28 @@ const hiddenRows = [1, 4];
 <BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
 ```
 
-### <a name='defaultSorted'>defaultSorted - [Array]</a>
+## sort - [Object]
+Two cases you probably need to configure `sort` prop:
+
+### Manage sorting state
+You can give `dataField` and `order` to specify the sorting state in table, For example
+
+```js
+<BootstrapTable sort={ { dataField: 'price', order: 'asc' } }>
+```
+
+### One-time sorting configuration
+In earily version, we only can configure [`sortCaret`](./column-props.html#columnsortcaret-function) and [`sortFunc` ](./column-props.html#columnsortfunc-function) per column. But they are same in most of cases.   
+So here we give you a chance to just setup these props in one time.
+
+```js
+<BootstrapTable sort={ {
+  sortCaret: ...
+  sortFunc: ...
+} }>
+```
+
+## defaultSorted - [Array]
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 
 ```js
@@ -209,12 +226,10 @@ const defaultSorted = [{
 }];
 ```
 
-**Note**: Only the first column is sorted currently, see #1083.
+## defaultSortDirection - [String]
-
-### <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`.
 
-### <a name='pagination'>pagination - [Object]</a>
+## pagination - [Object]
 `pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally.
 
 ```sh
@@ -224,17 +239,17 @@ $ npm install react-bootstrap-table2-paginator --save
 After installation of `react-bootstrap-table2-paginator`, you can enable pagination on `react-bootstrap-table2` easily:
 
 ```js
-import paginator from 'react-bootstrap-table2-paginator';
+import paginationFactory from 'react-bootstrap-table2-paginator';
 
 // omit...
 
-<BootstrapTable data={ data } columns={ columns } pagination={ paginator() } />
+<BootstrapTable data={ data } columns={ columns } pagination={ paginationFactory() } />
 ```
 
-`paginator` is a function actually and allow to pass some pagination options, following we list all the available options:
+`paginationFactory` is a function actually and allow to pass some pagination options, following we list all the available options:
 
 ```js
-paginator({
+paginationFactory({
   page, // Specify the current page. It's necessary when remote is enabled
   sizePerPage, // Specify the size per page. It's necessary when remote is enabled
   totalSize, // Total data size. It's necessary when remote is enabled
@@ -266,35 +281,43 @@ paginator({
 })
 ```
 
-### <a name='filter'>filter - [Object]</a>
+## filter - [Object]
-`filter` allow user to filter data by column. However, filter functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
+`filter` allows users to filter data by columns. For more information, please navigate to [filter-props](./filter-props.html).
 
-```sh
+**Getting Started**
+```
 $ npm install react-bootstrap-table2-filter --save
 ```
 
-After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
+After installing `react-bootstrap-table2-filter`, you could easily enable the functionality of `filter`.
 
+**Example**
 ```js
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
-// omit...
+const columns = [{
-const columns = [ {
+  dataField: 'id',
-  dataField: 'id', 
+  text: 'Product ID'
-  text: 'Production ID'
 }, {
   dataField: 'name',
-  text: 'Production Name',
+  text: 'Product Name'
-  filter: textFilter()  // apply text filter
 }, {
   dataField: 'price',
-  text: 'Production Price'
+  text: 'Product Price',
-} ];
+  filter: textFilter() // apply text filter
-<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
-### <a name='onTableChange'>onTableChange - [Function]</a>
+## filterPosition - [String]
-This callback function will be called when [`remote`](#remote) enabled only.
+Available value is `inline`, `top` and `bottom`, default is `inline`. This prop decide where `react-bootstrap-table` render column filter.
+
+
+
+## onTableChange - [Function]
+This callback function will be called when [`remote`](#remote-bool-object) enabled only.
 
 ```js
 const onTableChange = (type, newState) => {
@@ -312,7 +335,7 @@ There's only two arguments will be passed to `onTableChange`: `type` and `newSta
 * `sort`
 * `cellEdit`
 
-Following is a shape of `newState`
+Following is a all available properties in `newState` object:
 
 ```js
 {
@@ -330,10 +353,7 @@ Following is a shape of `newState`
 }
 ```
 
-### <a name='filterPosition'>filterPosition - [String]</a>
+## onDataSizeChange - [Function]
-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
@@ -348,3 +368,4 @@ handleDataChange = ({ dataSize }) => {
   ....
 />
 ```
+

docs/toolkits-getting-started.md

@@ -0,0 +1,72 @@
+---
+id: toolkits-getting-started
+title: Getting Started
+sidebar_label: Getting Started
+---
+
+## Introduction
+
+`react-bootstrap-table2` support following features in `react-bootstrap-table2-toolkit` package:
+
+* Export CSV
+* Table Search
+* Column Toggle
+
+
+## Installation
+
+```sh
+$ npm install react-bootstrap-table2-toolkit --save
+```
+
+## Add CSS
+
+```js
+// es5 
+require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css');
+
+// es6
+import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
+```
+
+## Usage
+
+`react-bootstrap-table2-toolkit` default give you a react context wrapper: `ToolkitProvider`. When you use any toolkit functionalities, you are supposed to render toolkit component and `BootstrapTable` as the children of `ToolkitProvider`:
+
+```js
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+>
+  {
+    props =>
+      <BootstrapTable { ...props.baseProps } />
+  }
+</ToolkitProvider>
+```
+
+In addition, You have to move following required props from `BootstraTable` to `ToolkitProvider` and inject them to `BootstrapTable` from the `baseProps` provided by `ToolkitProvider`:
+
+* [keyField](./table-props.html#keyfield-required-string)
+* [data](./table-props.html#data-required-array)
+* [columns](./table-props.html#columns-required-object)
+* [bootstrap4](./table-props.html#bootstrap4-bool)
+
+### Additional props on ToolkitProvider
+
+* [search](./search-props.html): For enabling search.
+* [exportCSV](./export-csv-props.html): For enabling export CSV.
+* **columnToggle**: For enabling column toggle.
+
+## Available children props
+
+`ToolkitProvider` will pass following props to the childrens:
+
+* `baseProps`: It have the basic props from `ToolkitProvider` and also contain few internal data.
+* `searchProps`: props for search component.
+* `csvProps`: props for export csv component.
+* `columnToggleProps`: props for column toggle component.

enzyme-setup.js

@@ -1,8 +0,0 @@
-import Adapter from 'enzyme-adapter-react-16.3';
-import { configure } from 'enzyme';
-
-const configureEnzyme = () => {
-  configure({ adapter: new Adapter() });
-};
-
-configureEnzyme();

gulpfile.babel.js

@@ -1,94 +0,0 @@
-import gulp from 'gulp';
-import babel from 'gulp-babel';
-import sass from 'gulp-sass';
-import cleanCSS from 'gulp-clean-css';
-import cleanDir from 'gulp-clean';
-import rename from 'gulp-rename';
-import shell from 'gulp-shell';
-
-const LIB = 'lib';
-const DIST = 'dist';
-const TEST = 'test';
-const PKG_PATH = './packages';
-const NODE_MODULES = 'node_modules';
-
-const JS_PKGS = [
-  'react-bootstrap-table2',
-  'react-bootstrap-table2-editor',
-  'react-bootstrap-table2-filter',
-  'react-bootstrap-table2-overlay',
-  'react-bootstrap-table2-paginator',
-  'react-bootstrap-table2-toolkit'
-].reduce((pkg, curr) => `${curr}|${pkg}`, '');
-
-const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
-
-const STYLE_PKGS = [
-  'react-bootstrap-table2',
-  'react-bootstrap-table2-filter',
-  'react-bootstrap-table2-paginator',
-  'react-bootstrap-table2-toolkit',
-].reduce((pkg, curr) => `${curr}|${pkg}`, '');
-
-const STYLE_SKIPS = `+(${NODE_MODULES})`;
-
-
-function clean() {
-  return gulp
-    .src(`./packages/+(${JS_PKGS})/+(${LIB}|${DIST})`, { allowEmpty: true })
-    .pipe(cleanDir());
-}
-
-function scripts() {
-  return gulp
-    .src([
-      `./packages/+(${JS_PKGS})/**/*.js`,
-      `!packages/+(${JS_PKGS})/${JS_SKIPS}/**/*.js`
-    ])
-    .pipe(babel())
-    .pipe(rename((path) => {
-      if (path.dirname.indexOf('src') > -1) {
-        path.dirname = path.dirname.replace('src', `${LIB}/src`);
-      } else {
-        path.dirname += `/${LIB}`;
-      }
-    }))
-    .pipe(gulp.dest(PKG_PATH));
-}
-
-function styles() {
-  return gulp
-    .src([
-      `./packages/+(${STYLE_PKGS})/style/**/*.scss`,
-      `!packages/+(${STYLE_PKGS})/${STYLE_SKIPS}/**/*.scss`
-    ])
-    .pipe(sass().on('error', sass.logError))
-    .pipe(rename((path) => {
-      path.dirname = path.dirname.replace('style', DIST);
-    }))
-    .pipe(gulp.dest(PKG_PATH))
-    .pipe(cleanCSS({ compatibility: 'ie8' }))
-    .pipe(rename((path) => {
-      path.extname = '.min.css';
-    }))
-    .pipe(gulp.dest(PKG_PATH));
-}
-
-function umd(done) {
-  gulp.parallel(
-    () => gulp.src('./webpack/next.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
-    () => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
-    () => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
-    () => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
-    () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
-    () => gulp.src('./webpack/toolkit.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
-  )();
-  done();
-}
-
-const buildJS = gulp.parallel(umd, scripts);
-const buildCSS = styles;
-const build = gulp.series(clean, gulp.parallel(buildJS, buildCSS));
-
-gulp.task('prod', build);
-gulp.task('default', build);

lerna.json

@@ -1,7 +0,0 @@
-{
-  "lerna": "2.0.0",
-  "packages": [
-    "packages/*"
-  ],
-  "version": "independent"
-}

package.json

@@ -1,109 +0,0 @@
-{
-  "name": "react-bootstrap-table2",
-  "version": "0.0.1",
-  "private": true,
-  "description": "Rebuilt for react-bootstrap-table",
-  "main": "index.js",
-  "scripts": {
-    "postinstall": "lerna bootstrap",
-    "build": "./node_modules/.bin/gulp prod",
-    "lint": "eslint ./packages --ext .js --ext .jsx --ignore-path .gitignore",
-    "pretest": "yarn lint --cache",
-    "test": "jest",
-    "test:coverage": "jest --coverage",
-    "test:watch": "jest --coverage --watch",
-    "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook",
-    "gh-pages:clean": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:clean",
-    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build",
-    "release": "yarn install && yarn build && lerna publish"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
-  },
-  "author": "AllenFang",
-  "contributors": [
-    {
-      "name": "Allen Fang",
-      "email": "ayu780129@hotmail.com",
-      "url": "https://github.com/AllenFang"
-    },
-    {
-      "name": "Chun-MingChen",
-      "email": "nick830314@gmail.com",
-      "url": "https://github.com/Chun-MingChen"
-    }
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/react-bootstrap-table/react-bootstrap-table2/issues"
-  },
-  "homepage": "https://github.com/react-bootstrap-table/react-bootstrap-table2#readme",
-  "devDependencies": {
-    "babel-cli": "6.26.0",
-    "babel-core": "6.25.0",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "7.1.1",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-react": "6.24.1",
-    "babel-preset-stage-0": "6.24.1",
-    "babel-register": "6.24.1",
-    "css-loader": "0.28.1",
-    "enzyme": "3.4.0",
-    "enzyme-adapter-react-16.3": "1.0.0",
-    "enzyme-to-json": "3.3.4",
-    "eslint": "4.5.0",
-    "eslint-config-airbnb": "15.1.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-import": "2.7.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.2.1",
-    "gulp": "4.0.0",
-    "gulp-babel": "7.0.0",
-    "gulp-clean": "0.4.0",
-    "gulp-clean-css": "3.9.2",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "3.1.0",
-    "gulp-shell": "0.6.5",
-    "html-webpack-plugin": "2.30.1",
-    "jest": "20.0.4",
-    "jsdom": "11.2.0",
-    "jsdom-global": "3.0.2",
-    "lerna": "2.8.0",
-    "node-sass": "4.5.3",
-    "react-test-renderer": "16.0.0",
-    "sass-loader": "6.0.6",
-    "sinon": "3.2.1",
-    "style-loader": "0.17.0",
-    "webpack": "3.5.4",
-    "webpack-dev-server": "2.7.1"
-  },
-  "dependencies": {
-    "classnames": "^2.2.5",
-    "prop-types": "15.5.10",
-    "react": "16.4.0",
-    "react-dom": "16.4.0",
-    "underscore": "1.9.1"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "packages/*/src/**/*.js",
-      "packages/*/index.js",
-      "!packages/react-bootstrap-table2-example/**/*.js"
-    ],
-    "roots": [
-      "<rootDir>/packages"
-    ],
-    "setupFiles": [
-      "<rootDir>/enzyme-setup.js"
-    ],
-    "modulePaths": [
-      "<rootDir>/packages/react-bootstrap-table2"
-    ],
-    "testEnvironment": "node",
-    "testMatch": [
-      "**/test/**/*.test.js"
-    ]
-  }
-}

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

@@ -1,19 +0,0 @@
-import createContext from './src/context';
-import withRowLevelCellEdit from './src/row-consumer';
-import createEditingCell from './src/editing-cell-consumer';
-import {
-  EDITTYPE,
-  DBCLICK_TO_CELL_EDIT,
-  DELAY_FOR_DBCLICK
-} from './src/const';
-
-export default (options = {}) => ({
-  createContext,
-  createEditingCell,
-  withRowLevelCellEdit,
-  DBCLICK_TO_CELL_EDIT,
-  DELAY_FOR_DBCLICK,
-  options
-});
-
-export const Type = EDITTYPE;

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

@@ -1,47 +0,0 @@
-{
-  "name": "react-bootstrap-table2-editor",
-  "version": "1.4.0",
-  "description": "it's the editor addon for react-bootstrap-table2",
-  "main": "./lib/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
-  },
-  "keywords": [
-    "react",
-    "bootstrap",
-    "table",
-    "grid",
-    "react-bootstrap-table-addons",
-    "react-component"
-  ],
-  "files": [
-    "lib/",
-    "dist/"
-  ],
-  "tags": [
-    "react"
-  ],
-  "author": "AllenFang",
-  "contributors": [
-    {
-      "name": "Allen Fang",
-      "email": "ayu780129@hotmail.com",
-      "url": "https://github.com/AllenFang"
-    },
-    {
-      "name": "Chun-MingChen",
-      "email": "nick830314@gmail.com",
-      "url": "https://github.com/Chun-MingChen"
-    }
-  ],
-  "peerDependencies": {
-    "prop-types": "^15.0.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
-  }
-}

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

@@ -1,65 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-class CheckBoxEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: props.defaultValue.toString() === props.value.split(':')[0]
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  componentDidMount() {
-    const { didMount } = this.props;
-    this.checkbox.focus();
-    if (didMount) didMount();
-  }
-
-  getValue() {
-    const [positive, negative] = this.props.value.split(':');
-    return this.checkbox.checked ? positive : negative;
-  }
-
-  handleChange(e) {
-    if (this.props.onChange) this.props.onChange(e);
-    const { target } = e;
-    this.setState(() => ({ checked: target.checked }));
-  }
-
-  render() {
-    const { defaultValue, didMount, className, ...rest } = this.props;
-    const editorClass = cs('editor edit-chseckbox checkbox', className);
-    return (
-      <input
-        ref={ node => this.checkbox = node }
-        type="checkbox"
-        className={ editorClass }
-        { ...rest }
-        checked={ this.state.checked }
-        onChange={ this.handleChange }
-      />
-    );
-  }
-}
-
-CheckBoxEditor.propTypes = {
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object
-  ]),
-  value: PropTypes.string,
-  defaultValue: PropTypes.any,
-  onChange: PropTypes.func,
-  didMount: PropTypes.func
-};
-CheckBoxEditor.defaultProps = {
-  className: '',
-  value: 'on:off',
-  defaultValue: false,
-  onChange: undefined,
-  didMount: undefined
-};
-export default CheckBoxEditor;

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

@@ -1,12 +0,0 @@
-export const TIME_TO_CLOSE_MESSAGE = 3000;
-export const DELAY_FOR_DBCLICK = 200;
-export const CLICK_TO_CELL_EDIT = 'click';
-export const DBCLICK_TO_CELL_EDIT = 'dbclick';
-
-export const EDITTYPE = {
-  TEXT: 'text',
-  SELECT: 'select',
-  TEXTAREA: 'textarea',
-  CHECKBOX: 'checkbox',
-  DATE: 'date'
-};

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

@@ -1,161 +0,0 @@
-/* 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';
-
-const CellEditContext = React.createContext();
-
-export default (
-  _,
-  dataOperator,
-  isRemoteCellEdit,
-  handleCellChange
-) => {
-  class CellEditProvider extends React.Component {
-    static propTypes = {
-      data: PropTypes.array.isRequired,
-      selectRow: PropTypes.object,
-      options: PropTypes.shape({
-        mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
-        onErrorMessageDisappear: PropTypes.func,
-        blurToSave: PropTypes.bool,
-        beforeSaveCell: PropTypes.func,
-        afterSaveCell: PropTypes.func,
-        onStartEdit: PropTypes.func,
-        nonEditableRows: PropTypes.func,
-        timeToCloseMessage: PropTypes.number,
-        errorMessage: PropTypes.any
-      })
-    }
-
-    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);
-      this.handleCellUpdate = this.handleCellUpdate.bind(this);
-      this.state = {
-        ridx: null,
-        cidx: null,
-        message: null
-      };
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.cellEdit && isRemoteCellEdit()) {
-        if (nextProps.cellEdit.options.errorMessage) {
-          this.setState(() => ({
-            message: nextProps.cellEdit.options.errorMessage
-          }));
-        } else {
-          this.escapeEditing();
-        }
-      }
-    }
-
-    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 rowId = _.get(row, keyField);
-      const oldValue = _.get(row, column.dataField);
-      if (isRemoteCellEdit()) {
-        handleCellChange(rowId, column.dataField, newValue);
-      } else {
-        dataOperator.editCell(data, keyField, rowId, column.dataField, newValue);
-        if (_.isFunction(afterSaveCell)) afterSaveCell(oldValue, newValue, row, column);
-        this.completeEditing();
-      }
-    }
-
-    completeEditing() {
-      this.setState(() => ({
-        ridx: null,
-        cidx: null,
-        message: null
-      }));
-    }
-
-    startEditing(ridx, cidx) {
-      const editing = () => {
-        this.setState(() => ({
-          ridx,
-          cidx
-        }));
-      };
-
-      const { selectRow } = this.props;
-      if (!selectRow || (selectRow.clickToEdit || !selectRow.clickToSelect)) editing();
-    }
-
-    escapeEditing() {
-      this.setState(() => ({
-        ridx: null,
-        cidx: null
-      }));
-    }
-
-    render() {
-      const {
-        cellEdit: {
-          options: { nonEditableRows, errorMessage, ...optionsRest },
-          ...cellEditRest
-        }
-      } = this.props;
-
-      const newCellEdit = {
-        ...optionsRest,
-        ...cellEditRest,
-        ...this.state,
-        nonEditableRows: _.isDefined(nonEditableRows) ? nonEditableRows() : [],
-        onStart: this.startEditing,
-        onEscape: this.escapeEditing,
-        onUpdate: this.handleCellUpdate
-      };
-
-      return (
-        <CellEditContext.Provider
-          value={ { ...newCellEdit } }
-        >
-          { this.props.children }
-        </CellEditContext.Provider>
-      );
-    }
-  }
-  return {
-    Provider: CellEditProvider
-  };
-};
-
-export const Consumer = CellEditContext.Consumer;

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

@@ -1,45 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-class DateEditor extends Component {
-  componentDidMount() {
-    const { defaultValue, didMount } = this.props;
-    this.date.valueAsDate = new Date(defaultValue);
-    this.date.focus();
-    if (didMount) didMount();
-  }
-
-  getValue() {
-    return this.date.value;
-  }
-
-  render() {
-    const { defaultValue, didMount, className, ...rest } = this.props;
-    const editorClass = cs('form-control editor edit-date', className);
-    return (
-      <input
-        ref={ node => this.date = node }
-        type="date"
-        className={ editorClass }
-        { ...rest }
-      />
-    );
-  }
-}
-
-DateEditor.propTypes = {
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object
-  ]),
-  defaultValue: PropTypes.string,
-  didMount: PropTypes.func
-};
-DateEditor.defaultProps = {
-  className: '',
-  defaultValue: '',
-  didMount: undefined
-};
-export default DateEditor;

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

@@ -1,88 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
-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;
-    this.select.focus();
-    if (didMount) didMount();
-  }
-
-  setOptions(options) {
-    this.setState({ options });
-  }
-
-  getValue() {
-    return this.select.value;
-  }
-
-  render() {
-    const { defaultValue, didMount, getOptions, className, ...rest } = this.props;
-    const editorClass = cs('form-control editor edit-select', className);
-
-    const attr = {
-      ...rest,
-      className: editorClass
-    };
-
-    return (
-      <select
-        { ...attr }
-        ref={ node => this.select = node }
-        defaultValue={ defaultValue }
-      >
-        {
-          this.state.options.map(({ label, value }) => (
-            <option key={ value } value={ value }>{ label }</option>
-          ))
-        }
-      </select>
-    );
-  }
-}
-
-DropDownEditor.propTypes = {
-  row: PropTypes.object.isRequired,
-  column: PropTypes.object.isRequired,
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  className: PropTypes.string,
-  style: PropTypes.object,
-  options: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.any
-    }))
-  ]),
-  didMount: PropTypes.func,
-  getOptions: PropTypes.func
-};
-DropDownEditor.defaultProps = {
-  className: '',
-  defaultValue: '',
-  style: {},
-  options: [],
-  didMount: undefined,
-  getOptions: undefined
-};
-export default DropDownEditor;

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

@@ -1,44 +0,0 @@
-/* eslint react/prop-types: 0 */
-import React from 'react';
-import { Consumer } from './context';
-import createEditingCell from './editing-cell';
-
-export default (_, onStartEdit) => {
-  const EditingCell = createEditingCell(_, onStartEdit);
-  const renderWithEditingCell = (props, cellEdit) => {
-    const content = _.get(props.row, props.column.dataField);
-    let editCellstyle = props.column.editCellStyle || {};
-    let editCellclasses = props.column.editCellClasses;
-    if (_.isFunction(props.column.editCellStyle)) {
-      editCellstyle = props.column.editCellStyle(
-        content,
-        props.row,
-        props.rowIndex,
-        props.columnIndex
-      );
-    }
-    if (_.isFunction(props.column.editCellClasses)) {
-      editCellclasses = props.column.editCellClasses(
-        content,
-        props.row,
-        props.rowIndex,
-        props.columnIndex)
-      ;
-    }
-
-    return (
-      <EditingCell
-        { ...props }
-        className={ editCellclasses }
-        style={ editCellstyle }
-        { ...cellEdit }
-      />
-    );
-  };
-
-  return props => (
-    <Consumer>
-      { cellEdit => renderWithEditingCell(props, cellEdit) }
-    </Consumer>
-  );
-};

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

@@ -1,227 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* 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';
-
-import DropdownEditor from './dropdown-editor';
-import TextAreaEditor from './textarea-editor';
-import CheckBoxEditor from './checkbox-editor';
-import DateEditor from './date-editor';
-import TextEditor from './text-editor';
-import EditorIndicator from './editor-indicator';
-import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
-
-export default (_, onStartEdit) =>
-  class EditingCell extends Component {
-    static propTypes = {
-      row: PropTypes.object.isRequired,
-      rowIndex: PropTypes.number.isRequired,
-      column: PropTypes.object.isRequired,
-      columnIndex: PropTypes.number.isRequired,
-      onUpdate: PropTypes.func.isRequired,
-      onEscape: PropTypes.func.isRequired,
-      timeToCloseMessage: PropTypes.number,
-      autoSelectText: PropTypes.bool,
-      className: PropTypes.string,
-      style: PropTypes.object
-    }
-
-    static defaultProps = {
-      timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
-      className: null,
-      autoSelectText: false,
-      style: {}
-    }
-
-    constructor(props) {
-      super(props);
-      this.indicatorTimer = null;
-      this.clearTimer = this.clearTimer.bind(this);
-      this.handleBlur = this.handleBlur.bind(this);
-      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() {
-      this.clearTimer();
-    }
-
-    UNSAFE_componentWillReceiveProps({ message }) {
-      if (_.isDefined(message)) {
-        this.createTimer();
-        this.setState(() => ({
-          invalidMessage: message
-        }));
-      }
-    }
-
-    clearTimer() {
-      if (this.indicatorTimer) {
-        clearTimeout(this.indicatorTimer);
-      }
-    }
-
-    createTimer() {
-      this.clearTimer();
-      const { timeToCloseMessage, onErrorMessageDisappear } = this.props;
-      this.indicatorTimer = _.sleep(() => {
-        this.setState(() => ({
-          invalidMessage: null
-        }));
-        if (_.isFunction(onErrorMessageDisappear)) onErrorMessageDisappear();
-      }, 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(
-          newValue,
-          row,
-          column,
-          this.asyncbeforeCompete(newValue)
-        );
-        if (_.isObject(validateForm)) {
-          if (validateForm.async) {
-            return;
-          } else if (!validateForm.valid) {
-            this.displayErrorMessage(validateForm.message);
-            return;
-          }
-        }
-      }
-      onUpdate(row, column, newValue);
-    }
-
-    handleBlur() {
-      const { onEscape, blurToSave } = this.props;
-      if (blurToSave) {
-        this.beforeComplete(this.editor.getValue());
-      } else {
-        onEscape();
-      }
-    }
-
-    handleKeyDown(e) {
-      const { onEscape } = this.props;
-      if (e.keyCode === 27) { // ESC
-        onEscape();
-      } else if (e.keyCode === 13) { // ENTER
-        this.beforeComplete(this.editor.getValue());
-      }
-    }
-
-    handleClick(e) {
-      if (e.target.tagName !== 'TD') {
-        // To avoid the row selection event be triggered,
-        // When user define selectRow.clickToSelect and selectRow.clickToEdit
-        // We shouldn't trigger selection event even if user click on the cell editor(input)
-        e.stopPropagation();
-      }
-    }
-
-    render() {
-      let editor;
-      const { row, column, className, style, rowIndex, columnIndex, autoSelectText } = this.props;
-      const { dataField } = column;
-
-      const value = _.get(row, dataField);
-      const hasError = _.isDefined(this.state.invalidMessage);
-
-      let customEditorClass = column.editorClasses || '';
-      if (_.isFunction(column.editorClasses)) {
-        customEditorClass = column.editorClasses(value, row, rowIndex, columnIndex);
-      }
-
-      let editorStyle = column.editorStyle || {};
-      if (_.isFunction(column.editorStyle)) {
-        editorStyle = column.editorStyle(value, row, rowIndex, columnIndex);
-      }
-
-      const editorClass = cs({
-        animated: hasError,
-        shake: hasError
-      }, customEditorClass);
-
-      let editorProps = {
-        ref: node => this.editor = node,
-        defaultValue: value,
-        style: editorStyle,
-        className: editorClass,
-        onKeyDown: this.handleKeyDown,
-        onBlur: this.handleBlur
-      };
-
-      if (onStartEdit) {
-        editorProps.didMount = () => onStartEdit(row, column, rowIndex, columnIndex);
-      }
-
-      const isDefaultEditorDefined = _.isObject(column.editor);
-
-      if (isDefaultEditorDefined) {
-        editorProps = {
-          ...editorProps,
-          ...column.editor
-        };
-      } else if (_.isFunction(column.editorRenderer)) {
-        editorProps = {
-          ...editorProps,
-          onUpdate: this.beforeComplete
-        };
-      }
-
-      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 } />;
-      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
-        editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
-      } 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 } />;
-      }
-
-      return (
-        <td
-          className={ cs('react-bootstrap-table-editing-cell', className) }
-          style={ style }
-          onClick={ this.handleClick }
-        >
-          { editor }
-          { hasError ? <EditorIndicator invalidMessage={ this.state.invalidMessage } /> : null }
-        </td>
-      );
-    }
-  };

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

@@ -1,19 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const EditorIndicator = ({ invalidMessage }) =>
-  (
-    <div className="alert alert-danger in" role="alert">
-      <strong>{ invalidMessage }</strong>
-    </div>
-  );
-
-EditorIndicator.propTypes = {
-  invalidMessage: PropTypes.string
-};
-
-EditorIndicator.defaultProps = {
-  invalidMessage: null
-};
-export default EditorIndicator;

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

@@ -1,43 +0,0 @@
-/* eslint react/prop-types: 0 */
-import React from 'react';
-import { DELAY_FOR_DBCLICK, DBCLICK_TO_CELL_EDIT, CLICK_TO_CELL_EDIT } from './const';
-import { Consumer } from './context';
-
-export default (Component, selectRowEnabled) => {
-  const renderWithCellEdit = (props, cellEdit) => {
-    const key = props.value;
-    const editableRow = !(
-      cellEdit.nonEditableRows.length > 0 &&
-      cellEdit.nonEditableRows.indexOf(key) > -1
-    );
-
-    const attrs = {};
-
-    if (selectRowEnabled && cellEdit.mode === DBCLICK_TO_CELL_EDIT) {
-      attrs.DELAY_FOR_DBCLICK = DELAY_FOR_DBCLICK;
-    }
-
-    return (
-      <Component
-        { ...props }
-        { ...attrs }
-        editingRowIdx={ cellEdit.ridx }
-        editingColIdx={ cellEdit.cidx }
-        editable={ editableRow }
-        onStart={ cellEdit.onStart }
-        clickToEdit={ cellEdit.mode === CLICK_TO_CELL_EDIT }
-        dbclickToEdit={ cellEdit.mode === DBCLICK_TO_CELL_EDIT }
-      />
-    );
-  };
-  function withConsumer(props) {
-    return (
-      <Consumer>
-        { cellEdit => renderWithCellEdit(props, cellEdit) }
-      </Consumer>
-    );
-  }
-
-  withConsumer.displayName = 'WithCellEditingRowConsumer';
-  return withConsumer;
-};

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

@@ -1,51 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-class TextEditor extends Component {
-  componentDidMount() {
-    const { defaultValue, didMount, autoSelectText } = this.props;
-    this.text.value = defaultValue;
-    this.text.focus();
-    if (autoSelectText) this.text.select();
-    if (didMount) didMount();
-  }
-
-  getValue() {
-    return this.text.value;
-  }
-
-  render() {
-    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
-    const editorClass = cs('form-control editor edit-text', className);
-    return (
-      <input
-        ref={ node => this.text = node }
-        type="text"
-        className={ editorClass }
-        { ...rest }
-      />
-    );
-  }
-}
-
-TextEditor.propTypes = {
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object
-  ]),
-  defaultValue: PropTypes.oneOfType([
-    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

@@ -1,66 +0,0 @@
-/* eslint no-return-assign: 0 */
-import React, { Component } from 'react';
-import cs from 'classnames';
-import PropTypes from 'prop-types';
-
-class TextAreaEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  componentDidMount() {
-    const { defaultValue, didMount, autoSelectText } = this.props;
-    this.text.value = defaultValue;
-    this.text.focus();
-    if (autoSelectText) this.text.select();
-    if (didMount) didMount();
-  }
-
-  getValue() {
-    return this.text.value;
-  }
-
-  handleKeyDown(e) {
-    if (e.keyCode === 13 && !e.shiftKey) return;
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(e);
-    }
-  }
-
-  render() {
-    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
-    const editorClass = cs('form-control editor edit-textarea', className);
-    return (
-      <textarea
-        ref={ node => this.text = node }
-        type="textarea"
-        className={ editorClass }
-        { ...rest }
-        onKeyDown={ this.handleKeyDown }
-      />
-    );
-  }
-}
-
-TextAreaEditor.propTypes = {
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object
-  ]),
-  defaultValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  onKeyDown: PropTypes.func,
-  autoSelectText: PropTypes.bool,
-  didMount: PropTypes.func
-};
-TextAreaEditor.defaultProps = {
-  className: '',
-  defaultValue: '',
-  autoSelectText: false,
-  onKeyDown: undefined,
-  didMount: undefined
-};
-export default TextAreaEditor;

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

@@ -1,416 +0,0 @@
-import 'jsdom-global/register';
-import React from 'react';
-import { shallow } from 'enzyme';
-import _ from 'react-bootstrap-table-next/src/utils';
-import dataOperator from 'react-bootstrap-table-next/src/store/operators';
-
-import {
-  CLICK_TO_CELL_EDIT,
-  DBCLICK_TO_CELL_EDIT,
-  DELAY_FOR_DBCLICK
-} from '../src/const';
-import createCellEditContext, { Consumer } from '../src/context';
-import cellEditFactory from '../index';
-
-describe('CellEditContext', () => {
-  let wrapper;
-  let cellEdit;
-  let CellEditContext;
-
-  const data = [{
-    id: 1,
-    name: 'A'
-  }, {
-    id: 2,
-    name: 'B'
-  }];
-
-  const keyField = 'id';
-
-  const columns = [{
-    dataField: 'id',
-    text: 'ID'
-  }, {
-    dataField: 'name',
-    text: 'Name'
-  }];
-
-  const defaultCellEdit = {
-    mode: CLICK_TO_CELL_EDIT
-  };
-
-  const defaultSelectRow = undefined;
-
-  const mockBase = jest.fn((() => null));
-
-  const handleCellChange = jest.fn();
-
-  function shallowContext(
-    customCellEdit = defaultCellEdit,
-    enableRemote = false,
-    selectRow = defaultSelectRow
-  ) {
-    mockBase.mockReset();
-    handleCellChange.mockReset();
-    CellEditContext = createCellEditContext(
-      _,
-      dataOperator,
-      jest.fn().mockReturnValue(enableRemote),
-      handleCellChange
-    );
-    cellEdit = cellEditFactory(customCellEdit);
-    return (
-      <CellEditContext.Provider
-        cellEdit={ cellEdit }
-        keyField={ keyField }
-        columns={ columns }
-        selectRow={ selectRow }
-        data={ data }
-      >
-        <Consumer>
-          {
-            cellEditProps => mockBase(cellEditProps)
-          }
-        </Consumer>
-      </CellEditContext.Provider>
-    );
-  }
-
-  describe('default render', () => {
-    beforeEach(() => {
-      wrapper = shallow(shallowContext());
-      wrapper.render();
-    });
-
-    it('should have correct Provider property after calling createCellEditContext', () => {
-      expect(CellEditContext.Provider).toBeDefined();
-    });
-
-    it('should have correct state.ridx', () => {
-      expect(wrapper.state().ridx).toBeNull();
-    });
-
-    it('should have correct state.cidx', () => {
-      expect(wrapper.state().cidx).toBeNull();
-    });
-
-    it('should have correct state.message', () => {
-      expect(wrapper.state().message).toBeNull();
-    });
-
-    it('should pass correct cell editing props to children element', () => {
-      expect(wrapper.length).toBe(1);
-      expect(JSON.stringify(mockBase.mock.calls[0])).toEqual(JSON.stringify([{
-        ...defaultCellEdit,
-        DBCLICK_TO_CELL_EDIT,
-        DELAY_FOR_DBCLICK,
-        ...wrapper.state(),
-        nonEditableRows: []
-      }]));
-    });
-  });
-
-  describe('componentWillReceiveProps', () => {
-    const initialState = { ridx: 1, cidx: 1, message: 'test' };
-    describe('if nextProps.cellEdit is not existing', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext());
-        wrapper.setState(initialState);
-        wrapper.render();
-        wrapper.instance().UNSAFE_componentWillReceiveProps({});
-      });
-
-      it('should not set state.message', () => {
-        expect(wrapper.state().message).toBe(initialState.message);
-      });
-
-      it('should not set state.ridx', () => {
-        expect(wrapper.state().ridx).toBe(initialState.ridx);
-      });
-
-      it('should not set state.cidx', () => {
-        expect(wrapper.state().cidx).toBe(initialState.cidx);
-      });
-    });
-
-    describe('if nextProps.cellEdit is existing but remote cell editing is disable', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext());
-        wrapper.setState(initialState);
-        wrapper.render();
-        wrapper.instance().UNSAFE_componentWillReceiveProps({
-          cellEdit: cellEditFactory(defaultCellEdit)
-        });
-      });
-
-      it('should not set state.message', () => {
-        expect(wrapper.state().message).toBe(initialState.message);
-      });
-
-      it('should not set state.ridx', () => {
-        expect(wrapper.state().ridx).toBe(initialState.ridx);
-      });
-
-      it('should not set state.cidx', () => {
-        expect(wrapper.state().cidx).toBe(initialState.cidx);
-      });
-    });
-
-    describe('if nextProps.cellEdit is existing and remote cell editing is enable', () => {
-      describe('if nextProps.cellEdit.options.errorMessage is defined', () => {
-        let message;
-        beforeEach(() => {
-          message = 'validation fail';
-          wrapper = shallow(shallowContext(defaultCellEdit, true));
-          wrapper.setState(initialState);
-          wrapper.render();
-          wrapper.instance().UNSAFE_componentWillReceiveProps({
-            cellEdit: cellEditFactory({
-              ...defaultCellEdit,
-              errorMessage: message
-            })
-          });
-          wrapper.update();
-        });
-
-        it('should set state.message', () => {
-          expect(wrapper.state('message')).toBe(message);
-        });
-
-        it('should not set state.ridx', () => {
-          expect(wrapper.state().ridx).toBe(initialState.ridx);
-        });
-
-        it('should not set state.cidx', () => {
-          expect(wrapper.state().cidx).toBe(initialState.cidx);
-        });
-      });
-
-      describe('if nextProps.cellEdit.options.errorMessage is not defined', () => {
-        beforeEach(() => {
-          wrapper = shallow(shallowContext(defaultCellEdit, true));
-          wrapper.setState(initialState);
-          wrapper.instance().UNSAFE_componentWillReceiveProps({
-            cellEdit: cellEditFactory({ ...defaultCellEdit })
-          });
-          wrapper.update();
-        });
-
-        it('should not set state.message', () => {
-          expect(wrapper.state('message')).toBe(initialState.message);
-        });
-
-        it('should set correct state.ridx', () => {
-          expect(wrapper.state().ridx).toBeNull();
-        });
-
-        it('should set correct state.cidx', () => {
-          expect(wrapper.state().cidx).toBeNull();
-        });
-      });
-    });
-  });
-
-  describe('handleCellUpdate', () => {
-    const row = data[1];
-    const column = columns[1];
-    const newValue = 'This is new value';
-    const oldValue = row[column.dataField];
-
-    describe('if cellEdit.beforeSaveCell prop is defined', () => {
-      const beforeSaveCell = jest.fn();
-
-      beforeEach(() => {
-        beforeSaveCell.mockReset();
-        wrapper = shallow(shallowContext({
-          ...defaultCellEdit,
-          beforeSaveCell
-        }));
-        wrapper.instance().handleCellUpdate(
-          row,
-          column,
-          newValue
-        );
-      });
-
-      it('should call cellEdit.beforeSaveCell correctly', () => {
-        expect(beforeSaveCell).toHaveBeenCalledTimes(1);
-        expect(beforeSaveCell)
-          .toHaveBeenCalledWith(oldValue, newValue, row, column, expect.anything());
-      });
-    });
-
-    describe('when remote cell editing is enable', () => {
-      const afterSaveCell = jest.fn();
-      beforeEach(() => {
-        afterSaveCell.mockReset();
-        wrapper = shallow(shallowContext({
-          ...defaultCellEdit,
-          afterSaveCell
-        }, true));
-        wrapper.instance().handleCellUpdate(
-          row,
-          column,
-          newValue
-        );
-      });
-
-      it('should call handleCellChange correctly', () => {
-        expect(handleCellChange).toHaveBeenCalledTimes(1);
-        expect(handleCellChange).toHaveBeenCalledWith(row[keyField], column.dataField, newValue);
-      });
-
-      it('should not call cellEdit.afterSaveCell even if it is defined', () => {
-        expect(afterSaveCell).toHaveBeenCalledTimes(0);
-      });
-    });
-
-    describe('when remote cell editing is disable', () => {
-      const afterSaveCell = jest.fn();
-
-      beforeEach(() => {
-        afterSaveCell.mockReset();
-        wrapper = shallow(shallowContext({
-          ...defaultCellEdit,
-          afterSaveCell
-        }));
-        wrapper.setState({
-          ridx: 1,
-          cidx: 1
-        });
-        wrapper.instance().handleCellUpdate(
-          row,
-          column,
-          newValue
-        );
-      });
-
-      it('should not call handleCellChange correctly', () => {
-        expect(handleCellChange).toHaveBeenCalledTimes(0);
-      });
-
-      it('should set state correctly', () => {
-        expect(wrapper.state('ridx')).toBeNull();
-        expect(wrapper.state('cidx')).toBeNull();
-        expect(wrapper.state('message')).toBeNull();
-      });
-
-      it('should call cellEdit.afterSaveCell if it is defined', () => {
-        expect(afterSaveCell).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-
-  describe('completeEditing', () => {
-    const initialState = { ridx: 1, cidx: 1, message: 'test' };
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext());
-      wrapper.setState(initialState);
-      wrapper.render();
-      wrapper.instance().completeEditing();
-    });
-
-    it('should set state correctly', () => {
-      expect(wrapper.state().ridx).toBeNull();
-      expect(wrapper.state().cidx).toBeNull();
-      expect(wrapper.state().message).toBeNull();
-    });
-  });
-
-  describe('startEditing', () => {
-    const ridx = 0;
-    const cidx = 1;
-
-    describe('if selectRow prop is not defined', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext());
-        wrapper.render();
-        wrapper.instance().startEditing(ridx, cidx);
-      });
-
-      it('should set state correctly', () => {
-        expect(wrapper.state().ridx).toEqual(ridx);
-        expect(wrapper.state().cidx).toEqual(cidx);
-      });
-    });
-
-    describe('if selectRow prop is defined', () => {
-      describe('and selectRow.clickToEdit is enable', () => {
-        beforeEach(() => {
-          wrapper = shallow(shallowContext(
-            defaultCellEdit,
-            false,
-            {
-              ...defaultSelectRow,
-              clickToEdit: true
-            }
-          ));
-          wrapper.render();
-          wrapper.instance().startEditing(ridx, cidx);
-        });
-
-        it('should set state correctly', () => {
-          expect(wrapper.state().ridx).toEqual(ridx);
-          expect(wrapper.state().cidx).toEqual(cidx);
-        });
-      });
-
-      describe('and selectRow.clickToSelect is disable', () => {
-        beforeEach(() => {
-          wrapper = shallow(shallowContext(
-            defaultCellEdit,
-            false,
-            {
-              ...defaultSelectRow,
-              clickToSelect: false
-            }
-          ));
-          wrapper.render();
-          wrapper.instance().startEditing(ridx, cidx);
-        });
-
-        it('should set state correctly', () => {
-          expect(wrapper.state().ridx).toEqual(ridx);
-          expect(wrapper.state().cidx).toEqual(cidx);
-        });
-      });
-
-      describe('and selectRow.clickToEdit & selectRow.clickToSelect is enable', () => {
-        beforeEach(() => {
-          wrapper = shallow(shallowContext(
-            defaultCellEdit,
-            false,
-            {
-              ...defaultSelectRow,
-              clickToEdit: false,
-              clickToSelect: true
-            }
-          ));
-          wrapper.render();
-          wrapper.instance().startEditing(ridx, cidx);
-        });
-
-        it('should not set state', () => {
-          expect(wrapper.state().ridx).toBeNull();
-          expect(wrapper.state().cidx).toBeNull();
-        });
-      });
-    });
-  });
-
-  describe('escapeEditing', () => {
-    const initialState = { ridx: 1, cidx: 1 };
-
-    beforeEach(() => {
-      wrapper = shallow(shallowContext());
-      wrapper.setState(initialState);
-      wrapper.instance().escapeEditing();
-    });
-
-    it('should set state correctly', () => {
-      expect(wrapper.state().ridx).toBeNull();
-      expect(wrapper.state().cidx).toBeNull();
-    });
-  });
-});

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

@@ -1,147 +0,0 @@
-import 'jsdom-global/register';
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import _ from 'react-bootstrap-table-next/src/utils';
-
-import cellEditFactory from '..';
-import { CLICK_TO_CELL_EDIT } from '../src/const';
-import createCellEditContext from '../src/context';
-import bindEditingCell from '../src/editing-cell-consumer';
-
-describe('Editing Cell Consumer', () => {
-  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(_);
-  const WithCellEditComponent = bindEditingCell(_);
-
-  beforeEach(() => {
-    columns = [{
-      dataField: 'id',
-      text: 'ID'
-    }, {
-      dataField: 'name',
-      text: 'Name'
-    }];
-  });
-
-  describe('if column.editCellClasses is defined as string', () => {
-    beforeEach(() => {
-      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
-      columns[1].editCellClasses = 'test-class-1';
-      wrapper = shallow(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent
-            row={ row }
-            column={ columns[1] }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-          />
-        </Provider>
-      );
-      wrapper = wrapper.render();
-    });
-
-    it('should inject className target component correctly', () => {
-      expect(wrapper.hasClass(`${columns[1].editCellClasses}`)).toBeTruthy();
-    });
-  });
-
-  describe('if column.editCellStyle is defined as object', () => {
-    beforeEach(() => {
-      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
-      columns[1].editCellStyle = { color: 'pink' };
-      wrapper = mount(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent
-            row={ row }
-            column={ columns[1] }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-          />
-        </Provider>
-      );
-    });
-
-    it('should inject style target component correctly', () => {
-      expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(columns[1].editCellStyle);
-    });
-  });
-
-  describe('if column.editCellClasses is defined as function', () => {
-    const className = 'test-class-1';
-
-    beforeEach(() => {
-      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
-      columns[1].editCellClasses = jest.fn().mockReturnValue(className);
-      wrapper = mount(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent
-            row={ row }
-            column={ columns[1] }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-          />
-        </Provider>
-      );
-    });
-
-    it('should inject empty className and style to target component', () => {
-      expect(wrapper.find(className)).toBeTruthy();
-    });
-
-    it('should call column.editCellClasses function correctly', () => {
-      expect(columns[1].editCellClasses).toHaveBeenCalledTimes(1);
-      expect(columns[1].editCellClasses).toHaveBeenCalledWith(
-        _.get(row, columns[1].dataField),
-        row,
-        rowIndex,
-        columnIndex
-      );
-    });
-  });
-
-  describe('if column.editCellStyle is defined as function', () => {
-    const style = { color: 'blue' };
-    beforeEach(() => {
-      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
-      columns[1].editCellStyle = jest.fn().mockReturnValue(style);
-      wrapper = mount(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent
-            row={ row }
-            column={ columns[1] }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-          />
-        </Provider>
-      );
-    });
-
-    it('should inject style target component correctly', () => {
-      expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(style);
-    });
-
-    it('should call column.editCellStyle function correctly', () => {
-      expect(columns[1].editCellStyle).toHaveBeenCalledTimes(1);
-      expect(columns[1].editCellStyle).toHaveBeenCalledWith(
-        _.get(row, columns[1].dataField),
-        row,
-        rowIndex,
-        columnIndex
-      );
-    });
-  });
-});

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

@@ -1,541 +0,0 @@
-/* eslint react/prop-types: 0 */
-import 'jsdom-global/register';
-import React from 'react';
-import sinon from 'sinon';
-import { shallow, mount } from 'enzyme';
-
-import _ from 'react-bootstrap-table-next/src/utils';
-import editingCellFactory from '../src/editing-cell';
-import * as constants from '../src/const';
-import TextEditor from '../src/text-editor';
-import DateEditor from '../src/date-editor';
-import DropDownEditor from '../src/dropdown-editor';
-import TextAreaEditor from '../src/textarea-editor';
-import CheckBoxEditor from '../src/checkbox-editor';
-import EditorIndicator from '../src/editor-indicator';
-
-const EditingCell = editingCellFactory(_);
-const TableRowWrapper = props => (
-  <table>
-    <tbody>
-      <tr>{ props.children }</tr>
-    </tbody>
-  </table>
-);
-
-
-describe('EditingCell', () => {
-  let wrapper;
-  let onUpdate;
-  let onEscape;
-  const row = {
-    id: 1,
-    name: 'A'
-  };
-
-  const rowIndex = 1;
-  const columnIndex = 1;
-
-  let column = {
-    dataField: 'id',
-    text: 'ID'
-  };
-
-  beforeEach(() => {
-    onEscape = sinon.stub();
-    onUpdate = sinon.stub();
-    wrapper = mount(
-      <EditingCell
-        row={ row }
-        rowIndex={ rowIndex }
-        columnIndex={ columnIndex }
-        column={ column }
-        onUpdate={ onUpdate }
-        onEscape={ onEscape }
-      />
-    );
-  });
-
-  it('should render default editor successfully', () => {
-    expect(wrapper.length).toBe(1);
-    expect(wrapper.find('td').length).toBe(1);
-    expect(wrapper.find(TextEditor).length).toBe(1);
-    expect(wrapper.state().invalidMessage).toBeNull();
-  });
-
-  it('should render TextEditor with correct props', () => {
-    const textEditor = wrapper.find(TextEditor);
-    expect(textEditor.props().defaultValue).toEqual(row[column.dataField]);
-    expect(textEditor.props().onKeyDown).toBeDefined();
-    expect(textEditor.props().onBlur).toBeDefined();
-    expect(textEditor.props().className).toEqual('');
-  });
-
-  it('should not render EditorIndicator due to state.invalidMessage is null', () => {
-    const indicator = wrapper.find(EditorIndicator);
-    expect(indicator.length).toEqual(0);
-  });
-
-  it('when press ENTER on TextEditor should call onUpdate correctly', () => {
-    const newValue = 'test';
-    const textEditor = wrapper.find(TextEditor);
-    sinon.stub(textEditor.instance(), 'getValue').returns(newValue);
-    textEditor.simulate('keyDown', { keyCode: 13 });
-    expect(onUpdate.callCount).toBe(1);
-    expect(onUpdate.calledWith(row, column, newValue)).toBe(true);
-  });
-
-  it('when press ESC on TextEditor should call onEscape correctly', () => {
-    const textEditor = wrapper.find(TextEditor);
-    textEditor.simulate('keyDown', { keyCode: 27 });
-    expect(onEscape.callCount).toBe(1);
-  });
-
-  it('when blur from TextEditor should call onEscape correctly', () => {
-    const textEditor = wrapper.find(TextEditor);
-    textEditor.simulate('blur');
-    expect(onEscape.callCount).toBe(1);
-  });
-
-  describe('if style prop is defined', () => {
-    const customStyle = { backgroundColor: 'red' };
-    beforeEach(() => {
-      wrapper = shallow(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-          style={ customStyle }
-        />
-      );
-    });
-
-    it('should render component with style successfully', () => {
-      expect(wrapper.length).toBe(1);
-      expect(wrapper.find('td').prop('style')).toEqual(customStyle);
-    });
-  });
-
-  describe('if className prop is defined', () => {
-    const className = 'test-class';
-    beforeEach(() => {
-      wrapper = shallow(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-          className={ className }
-        />
-      );
-    });
-
-    it('should render component with style successfully', () => {
-      expect(wrapper.length).toBe(1);
-      expect(wrapper.hasClass(className)).toBe(true);
-    });
-  });
-
-  describe('if column.editorClasses is defined', () => {
-    let columnWithEditorClasses;
-    const classes = 'test test1';
-
-    describe('and it is a function', () => {
-      beforeEach(() => {
-        columnWithEditorClasses = {
-          ...column,
-          editorClasses: jest.fn(() => classes)
-        };
-        wrapper = shallow(
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ columnWithEditorClasses }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-          />
-        );
-      });
-
-      it('should render TextEditor with correct props', () => {
-        const textEditor = wrapper.find(TextEditor);
-        expect(textEditor.props().className).toEqual(classes);
-      });
-
-      it('should call column.editorClasses correctly', () => {
-        expect(columnWithEditorClasses.editorClasses).toHaveBeenCalledTimes(1);
-        expect(columnWithEditorClasses.editorClasses).toHaveBeenCalledWith(
-          _.get(row, column.dataField),
-          row,
-          rowIndex,
-          columnIndex
-        );
-      });
-    });
-
-    describe('and it is a string', () => {
-      beforeEach(() => {
-        columnWithEditorClasses = {
-          ...column,
-          editorClasses: classes
-        };
-        wrapper = shallow(
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ columnWithEditorClasses }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-          />
-        );
-      });
-
-      it('should render TextEditor with correct props', () => {
-        const textEditor = wrapper.find(TextEditor);
-        expect(textEditor.props().className).toEqual(classes);
-      });
-    });
-  });
-
-  describe('if column.editorStyle is defined', () => {
-    let columnWithEditorStyle;
-    const style = { color: 'red' };
-
-    describe('and it is a function', () => {
-      beforeEach(() => {
-        columnWithEditorStyle = {
-          ...column,
-          editorStyle: jest.fn(() => style)
-        };
-        wrapper = shallow(
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ columnWithEditorStyle }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-          />
-        );
-      });
-
-      it('should render TextEditor with correct props', () => {
-        const textEditor = wrapper.find(TextEditor);
-        expect(textEditor.props().style).toEqual(style);
-      });
-
-      it('should call column.editorStyle correctly', () => {
-        expect(columnWithEditorStyle.editorStyle).toHaveBeenCalledTimes(1);
-        expect(columnWithEditorStyle.editorStyle).toHaveBeenCalledWith(
-          _.get(row, column.dataField),
-          row,
-          rowIndex,
-          columnIndex
-        );
-      });
-    });
-
-    describe('and it is an object', () => {
-      beforeEach(() => {
-        columnWithEditorStyle = {
-          ...column,
-          editorStyle: style
-        };
-        wrapper = shallow(
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ columnWithEditorStyle }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-          />
-        );
-      });
-
-      it('should render TextEditor with correct props', () => {
-        const textEditor = wrapper.find(TextEditor);
-        expect(textEditor.props().style).toEqual(style);
-      });
-    });
-  });
-
-  describe('if blurToSave prop is true', () => {
-    beforeEach(() => {
-      wrapper = mount(
-        <TableRowWrapper>
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ column }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-            blurToSave
-          />
-        </TableRowWrapper>
-      );
-    });
-
-    it('when blur from TextEditor should call onUpdate correctly', () => {
-      const textEditor = wrapper.find(TextEditor);
-      textEditor.simulate('blur');
-      expect(onUpdate.callCount).toBe(1);
-      expect(onUpdate.calledWith(row, column, `${row[column.dataField]}`)).toBe(true);
-    });
-  });
-
-  describe('when column.validator is defined', () => {
-    let newValue;
-    let validForm;
-    let validatorCallBack;
-
-    describe('and column.validator return an object', () => {
-      beforeEach(() => {
-        newValue = 'newValue';
-        validForm = { valid: false, message: 'Something is invalid' };
-        validatorCallBack = sinon.stub().returns(validForm);
-        column = {
-          dataField: 'id',
-          text: 'ID',
-          validator: validatorCallBack
-        };
-        wrapper = mount(
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ column }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-          />
-        );
-        wrapper.instance().beforeComplete(newValue);
-      });
-
-      it('should call column.validator successfully', () => {
-        expect(validatorCallBack.callCount).toBe(1);
-        expect(validatorCallBack.calledWith(newValue, row, column)).toBe(true);
-      });
-
-      it('should not call onUpdate', () => {
-        expect(onUpdate.callCount).toBe(0);
-      });
-
-      it('should set indicatorTimer successfully', () => {
-        expect(wrapper.instance().indicatorTimer).toBeDefined();
-      });
-
-      it('should set invalidMessage state correctly', () => {
-        expect(wrapper.state().invalidMessage).toEqual(validForm.message);
-      });
-
-      it('should render TextEditor with correct shake and animated class', () => {
-        const editor = wrapper.find(TextEditor);
-        expect(editor.html()).toEqual('<input type="text" class="form-control editor edit-text animated shake">');
-        /* Following is better, but it will not work after upgrade React to 16 and enzyme... */
-        // expect(editor.length).toEqual(1);
-        // expect(editor.props().classNames).toEqual('animated shake');
-      });
-
-      /* Following is better, but it will not work after upgrade React to 16 and enzyme... */
-      xit('should render EditorIndicator correctly', () => {
-        const indicator = wrapper.find(EditorIndicator);
-        expect(indicator.length).toEqual(1);
-        expect(indicator.props().invalidMessage).toEqual(validForm.message);
-      });
-    });
-
-    describe('and column.validator return true or something', () => {
-      beforeEach(() => {
-        newValue = 'newValue';
-        validForm = true;
-        validatorCallBack = sinon.stub().returns(validForm);
-        column = {
-          dataField: 'id',
-          text: 'ID',
-          validator: validatorCallBack
-        };
-        wrapper = mount(
-          <EditingCell
-            row={ row }
-            rowIndex={ rowIndex }
-            columnIndex={ columnIndex }
-            column={ column }
-            onUpdate={ onUpdate }
-            onEscape={ onEscape }
-          />
-        );
-        wrapper.instance().beforeComplete(newValue);
-      });
-
-      it('should call column.validator successfully', () => {
-        expect(validatorCallBack.callCount).toBe(1);
-        expect(validatorCallBack.calledWith(newValue, row, column)).toBe(true);
-      });
-
-      it('should call onUpdate', () => {
-        expect(onUpdate.callCount).toBe(1);
-      });
-    });
-  });
-
-  describe('if column.editorRenderer is defined', () => {
-    const TestEditor = () => <input type="text" />;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID',
-        editorRenderer: sinon.stub().returns(<TestEditor />)
-      };
-
-      wrapper = mount(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-        />
-      );
-    });
-
-    it('should call column.editorRenderer correctly', () => {
-      expect(column.editorRenderer.callCount).toBe(1);
-    });
-
-    it('should render correctly', () => {
-      expect(wrapper.find(TestEditor)).toHaveLength(1);
-    });
-  });
-
-  describe('if column.editor is select', () => {
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID',
-        editor: {
-          type: constants.EDITTYPE.SELECT,
-          options: [{
-            value: 1,
-            label: 'A'
-          }]
-        }
-      };
-
-      wrapper = mount(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-        />
-      );
-    });
-
-    it('should render dropdown editor successfully', () => {
-      const editor = wrapper.find(DropDownEditor);
-      expect(wrapper.length).toBe(1);
-      expect(editor.length).toBe(1);
-      expect(editor.props().options).toEqual(column.editor.options);
-    });
-  });
-
-  describe('if column.editor is textarea', () => {
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID',
-        editor: {
-          type: constants.EDITTYPE.TEXTAREA
-        }
-      };
-
-      wrapper = mount(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-        />
-      );
-    });
-
-    it('should render textarea editor successfully', () => {
-      const editor = wrapper.find(TextAreaEditor);
-      expect(wrapper.length).toBe(1);
-      expect(editor.length).toBe(1);
-    });
-  });
-
-  describe('if column.editor is checkbox', () => {
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID',
-        editor: {
-          type: constants.EDITTYPE.CHECKBOX
-        }
-      };
-
-      wrapper = mount(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-        />
-      );
-    });
-
-    it('should render checkbox editor successfully', () => {
-      const editor = wrapper.find(CheckBoxEditor);
-      expect(wrapper.length).toBe(1);
-      expect(editor.length).toBe(1);
-    });
-  });
-
-  describe('if column.editor is date', () => {
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID',
-        editor: {
-          type: constants.EDITTYPE.DATE
-        }
-      };
-
-      wrapper = mount(
-        <EditingCell
-          row={ row }
-          rowIndex={ rowIndex }
-          columnIndex={ columnIndex }
-          column={ column }
-          onUpdate={ onUpdate }
-          onEscape={ onEscape }
-        />
-      );
-    });
-
-    it('should render date editor successfully', () => {
-      const editor = wrapper.find(DateEditor);
-      expect(wrapper.length).toBe(1);
-      expect(editor.length).toBe(1);
-    });
-  });
-});

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

@@ -1,138 +0,0 @@
-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 '..';
-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';
-
-describe('Row Consumer', () => {
-  let wrapper;
-  let cellEdit;
-  const data = [{
-    id: 1,
-    name: 'A'
-  }, {
-    id: 2,
-    name: 'B'
-  }];
-  const row = { id: 1, name: 'A' };
-  const keyField = 'id';
-  const value = _.get(row, keyField);
-
-  const { Provider } = createCellEditContext(_, op, false, jest.fn());
-  const BaseComponent = () => null;
-
-  describe('if cellEdit.nonEditableRows is undefined', () => {
-    beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
-        props => <BaseComponent { ...props } />,
-        false
-      );
-      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
-      wrapper = mount(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent value={ value } />
-        </Provider>
-      );
-    });
-
-    it('should inject correct props to target component', () => {
-      expect(wrapper.find(BaseComponent)).toHaveLength(1);
-      expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toBeNull();
-      expect(wrapper.find(BaseComponent).prop('editingColIdx')).toBeNull();
-      expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
-    });
-  });
-
-  describe('if cellEdit.nonEditableRows is defined', () => {
-    const nonEditableRows = jest.fn().mockReturnValue([value]);
-    describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
-      beforeEach(() => {
-        const WithCellEditComponent = withRowLevelCellEdit(
-          props => <BaseComponent { ...props } />,
-          false
-        );
-        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
-        wrapper = mount(
-          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-            <WithCellEditComponent value={ value } />
-          </Provider>
-        );
-      });
-
-      it('should inject correct editable prop as false to target component', () => {
-        expect(wrapper.find(BaseComponent)).toHaveLength(1);
-        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
-      });
-    });
-
-    describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
-      beforeEach(() => {
-        const WithCellEditComponent = withRowLevelCellEdit(
-          props => <BaseComponent { ...props } />,
-          false
-        );
-        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
-        wrapper = mount(
-          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-            <WithCellEditComponent value={ 2 } />
-          </Provider>
-        );
-      });
-
-      it('should inject correct editable prop as false to target component', () => {
-        expect(wrapper.find(BaseComponent)).toHaveLength(1);
-        expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
-      });
-    });
-  });
-
-  describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
-    beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
-        props => <BaseComponent { ...props } />,
-        true
-      );
-      cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
-      wrapper = mount(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent value={ value } />
-        </Provider>
-      );
-    });
-
-    it('should inject correct DELAY_FOR_DBCLICK prop to target component', () => {
-      expect(wrapper.find(BaseComponent)).toHaveLength(1);
-      expect(wrapper.find(BaseComponent).prop('DELAY_FOR_DBCLICK')).toEqual(DELAY_FOR_DBCLICK);
-    });
-  });
-
-  describe('if cellEdit.ridx and cellEdit.cidx are defined', () => {
-    const ridx = 0;
-    const cidx = 1;
-    beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
-        props => <BaseComponent { ...props } />,
-        false
-      );
-      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
-      wrapper = mount(
-        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
-          <WithCellEditComponent value={ value } />
-        </Provider>
-      );
-      wrapper.instance().startEditing(ridx, cidx);
-      wrapper.update();
-    });
-
-    it('should inject correct editable prop as false to target component', () => {
-      expect(wrapper.find(BaseComponent)).toHaveLength(1);
-      expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toEqual(ridx);
-      expect(wrapper.find(BaseComponent).prop('editingColIdx')).toEqual(cidx);
-    });
-  });
-});

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

@@ -1,42 +0,0 @@
-import 'jsdom-global/register';
-import React from 'react';
-import { mount } from 'enzyme';
-
-import TextEditor from '../src/text-editor';
-
-describe('TextEditor', () => {
-  let wrapper;
-  const value = 'test';
-
-  beforeEach(() => {
-    wrapper = mount(
-      <TextEditor
-        defaultValue={ value }
-      />
-    );
-  });
-
-  it('should render TextEditor correctly', () => {
-    expect(wrapper.length).toBe(1);
-    expect(wrapper.find('input').length).toBe(1);
-    expect(wrapper.find('input').prop('type')).toEqual('text');
-    expect(wrapper.find('.form-control.editor.edit-text').length).toBe(1);
-  });
-
-  describe('when className prop defined', () => {
-    const className = 'test-class';
-    beforeEach(() => {
-      wrapper = mount(
-        <TextEditor
-          defaultValue={ value }
-          className={ className }
-        />
-      );
-    });
-
-    it('should render correct custom classname', () => {
-      expect(wrapper.length).toBe(1);
-      expect(wrapper.hasClass(className)).toBeTruthy();
-    });
-  });
-});

packages/react-bootstrap-table2-example/.storybook/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["react", "es2015", "stage-0", ["env", {"modules": false} ]],
-  "plugins": ["transform-class-properties"]
-}

packages/react-bootstrap-table2-example/.storybook/addons.js

@@ -1,5 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-console';

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

@@ -1,26 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-import React from 'react';
-import { configure, addDecorator } from '@storybook/react';
-import { withConsole } from '@storybook/addon-console';
-
-function loadStories() {
-  require('stories');
-}
-
-const styles = {
-  margin: '15px',
-};
-
-const componentDecorator = (story) => (
-  <div style={styles}>
-    { story() }
-  </div>
-);
-
-
-// prepend the story name to log messages
-addDecorator((storyFn, context) => withConsole()(storyFn)(context));
-
-addDecorator(componentDecorator);
-
-configure(loadStories, module);

packages/react-bootstrap-table2-example/.storybook/preview-head.html

@@ -1,2 +0,0 @@
-<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> -->

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

@@ -1,75 +0,0 @@
-const path = require('path');
-
-const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/index.js');
-const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/index.js');
-const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/index.js');
-const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filter/index.js');
-const editorSourcePath = path.join(__dirname, '../../react-bootstrap-table2-editor/index.js');
-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');
-const aliasPath = {
-  examples: examplesPath,
-  stories: storyPath,
-  src: srcPath,
-  components: path.join(srcPath, 'components'),
-  utils: path.join(srcPath, 'utils'),
-
-  'react-bootstrap-table-next': sourcePath,
-  'react-bootstrap-table2-editor': editorSourcePath,
-  'react-bootstrap-table2-filter': filterSourcePath,
-  'react-bootstrap-table2-overlay': overlaySourcePath,
-  'react-bootstrap-table2-paginator': paginationSourcePath,
-  'react-bootstrap-table2-toolkit': toolkitSourcePath
-};
-
-const loaders = [{
-  enforce: 'pre',
-  test: /\.js?$/,
-  exclude: /node_modules/,
-  include: [examplesPath, storyPath],
-  loader: 'eslint-loader',
-}, {
-  test: /\.js?$/,
-  use: ['babel-loader'],
-  exclude: /node_modules/
-}, {
-  test: /\.css$/,
-  use: ['style-loader', 'css-loader'],
-}, {
-  test: /\.scss$/,
-  use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [
-    storyPath,
-    sourceStylePath,
-    paginationStylePath,
-    filterStylePath,
-    toolkitStylePath
-  ],
-}, {
-  test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
-  loader: 'url-loader?limit=100000',
-}];
-
-// Export a function. Accept the base config as the only param.
-module.exports = (storybookBaseConfig, configType) => {
-  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
-  // You can change the configuration based on that.
-  // 'PRODUCTION' is used when building the static version of storybook.
-
-  // loaders
-  loaders.forEach(value => {
-    storybookBaseConfig.module.rules.push(value);
-  })
-
-  // alias
-  storybookBaseConfig.resolve.alias = aliasPath;
-
-  // Return the altered config
-  return storybookBaseConfig;
-};

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

@@ -1,42 +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';
-// omit...
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  bordered={ false }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      bordered={ false }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

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

packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js

@@ -1,52 +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 id="bar" keyField='id' data={ products } columns={ columns } />
-<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
-<BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
-`;
-
-export default () => (
-  <div>
-    <h4> Customized table ID </h4>
-    <BootstrapTable id="bar" keyField="id" data={ products } columns={ columns } />
-
-    <h4> Customized table className </h4>
-    <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
-
-    <h4> Customized wrapper className </h4>
-    <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
-
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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/index.js

@@ -1,42 +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 } />
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator(3000);
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const expandRow = {
-  showExpandColumn: 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>
-  )
-};
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      selectRow={ { mode: 'checkbox', clickToSelect: true } }
-      expandRow={ expandRow }
-    />
-  </div>
-);

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

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-
-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';
-// omit...
-
-<BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication="Table is Empty" />
-
-// Following is a more flexible example
-
-function indication() {
-  // return something here
-}
-
-<BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication={ indication } />
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ [] } columns={ columns } noDataIndication="Table is Empty" />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js

@@ -1,46 +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';
-// omit...
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  striped
-  hover
-  condensed
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      striped
-      hover
-      condensed
-    />
-    <Code>{ sourceCode }</Code>
-  </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/pagination.js

@@ -1,45 +0,0 @@
-/* eslint react/prefer-stateless-function: 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 columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-<BootstrapTable bootstrap4 keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } pagination={ paginationFactory() } />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,58 +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: 'radio',
-  clickToSelect: 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: 'radio',
-  clickToSelect: true
-};
-
-<BootstrapTable
-  bootstrap4
-  keyField='id'
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRow }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,70 +0,0 @@
-/* eslint react/prefer-stateless-function: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-  sort: true
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  sort: true
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  sort: true
-}];
-
-const defaultSorted = [{
-  dataField: 'name',
-  order: 'desc'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-  sort: true
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  sort: true
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  sort: true
-}];
-
-const defaultSorted = [{
-  dataField: 'name',
-  order: 'desc'
-}];
-
-<BootstrapTable
-  bootstrap4
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  defaultSorted={ defaultSorted } 
-/>
-`;
-
-
-export default class extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } defaultSorted={ defaultSorted } />
-        <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/blur-to-save-table.js

@@ -1,60 +0,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'
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({
-    mode: 'click',
-    blurToSave: true
-  }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <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-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-class-table.js

@@ -1,61 +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',
-  editCellClasses: 'editing-name'
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  editCellClasses: (cell, row, rowIndex, colIndex) =>
-    (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
-}];
-
-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',
-  editCellClasses: 'editing-name'
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  editCellClasses: (cell, row, rowIndex, colIndex) =>
-    (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click' }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click' }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,66 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-console: 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'
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({
-    mode: 'click',
-    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
-    beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
-    afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-  }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({
-        mode: 'click',
-        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
-        beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
-        afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-      }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,69 +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',
-  editCellStyle: {
-    backgroundColor: '#20B2AA'
-  }
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  editCellStyle: (cell, row, rowIndex, colIndex) => {
-    const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF';
-    return { backgroundColor };
-  }
-}];
-
-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',
-  editCellStyle: {
-    backgroundColor: '#20B2AA'
-  }
-}, {
-  dataField: 'price',
-  text: 'Product Price',
-  editCellStyle: (cell, row, rowIndex, colIndex) => {
-    const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF';
-    return { backgroundColor };
-  }
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click' }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click' }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,91 +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) => {
-    if (isNaN(newValue)) {
-      return {
-        valid: false,
-        message: 'Price should be numeric'
-      };
-    }
-    if (newValue < 2000) {
-      return {
-        valid: false,
-        message: 'Price should bigger than 2000'
-      };
-    }
-    return 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) => {
-    if (isNaN(newValue)) {
-      return {
-        valid: false,
-        message: 'Price should be numeric'
-      };
-    }
-    if (newValue < 2000) {
-      return {
-        valid: false,
-        message: 'Price should bigger than 2000'
-      };
-    }
-    return 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/cell-level-editable-table.js

@@ -1,58 +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',
-  editable: (content, row, rowIndex, columnIndex) => content > 2101
-}];
-
-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',
-  editable: (content, row, rowIndex, columnIndex) => content > 2101
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click' }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Only Product Price is bigger than 2101 is editable</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click' }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,64 +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 { todosGenerator } from 'utils/common';
-
-const todos = todosGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Todo ID'
-}, {
-  dataField: 'todo',
-  text: 'Todo Name'
-}, {
-  dataField: 'done',
-  text: 'Done',
-  editor: {
-    type: Type.CHECKBOX,
-    value: 'Y:N'
-  }
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Todo ID'
-}, {
-  dataField: 'todo',
-  text: 'Todo Name'
-}, {
-  dataField: 'done',
-  text: 'Done',
-  editor: {
-    type: Type.CHECKBOX,
-    value: 'Y:N'
-  }
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ todos }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Checkbox Editor</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ todos }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js

@@ -1,56 +0,0 @@
-/* eslint react/prefer-stateless-function: 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'
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click' }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Click to edit cell</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click' }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js

@@ -1,64 +0,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',
-  editable: false
-}, {
-  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'
-  // Product Name column can't be edit anymore
-  editable: false
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({
-    mode: 'click',
-    blurToSave: true
-  }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Product Name is non editable</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/custom-editor-table.js

@@ -1,135 +0,0 @@
-/* eslint react/prefer-stateless-function: 0 */
-/* eslint no-return-assign: 0 */
-/* eslint no-unused-vars: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
-import Code from 'components/common/code-block';
-import { productsQualityGenerator } from 'utils/common';
-
-const products = productsQualityGenerator();
-
-class QualityRanger extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onUpdate: PropTypes.func.isRequired
-  }
-  static defaultProps = {
-    value: 0
-  }
-
-  componentDidMount() {
-    this.range.focus();
-  }
-
-  getValue() {
-    return parseInt(this.range.value, 10);
-  }
-  render() {
-    const { value, onUpdate, ...rest } = this.props;
-    return [
-      <input
-        { ...rest }
-        key="range"
-        ref={ node => this.range = node }
-        type="range"
-        min="0"
-        max="100"
-      />,
-      <button
-        key="submit"
-        className="btn btn-default"
-        onClick={ () => onUpdate(this.getValue()) }
-      >
-        done
-      </button>
-    ];
-  }
-}
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quality',
-  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
-    <QualityRanger { ...editorProps } value={ value } />
-  )
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
-
-class QualityRanger extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onUpdate: PropTypes.func.isRequired
-  }
-  static defaultProps = {
-    value: 0
-  }
-  getValue() {
-    return parseInt(this.range.value, 10);
-  }
-  render() {
-    const { value, onUpdate, ...rest } = this.props;
-    return [
-      <input
-        { ...rest }
-        key="range"
-        ref={ node => this.range = node }
-        type="range"
-        min="0"
-        max="100"
-      />,
-      <button
-        key="submit"
-        className="btn btn-default"
-        onClick={ () => onUpdate(this.getValue()) }
-      >
-        done
-      </button>
-    ];
-  }
-}
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quality',
-  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
-    <QualityRanger { ...editorProps } value={ value } />
-  )
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Custom Editor</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/date-editor-table.js

@@ -1,77 +0,0 @@
-/* eslint prefer-template: 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 { stockGenerator } from 'utils/common';
-
-const stocks = stockGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'ID'
-}, {
-  dataField: 'name',
-  text: 'Name'
-}, {
-  dataField: 'inStockDate',
-  text: 'Stock 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, { Type } from 'react-bootstrap-table2-editor';
-
-const columns = [{
-  dataField: 'id',
-  text: 'ID'
-}, {
-  dataField: 'name',
-  text: 'Name'
-}, {
-  dataField: 'inStockDate',
-  text: 'Stock 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
-  }
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ stocks }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Date Editor</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ stocks }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js

@@ -1,55 +0,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'
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Double click to edit cell</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-with-selection-table.js

@@ -1,69 +0,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 selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  clickToEdit: 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'
-}];
-
-const selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  clickToEdit: true
-};
-
-<BootstrapTable
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  selectRow={ selectRow }
-  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Double click to edit cell</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      selectRow={ selectRow }
-      cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,100 +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.SELECT,
-    options: [{
-      value: 'A',
-      label: 'A'
-    }, {
-      value: 'B',
-      label: 'B'
-    }, {
-      value: 'C',
-      label: 'C'
-    }, {
-      value: 'D',
-      label: 'D'
-    }, {
-      value: 'E',
-      label: 'E'
-    }]
-  }
-}];
-
-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.SELECT,
-    options: [{
-      value: 'A',
-      label: 'A'
-    }, {
-      value: 'B',
-      label: 'B'
-    }, {
-      value: 'C',
-      label: 'C'
-    }, {
-      value: 'D',
-      label: 'D'
-    }, {
-      value: 'E',
-      label: 'E'
-    }]
-  }
-}];
-
-<BootstrapTable
-  keyField="id"
-  data={ jobs }
-  columns={ columns }
-  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-/>
-`;
-
-export default () => (
-  <div>
-    <h3>Dropdown Editor</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ jobs }
-      columns={ columns }
-      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);