diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..83c6c8a
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["react", "es2015", "stage-0"]
+}
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..ca70c65
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,27 @@
+{
+ "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
+ }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index b512c09..a762eb0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,24 @@
-node_modules
\ No newline at end of file
+# 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
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..c1eb549
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+*~
+*.sublime-project
+*.sublime-workspace
+*.idea
+*.iml
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..02a5492
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,20 @@
+language: node_js
+
+node_js:
+ - "7"
+ - "6"
+
+cache:
+ yarn: true
+
+branches:
+ only:
+ # skip master branch when it's under development phase
+ # - master
+ - develop
+
+before_install:
+ - curl -o- -L https://yarnpkg.com/install.sh | bash -s
+ - export PATH="$HOME/.yarn/bin:$PATH"
+
+install: yarn install
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..9d8ed01
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,22 @@
+# 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.
+
+* 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.
\ No newline at end of file
diff --git a/README.md b/README.md
index 1d5d13d..1c2f4e5 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,46 @@
# react-bootstrap-table2
Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
-## The problems/features I want to solve
-* Performance
-* Fully compatiable with bootstrap 3 and 4(`react-bootstrap-table@4.0.0` already done)
-* Clean Code and Testing
-* Decrease the size of bundled file
-* **Split module/functionality from core module, make core module more lightweight**
-* Use [`storybook`](https://github.com/storybooks/storybook) to build examples
-* Support the aggregation(summary) view
-* Support the table footer
-* Support column/row span on header and body
-* Support sticky header
-* Support table section([react-bootstrap-table#721](https://github.com/AllenFang/react-bootstrap-table/pull/721))
-* Handle events well
-* Fix unalign issues
-* Make **stateless** table more easy to use(`react-bootstrap-table` alread have `remote` mode but have some bugs)
-* Customizable table
-* Support the nested data([react-bootstrap-table#50](https://github.com/AllenFang/react-bootstrap-table/issues/50◊))
-* Consider to support column resize
-* Consider to make animation on `react-bootstrap-table2` more easy
+> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it ;(
-## The feature may lost on react-bootstrap-table
-* Have a great chance that I don't support the vertical scrollbar on table
\ No newline at end of file
+`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
+
+* [`react-bootstrap-table2-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+ * Core table module, include sorting and row selection
+* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+ * Column filter Addons
+* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+ * Cell Editing Addons
+* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+ * Pagination Addons
+* [`react-bootstrap-z-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+ * Overlay/Loading Addons
+
+This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
+
+## Migration
+If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).
+
+## Usage
+See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
+
+## Online Demo
+See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
+
+## Roadmap
+See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
+
+## Development
+Please check [development guide](./docs/development.md).
+
+## How should I run storybook example in my local?
+
+```sh
+$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+$ cd react-bootstrap-table2
+$ yarn install
+$ yarn storybook
+$ Go to localhost:6006
+```
+
+**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..828cae1
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,277 @@
+# Documentation
+
+## BootstrapTable Props
+
+#### Required
+* [keyField (**required**)](#keyField)
+* [data (**required**)](#data)
+* [columns (**required**)](#columns)
+
+#### Optional
+* [remote](#remote)
+* [loading](#loading)
+* [caption](#caption)
+* [striped](#striped)
+* [bordered](#bordered)
+* [hover](#hover)
+* [condensed](#condensed)
+* [cellEdit](#cellEdit)
+* [selectRow](#selectRow)
+* [rowStyle](#rowStyle)
+* [rowClasses](#rowClasses)
+* [rowEvents](#rowEvents)
+* [defaultSorted](#defaultSorted)
+* [pagination](#pagination)
+* [filter](#filter)
+* [onTableChange](#onTableChange)
+
+### keyField(**required**) - [String]
+Tells `react-bootstrap-table2` which column is unique.
+
+### data(**required**) - [Array]
+Provides data for your table. It accepts a single Array object.
+
+### columns(**required**) - [Object]
+Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
+
+### remote - [Bool | Object]
+Default is `false`, if enable`remote`, you are suppose to 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,
+ filter: true,
+ sort: true,
+ cellEdit: true
+} }
+```
+
+In above case, only column filter will be handled on remote.
+
+> Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable`
+> It's the only way to communicate to your remote server and update table states.
+
+A special case for remote pagination:
+```js
+remote={ { pagination: true, filter: false, sort: false } }
+```
+
+There is a apecial case for remote pagination, even you only specified the paignation 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 datas.
+
+### loading - [Bool]
+Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
+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.
+
+### overlay - [Function]
+`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
+
+```sh
+$ npm install react-bootstrap-table2-overlay
+```
+```js
+import overlayFactory from 'react-bootstrap-table2-overlay';
+
+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.
+
+### striped - [Bool]
+Same as bootstrap `.table-striped` class for adding zebra-stripes to a table.
+### bordered - [Bool]
+Same as bootstrap `.table-bordered` class for adding borders to a table and table cells.
+### hover - [Bool]
+Same as bootstrap `.table-hover` class for adding mouse hover effect (grey background color) on table rows.
+### condensed - [Bool]
+Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
+
+### cellEdit - [Object]
+Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
+
+### selectRow - [Object]
+Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
+
+### rowStyle = [Object | Function]
+Custom the style of table rows:
+
+```js
+rowClasses = [String | Function]
+Custom the style of table rows:
+
+```js
+rowEvents - [Object]
+Custom the events on row:
+
+```js
+const rowEvents = {
+ onClick: (e) => {
+ ....
+ }
+};
+defaultSorted - [Array]
+`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
+
+```js
+const defaultSorted = [{
+ dataField: 'name', // if dataField is not match to any column you defined, it will be ignored.
+ order: 'desc' // desc or asc
+}];
+```
+
+### pagination - [Object]
+`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly.
+
+```sh
+$ 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';
+
+// omit...
+
+filter - [Object]
+`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
+
+```sh
+$ npm install react-bootstrap-table2-filter --save
+```
+
+After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
+
+```js
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+const columns = [ {
+ dataField: 'id',
+ text: 'Production ID'
+}, {
+ dataField: 'name',
+ text: 'Production Name',
+ filter: textFilter() // apply text filter
+}, {
+ dataField: 'price',
+ text: 'Production Price'
+} ];
+onTableChange - [Function]
+This callback function will be called when [`remote`](#remote) enabled only.
+
+```js
+const onTableChange = (type, newState) => {
+ // handle any data change here
+}
+cellEdit - [Object]
+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: () => { ... }
+}
+```
+
+### 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`](./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.
+
+### cellEdit.beforeSaveCell - [Function]
+This callback function will be called before triggering cell update.
+
+```js
+const cellEdit = {
+ // omit...
+ beforeSaveCell: (oldValue, newValue, row, column) => { ... }
+}
+```
+
+### cellEdit.afterSaveCell - [Function]
+This callback function will be called after updating cell.
+
+```js
+const cellEdit = {
+ // omit...
+ afterSaveCell: (oldValue, newValue, row, column) => { ... }
+};
+```
+
+### 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 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.
+
diff --git a/docs/columns.md b/docs/columns.md
new file mode 100644
index 0000000..a18a073
--- /dev/null
+++ b/docs/columns.md
@@ -0,0 +1,580 @@
+# Definition of columns props on BootstrapTable
+
+Available properties in a column object:
+
+#### Required
+* [dataField (**required**)](#dataField)
+* [text (**required**)](#text)
+
+#### Optional
+* [hidden](#hidden)
+* [formatter](#formatter)
+* [formatExtraData](#formatExtraData)
+* [sort](#sort)
+* [sortFunc](#sortFunc)
+* [classes](#classes)
+* [style](#style)
+* [title](#title)
+* [events](#events)
+* [align](#align)
+* [attrs](#attrs)
+* [headerFormatter](#headerFormatter)
+* [headerClasses](#headerClasses)
+* [headerStyle](#headerStyle)
+* [headerTitle](#headerTitle)
+* [headerEvents](#headerEvents)
+* [headerAlign](#headerAlign)
+* [headerAttrs](#headerAttrs)
+* [headerSortingClasses](#headerSortingClasses)
+* [headerSortingStyle](#headerSortingStyle)
+* [editable](#editable)
+* [validator](#validator)
+* [editCellStyle](#editCellStyle)
+* [editCellClasses](#editCellClasses)
+* [filter](#filter)
+* [filterValue](#filterValue)
+
+Following is a most simplest and basic usage:
+
+```js
+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
+
+## column.dataField (**required**) - [String]
+Use `dataField` to specify what field should be apply on this column. If your raw data is nested, for example:
+
+```js
+const row = {
+ id: 'A001',
+ address: {
+ postal: '1234-12335',
+ city: 'Chicago'
+ }
+}
+```
+You can use `dataField` with dot(`.`) to describe nested object:
+
+```js
+dataField: 'address.postal'
+dataField: 'address.city'
+```
+
+## 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)
+
+## column.hidden - [Bool]
+`hidden` allow you to hide column when `true` given.
+
+## 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)
+
+## 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
+* `colIndex`: index of current column
+* `components`: an object which contain all of other react element, like sort caret or filter etc.
+
+The third argument: `components` have following specified properties:
+```js
+{
+ sortElement, // sort caret element, it will not be undefined when you enable sort on this column
+ filterElement // filter element, it will not be undefined when you enable column.filter on this column
+}
+```
+
+## 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.
+
+## column.sort - [Bool]
+Enable the column sort via a `true` value given.
+
+## column.sortFunc - [Function]
+`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept four arguments:
+
+```js
+{
+ // omit...
+ sort: true,
+ sortFunc: (a, b, order, dataField) => {
+ if (order === 'asc') return a - b;
+ else return b - a;
+ }
+}
+```
+> The possible value of `order` argument is **`asc`** and **`desc`**.
+
+## column.classes - [String | Function]
+It's availabe to have custom class on table column:
+
+```js
+{
+ // omit...
+ 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::
+
+
+```js
+{
+ classes: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result as element class.
+
+## column.headerClasses - [String | Function]
+It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
+
+```js
+{
+ // omit...
+ headerClasses: 'id-custom-cell'
+}
+```
+Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
+
+```js
+{
+ headerClasses: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element headerClasses.
+
+## column.style - [Object | Function]
+It's availabe to have custom style on table column:
+
+```js
+{
+ // omit...
+ style: { backgroundColor: 'green' }
+}
+```
+
+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:
+
+
+```js
+{
+ style: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element style.
+
+
+## column.headerStyle - [Object | Function]
+It's availabe to have customized inline-style on table header column:
+
+```js
+{
+ // omit...
+ headerStyle: { backgroundColor: 'green' }
+}
+```
+
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
+
+```js
+{
+ headerStyle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element headerStyle.
+
+
+## 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:
+
+
+```js
+{
+ // omit...
+ title: function callback(cell, row, rowIndex, colIndex) { ... }
+ // return custom title here
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element title.
+
+## column.headerTitle - [Bool | Function]
+`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title),
+
+```js
+{
+ // omit...
+ headerTitle: true
+}
+```
+
+It's also availabe to custom via a callback function:
+```js
+{
+ headerTitle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element headerTitle.
+
+## 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:
+
+```js
+{
+ // omit...
+ align: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element text alignment.
+
+## 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.
+
+```js
+{
+ // omit...
+ headerAlign: 'center'
+}
+```
+
+Also, you can custom the align by a callback function:
+
+```js
+{
+ // omit...
+ headerAlign: (column, colIndex) => {
+ // column is an object and perform itself
+ // return custom title here
+ }
+}
+```
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `String` will be the result of element headerAlign.
+
+
+## column.events - [Object]
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
+
+```js
+{
+ // omit...
+ events: {
+ onClick: e => { ... }
+ }
+}
+```
+
+## column.headerEvents - [Object]
+`headerEvents` same as [`column.events`](#events) but this is for header column.
+
+```js
+{
+ // omit...
+ headerEvents: {
+ onClick: e => { ... }
+ }
+}
+```
+
+## 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
+{
+ // omit...
+ attrs: {
+ title: 'bar',
+ 'data-test': 'foo'
+ }
+}
+```
+Not only `Object`, `callback function` is also acceptable. It takes `4` arguments and an `Object` is expect to return:
+
+```js
+{
+ attrs: function callback(cell, row, rowIndex, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The value of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+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 priorty and it will be overwrited.
+
+```js
+{
+ // omit...
+ title: true, // get higher priority
+ attrs: { title: 'test' }
+}
+```
+
+## column.headerAttrs - [Object | Function]
+`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column.
+```js
+{
+ // omit...
+ headerAttrs: {
+ title: 'bar',
+ 'data-test': 'foo'
+ }
+}
+```
+
+Additionally, customize the header attributes by a **2** arguments callback function:
+
+```js
+{
+ // omit...
+ headerAttrs: (column, colIndex) => ({
+ // return customized HTML attribute here
+ })
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+**Return value**
+
+A new `Object` will be the result of element headerAttrs.
+
+> Caution:
+> Same as [column.attrs](#attrs), it has lower priority and will be
+> overwrited when other props related to HTML attributes were given.
+
+### headerSortingClasses - [String | Function]
+
+`headerSortingClasses` allows to customize `class` for header cell when this column is sorting.
+
+```js
+const headerSortingClasses = 'demo-sorting';
+```
+
+Furthermore, it also accepts a callback which takes **4** arguments and `String` is expected to return:
+
+```js
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { ... }
+```
+
+* `column`: The value of current column.
+* `sortOrder`: The order of current sorting
+* `isLastSorting`: Is the last one of sorted columns.
+* `colIndex`: The index of the current column being processed in BootstrapTable.
+
+### headerSortingStyle - [Object | Function]
+
+It's similiar 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:
+
+```js
+const sortingHeaderStyle = {
+ backgroundColor: 'red'
+};
+```
+
+## 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`.
+
+If a callback function given, you can control the editable level as cell level:
+
+```js
+{
+ // omit...
+ editable: (cell, row, rowIndex, colIndex) => {
+ // return true or false;
+ }
+}
+```
+
+## 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`:
+
+```js
+{
+ // omit...
+ validator: (newValue, row, column) => {
+ return ...;
+ }
+}
+```
+
+The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead:
+```js
+{
+ valid: false,
+ message: 'SOME_REASON_HERE'
+}
+```
+
+## column.editCellStyle - [Object | Function]
+You can use `column.editCellStyle` to custom the style of `` when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The object of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+```js
+{
+ editCellStyle: { ... }
+}
+```
+Or take a callback function
+
+```js
+{
+ editCellStyle: (cell, row, rowIndex, colIndex) => {
+ // it is suppose to return an object
+ }
+}
+```
+
+## column.editCellClasses - [String | Function]
+You can use `column.editCellClasses` to add custom class on ` ` 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`.
+
+```js
+{
+ editCellClasses: 'custom-class'
+}
+```
+Or take a callback function
+
+```js
+{
+ editCellClasses: (cell, row, rowIndex, colIndex) => {
+ // it is suppose to return a string
+ }
+}
+```
+
+## 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`)
+
+We have a quick example to show you how to use `column.filter`:
+
+```
+import { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}
+```
+
+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.
+
+## 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 filterd:
+
+**Parameters**
+* `cell`: The value of current cell.
+* `row`: The value of current row.
+
+**Return value**
+
+A final `String` value you want to be filtered.
+
+```js
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter(),
+ filterValue: (cell, row) => owners[cell]
+}
+```
\ No newline at end of file
diff --git a/docs/development.md b/docs/development.md
new file mode 100644
index 0000000..ade502e
--- /dev/null
+++ b/docs/development.md
@@ -0,0 +1,28 @@
+## Development Guide
+
+### Setup
+```bash
+$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+$ cd react-bootstrap-table
+$ 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
+```
\ No newline at end of file
diff --git a/docs/migration.md b/docs/migration.md
new file mode 100644
index 0000000..a2968c2
--- /dev/null
+++ b/docs/migration.md
@@ -0,0 +1,116 @@
+# 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 [Roadmap](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 [offical docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
+
+## Preface
+
+Currently, **I still can't implement all the mainly features in legacy `react-bootstrap-table`**, so please watch our github repo or [blog](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/) to make sure the legacy features you wanted are already implemented on `react-bootstrap-table2`. Anyway, ask me by open issue is ok.
+
+-----
+
+`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
+
+* [`react-bootstrap-table2-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+ * Core table module, include sorting and row selection
+* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+ * Column filter Addons
+* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+ * Cell Editing Addons
+* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+ * Pagination Addons
+* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+ * Overlay/Loading Addons
+
+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 kernal module(SRP). Hence, which means you probably need to install above addons when you need specific features.
+
+## Core Table Migration
+
+There is a big chagne is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`:
+
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+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
+* **radio**
+* **checkbox**
+
+#### examples
+
+```js
+const selectRow = {
+ mode: 'radio' // single row selection
+};
+
+selectRow.style - [Object | Function]
+`selectRow.style` allow you to have custom style on selected rows:
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ style: { background: 'red' }
+};
+```
+
+If you wanna more flexible customization, `selectRow.style` also accept a function:
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ style: (row, rowIndex) => { return ...; }
+};
+```
+
+### selectRow.classes - [String | Function]
+`selectRow.classes` allow you to add css class on selected rows:
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ classes: 'custom-class'
+};
+```
+
+If you wanna more flexible customization, `selectRow.classes` also accept a function:
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ classes: (row, rowIndex) => { return ...; }
+};
+```
+
+### selectRow.bgColor - [String | Function]
+The backgroud color when row is selected
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ bgColor: 'red'
+};
+```
+
+There's also a more good way to custom it:
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ bgColor: (row, rowIndex) => {
+ return ....; // return a color code
+ }
+};
+```
+
+### 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
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5]
+};
+```
+
+### selectRow.clickToSelect - [Bool]
+Allow user to select row by clicking on the row.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+```
+
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
+> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
+
+### selectRow.clickToEdit - [Bool]
+Able to click to edit cell and select row
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+ clickToEdit: true
+};
+```
+
+### selectRow.onSelect - [Function]
+This callback function will be called when a row is select/unselect and pass following three arguments:
+`row`, `isSelect` and `rowIndex`.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ onSelect: (row, isSelect, rowIndex) => {
+ // ...
+ }
+};
+```
+
+### selectRow.onSelectAll - [Function]
+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, results) => {
+ // ...
+ }
+};
+```
+
+### 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'
+};
+```
diff --git a/enzyme-setup.js b/enzyme-setup.js
new file mode 100644
index 0000000..e952b30
--- /dev/null
+++ b/enzyme-setup.js
@@ -0,0 +1,8 @@
+import Adapter from 'enzyme-adapter-react-16';
+import { configure } from 'enzyme';
+
+const configureEnzyme = () => {
+ configure({ adapter: new Adapter() });
+};
+
+configureEnzyme();
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
new file mode 100644
index 0000000..f124ae9
--- /dev/null
+++ b/gulpfile.babel.js
@@ -0,0 +1,84 @@
+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'
+].reduce((pkg, curr) => `${curr}|${pkg}`, '');
+
+const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
+
+const STYLE_PKGS = [
+ 'react-bootstrap-table2',
+ 'react-bootstrap-table2-paginator'
+].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() {
+ return gulp.src('./webpack.prod.config.babel.js')
+ .pipe(shell(['webpack --config <%= file.path %>']));
+}
+
+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);
diff --git a/lerna.json b/lerna.json
new file mode 100644
index 0000000..1653f5e
--- /dev/null
+++ b/lerna.json
@@ -0,0 +1,7 @@
+{
+ "lerna": "2.0.0",
+ "packages": [
+ "packages/*"
+ ],
+ "version": "independent"
+}
diff --git a/package.json b/package.json
index 3234f45..45f4029 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,104 @@
{
"name": "react-bootstrap-table2",
"version": "0.0.1",
+ "private": true,
"description": "Rebuilt for react-bootstrap-table",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "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 --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"
},
"repository": {
"type": "git",
"url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
},
- "author": "",
- "license": "ISC",
+ "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"
+ "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.1.1",
+ "enzyme-adapter-react-16": "1.0.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.0.0",
+ "react-dom": "16.0.0"
+ },
+ "jest": {
+ "collectCoverageFrom": [
+ "packages/**/*.js"
+ ],
+ "roots": [
+ "/packages"
+ ],
+ "setupFiles": [
+ "/enzyme-setup.js"
+ ],
+ "modulePaths": [
+ "/packages/react-bootstrap-table2"
+ ],
+ "testEnvironment": "node",
+ "testMatch": [
+ "**/test/**/*.test.js"
+ ]
+ }
}
diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md
new file mode 100644
index 0000000..02e0e46
--- /dev/null
+++ b/packages/react-bootstrap-table2-editor/README.md
@@ -0,0 +1,61 @@
+# react-bootstrap-table2-editor
+
+`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)**
+
+**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html)**
+
+-----
+
+## Install
+
+```sh
+$ 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:
+
+* click
+* dbclick
+
+That's look into how we enable the cell edit on tabe:
+
+```js
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+// omit
+
+
+ this.editor = node }
+ defaultValue={ value }
+ className={ editorClass }
+ { ...editorAttrs }
+ />
+ { hasError ?
+ );
+ }
+ };
diff --git a/packages/react-bootstrap-table2-editor/src/editor-indicator.js b/packages/react-bootstrap-table2-editor/src/editor-indicator.js
new file mode 100644
index 0000000..c19819d
--- /dev/null
+++ b/packages/react-bootstrap-table2-editor/src/editor-indicator.js
@@ -0,0 +1,19 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EditorIndicator = ({ invalidMessage }) =>
+ (
+
+ { invalidMessage }
+
+ );
+
+EditorIndicator.propTypes = {
+ invalidMessage: PropTypes.string
+};
+
+EditorIndicator.defaultProps = {
+ invalidMessage: null
+};
+export default EditorIndicator;
diff --git a/packages/react-bootstrap-table2-editor/src/text-editor.js b/packages/react-bootstrap-table2-editor/src/text-editor.js
new file mode 100644
index 0000000..52233e7
--- /dev/null
+++ b/packages/react-bootstrap-table2-editor/src/text-editor.js
@@ -0,0 +1,40 @@
+/* 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 } = this.props;
+ this.text.value = defaultValue;
+ this.text.focus();
+ }
+
+ render() {
+ const { defaultValue, className, ...rest } = this.props;
+ const editorClass = cs('form-control editor edit-text', className);
+ return (
+
+
+ { props.children }
+
+
+);
+
+
+describe('EditingCell', () => {
+ let wrapper;
+ let onUpdate;
+ let onEscape;
+ const row = {
+ id: 1,
+ name: 'A'
+ };
+
+ let column = {
+ dataField: 'id',
+ text: 'ID'
+ };
+
+ beforeEach(() => {
+ onEscape = sinon.stub();
+ onUpdate = sinon.stub();
+ wrapper = shallow(
+
+
+ );
+ });
+
+ 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(
+ { fragment }
);
+ }
+ };
+
+ afterEach(() => {
+ onTableChangeCB.reset();
+ });
+
+ beforeEach(() => {
+ const props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
+ });
+ createCellEditWrapper(props);
+ });
+
+ it('should render CellEditWrapper correctly', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find(BootstrapTable)).toBeDefined();
+ });
+
+ it('should have correct state', () => {
+ expect(instance.state.ridx).toBeNull();
+ expect(instance.state.cidx).toBeNull();
+ expect(instance.state.message).toBeNull();
+ expect(instance.state.isDataChanged).toBeFalsy();
+ });
+
+ it('should inject correct props to base component', () => {
+ const base = wrapper.find(BootstrapTable);
+ expect(base.props().cellEdit).toBeDefined();
+ expect(base.props().cellEdit.onStart).toBeDefined();
+ expect(base.props().cellEdit.onEscape).toBeDefined();
+ expect(base.props().cellEdit.onUpdate).toBeDefined();
+ expect(base.props().cellEdit.EditingCell).toBeDefined();
+ expect(base.props().cellEdit.ridx).toBeNull();
+ expect(base.props().cellEdit.cidx).toBeNull();
+ expect(base.props().cellEdit.message).toBeNull();
+ expect(base.props().isDataChanged).toBe(instance.state.isDataChanged);
+ });
+
+ describe('when receive new cellEdit prop', () => {
+ const spy = jest.spyOn(CellEditWrapper.prototype, 'escapeEditing');
+
+ describe('and cellEdit is not work on remote', () => {
+ beforeEach(() => {
+ const props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
+ });
+ createCellEditWrapper(props);
+ wrapper.setProps({ cellEdit: props.cellEdit });
+ });
+
+ it('should always setting state.isDataChanged as false', () => {
+ expect(instance.state.isDataChanged).toBeFalsy();
+ });
+ });
+
+ describe('and cellEdit is work on remote', () => {
+ let errorMessage;
+ let props;
+ beforeEach(() => {
+ props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+ remote: true
+ });
+ });
+
+ describe('and cellEdit.errorMessage is defined', () => {
+ beforeEach(() => {
+ createCellEditWrapper(props, false);
+ errorMessage = 'test';
+ const newCellEdit = {
+ ...props.cellEdit,
+ options: { ...props.cellEdit.options, errorMessage }
+ };
+ wrapper.setProps({ cellEdit: newCellEdit });
+ });
+
+ it('should setting correct state', () => {
+ expect(instance.state.isDataChanged).toBeFalsy();
+ expect(instance.state.message).toEqual(errorMessage);
+ });
+ });
+
+ describe('and cellEdit.errorMessage is undefined', () => {
+ beforeEach(() => {
+ errorMessage = null;
+ createCellEditWrapper(props, false);
+ const newCellEdit = {
+ ...props.cellEdit,
+ options: { ...props.cellEdit.options, errorMessage }
+ };
+ wrapper.setProps({ cellEdit: newCellEdit });
+ });
+
+ it('should setting correct state', () => {
+ expect(wrapper.state().isDataChanged).toBeTruthy();
+ });
+
+ it('should escape current editing', () => {
+ expect(spy).toHaveBeenCalled();
+ });
+ });
+ });
+ });
+
+ describe('call escapeEditing function', () => {
+ it('should set state correctly', () => {
+ instance.escapeEditing();
+ expect(instance.state.ridx).toBeNull();
+ expect(instance.state.cidx).toBeNull();
+ });
+ });
+
+ describe('call startEditing function', () => {
+ const ridx = 1;
+ const cidx = 3;
+
+ it('should set state correctly', () => {
+ instance.startEditing(ridx, cidx);
+ expect(instance.state.ridx).toEqual(ridx);
+ expect(instance.state.cidx).toEqual(cidx);
+ expect(instance.state.isDataChanged).toBeFalsy();
+ });
+
+ describe('if selectRow.clickToSelect is defined', () => {
+ beforeEach(() => {
+ const selectRow = { mode: 'checkbox', clickToSelect: true };
+ const props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+ selectRow
+ });
+ createCellEditWrapper(props);
+ });
+
+ it('should not set state', () => {
+ instance.startEditing(ridx, cidx);
+ expect(instance.state.ridx).toBeNull();
+ expect(instance.state.cidx).toBeDefined();
+ });
+ });
+
+ describe('if selectRow.clickToSelect and selectRow.clickToEdit is defined', () => {
+ beforeEach(() => {
+ const selectRow = { mode: 'checkbox', clickToSelect: true, clickToEdit: true };
+ const props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+ selectRow
+ });
+ createCellEditWrapper(props);
+ });
+
+ it('should set state correctly', () => {
+ instance.startEditing(ridx, cidx);
+ expect(instance.state.ridx).toEqual(ridx);
+ expect(instance.state.cidx).toEqual(cidx);
+ });
+ });
+ });
+
+ describe('call completeEditing function', () => {
+ it('should set state correctly', () => {
+ instance.completeEditing();
+ expect(instance.state.ridx).toBeNull();
+ expect(instance.state.cidx).toBeNull();
+ expect(instance.state.message).toBeNull();
+ expect(instance.state.isDataChanged).toBeTruthy();
+ });
+ });
+
+ describe('call handleCellUpdate function', () => {
+ let props;
+ const row = data[0];
+ const column = columns[1];
+ const newValue = 'new name';
+
+ describe('when cell edit is work on remote', () => {
+ const spy = jest.spyOn(CellEditWrapper.prototype, 'handleCellChange');
+
+ beforeEach(() => {
+ props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+ remote: true
+ });
+ createCellEditWrapper(props);
+ instance.handleCellUpdate(row, column, newValue);
+ });
+
+ it('should calling handleCellChange correctly', () => {
+ expect(spy).toHaveBeenCalled();
+ expect(spy.mock.calls).toHaveLength(1);
+ expect(spy.mock.calls[0]).toHaveLength(3);
+ expect(spy.mock.calls[0][0]).toEqual(row.id);
+ expect(spy.mock.calls[0][1]).toEqual(column.dataField);
+ expect(spy.mock.calls[0][2]).toEqual(newValue);
+ });
+ });
+
+ describe('when cell edit is not work on remote', () => {
+ const spyOnCompleteEditing = jest.spyOn(CellEditWrapper.prototype, 'completeEditing');
+ const spyOnStoreEdit = jest.spyOn(Store.prototype, 'edit');
+
+ beforeEach(() => {
+ props = createTableProps({
+ cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
+ });
+ createCellEditWrapper(props);
+ instance.handleCellUpdate(row, column, newValue);
+ });
+
+ afterEach(() => {
+ spyOnStoreEdit.mockReset();
+ spyOnCompleteEditing.mockReset();
+ });
+
+ it('should calling props.store.edit', () => {
+ expect(spyOnStoreEdit).toHaveBeenCalled();
+ expect(spyOnStoreEdit.mock.calls).toHaveLength(1);
+ expect(spyOnStoreEdit.mock.calls[0]).toHaveLength(3);
+ expect(spyOnStoreEdit.mock.calls[0][0]).toEqual(row.id);
+ expect(spyOnStoreEdit.mock.calls[0][1]).toEqual(column.dataField);
+ expect(spyOnStoreEdit.mock.calls[0][2]).toEqual(newValue);
+ });
+
+ it('should calling completeEditing function', () => {
+ expect(spyOnCompleteEditing).toHaveBeenCalled();
+ });
+
+ describe('if cellEdit.afterSaveCell prop defined', () => {
+ const aftereSaveCellCallBack = sinon.stub();
+
+ beforeEach(() => {
+ props = createTableProps({
+ cellEdit: {
+ mode: Const.CLICK_TO_CELL_EDIT,
+ afterSaveCell: aftereSaveCellCallBack
+ }
+ });
+ createCellEditWrapper(props);
+ instance.handleCellUpdate(row, column, newValue);
+ });
+
+ it('should calling cellEdit.afterSaveCell correctly', () => {
+ expect(aftereSaveCellCallBack.callCount).toBe(1);
+ expect(aftereSaveCellCallBack.calledWith(
+ row[column.dataField], newValue, row, column)
+ ).toBe(true);
+ });
+ });
+ });
+
+ describe('if cellEdit.beforeSaveCell prop defined', () => {
+ const beforeSaveCellCallBack = sinon.stub();
+ beforeEach(() => {
+ props = createTableProps({
+ cellEdit: {
+ mode: Const.CLICK_TO_CELL_EDIT,
+ beforeSaveCell: beforeSaveCellCallBack
+ }
+ });
+ createCellEditWrapper(props);
+ instance.handleCellUpdate(row, column, newValue);
+ });
+
+ it('should calling cellEdit.beforeSaveCell correctly', () => {
+ expect(beforeSaveCellCallBack.callCount).toBe(1);
+ expect(beforeSaveCellCallBack.calledWith(
+ row[column.dataField], newValue, row, column)
+ ).toBe(true);
+ });
+ });
+ });
+});
diff --git a/packages/react-bootstrap-table2-example/.storybook/.babelrc b/packages/react-bootstrap-table2-example/.storybook/.babelrc
new file mode 100644
index 0000000..3feddd3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/.storybook/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["react", "es2015", "stage-0", ["env", {"modules": false} ]],
+ "plugins": ["transform-class-properties"]
+}
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-example/.storybook/addons.js b/packages/react-bootstrap-table2-example/.storybook/addons.js
new file mode 100644
index 0000000..afebf47
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/.storybook/addons.js
@@ -0,0 +1,5 @@
+/* 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';
diff --git a/packages/react-bootstrap-table2-example/.storybook/config.js b/packages/react-bootstrap-table2-example/.storybook/config.js
new file mode 100644
index 0000000..f50d246
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/.storybook/config.js
@@ -0,0 +1,26 @@
+/* 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) => (
+
+ { story() }
+
+);
+
+
+// prepend the story name to log messages
+addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+
+addDecorator(componentDecorator);
+
+configure(loadStories, module);
diff --git a/packages/react-bootstrap-table2-example/.storybook/preview-head.html b/packages/react-bootstrap-table2-example/.storybook/preview-head.html
new file mode 100644
index 0000000..edb9231
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/.storybook/preview-head.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
new file mode 100644
index 0000000..166aef5
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
@@ -0,0 +1,65 @@
+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 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,
+};
+
+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],
+}, {
+ 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;
+};
diff --git a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
new file mode 100644
index 0000000..bccdef1
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
@@ -0,0 +1,42 @@
+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...
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/caption-table.js b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
new file mode 100644
index 0000000..e613545
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const CaptionElement = () => Component as Header ;
+
+Component as Header ;
+
+export default () => (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/index.js b/packages/react-bootstrap-table2-example/examples/basic/index.js
new file mode 100644
index 0000000..310583c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/index.js
@@ -0,0 +1,42 @@
+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'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
new file mode 100644
index 0000000..329fabf
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
@@ -0,0 +1,37 @@
+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...
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
new file mode 100644
index 0000000..3451b8f
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
@@ -0,0 +1,46 @@
+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...
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
new file mode 100644
index 0000000..15175ba
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js
@@ -0,0 +1,60 @@
+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'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
new file mode 100644
index 0000000..b2b58e8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js
@@ -0,0 +1,61 @@
+/* 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')
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
new file mode 100644
index 0000000..afb1523
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js
@@ -0,0 +1,64 @@
+/* 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'
+}];
+
+ { console.log('Before Saving Cell!!'); },
+ afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+ }) }
+/>
+`;
+
+export default () => (
+
+ { console.log('Before Saving Cell!!'); },
+ afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+ }) }
+ />
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
new file mode 100644
index 0000000..59e40d8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js
@@ -0,0 +1,69 @@
+/* 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 };
+ }
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
new file mode 100644
index 0000000..457c890
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js
@@ -0,0 +1,91 @@
+/* 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;
+ }
+}];
+
+
+
Product Price should bigger than $2000
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
new file mode 100644
index 0000000..2338df1
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js
@@ -0,0 +1,58 @@
+/* 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
+}];
+
+
+
Only Product Price is bigger than 2101 is editable
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
new file mode 100644
index 0000000..38bfb0c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js
@@ -0,0 +1,56 @@
+/* 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'
+}];
+
+
+
Click to edit cell
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
new file mode 100644
index 0000000..5e9d8a9
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js
@@ -0,0 +1,64 @@
+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'
+}];
+
+
+
Product Name is non editable
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
new file mode 100644
index 0000000..9c0deee
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js
@@ -0,0 +1,55 @@
+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'
+}];
+
+
+
Double click to edit cell
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
new file mode 100644
index 0000000..f0ef206
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js
@@ -0,0 +1,62 @@
+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'
+}];
+
+ [0, 3]
+ }) }
+/>
+`;
+export default () => (
+
+
Product ID: 0, 3 is non editable
+ [0, 3]
+ }) }
+ />
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
new file mode 100644
index 0000000..0901eb6
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js
@@ -0,0 +1,75 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator(5);
+
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'name',
+ text: 'Job Name',
+ filter: textFilter()
+}, {
+ dataField: 'owner',
+ text: 'Job Owner',
+ filter: textFilter(),
+ formatter: (cell, row) => owners[cell],
+ filterValue: (cell, row) => owners[cell]
+}, {
+ dataField: 'type',
+ text: 'Job Type',
+ filter: textFilter(),
+ formatter: (cell, row) => types[cell],
+ filterValue: (cell, row) => types[cell]
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'name',
+ text: 'Job Name',
+ filter: textFilter()
+}, {
+ dataField: 'owner',
+ text: 'Job Owner',
+ filter: textFilter(),
+ formatter: (cell, row) => owners[cell],
+ filterValue: (cell, row) => owners[cell]
+}, {
+ dataField: 'type',
+ text: 'Job Type',
+ filter: textFilter(),
+ filterValue: (cell, row) => types[cell]
+}];
+
+// shape of job: { id: 0, name: 'Job name 0', owner: 1, type: 3 }
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
new file mode 100644
index 0000000..e4be0a8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
@@ -0,0 +1,69 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ delay: 1000, // default is 500ms
+ style: {
+ backgroundColor: 'yellow'
+ },
+ className: 'test-classname',
+ placeholder: 'Custom PlaceHolder',
+ onClick: e => console.log(e)
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ delay: 1000, // default is 500ms
+ style: {
+ backgroundColor: 'yellow'
+ },
+ className: 'test-classname',
+ placeholder: 'Custom PlaceHolder',
+ onClick: e => console.log(e)
+ })
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
new file mode 100644
index 0000000..d37c2f5
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ defaultValue: '2103'
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ defaultValue: '2103'
+ })
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
new file mode 100644
index 0000000..cb34658
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter({
+ comparator: Comparator.EQ // default is Comparator.LIKE
+ })
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter({
+ comparator: Comparator.EQ
+ })
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+
+
Product Name filter apply Equal Comparator
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
new file mode 100644
index 0000000..19eab47
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
new file mode 100644
index 0000000..6e98f2e
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
@@ -0,0 +1,53 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ align: 'center'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ align: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) return 'right';
+ return 'left';
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ align: 'center'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ align: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) return 'right';
+ return 'left';
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
new file mode 100644
index 0000000..7e7bfcb
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js
@@ -0,0 +1,48 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ attrs: { title: 'id column' }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': `customized data ${rowIndex}` })
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ attrs: { title: 'id column' }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ attrs: (cell, row, rowIndex, colIndex) => ({ 'data-test': \`customized data \${rowIndex}\` })
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+
Try to hover on Product Name header column
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
new file mode 100644
index 0000000..5fb7db3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
@@ -0,0 +1,53 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ classes: 'demo-key-row'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ classes: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) return 'demo-row-even';
+ return 'demo-row-odd';
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ classes: 'demo-key-row'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ classes: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) return 'demo-row-even';
+ return 'demo-row-odd';
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
new file mode 100644
index 0000000..32f0d69
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
@@ -0,0 +1,51 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ events: {
+ onClick: () => alert('Click on Product ID field')
+ }
+}, {
+ 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',
+ events: {
+ onClick: () => alert('Click on Product ID field')
+ }
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+
Try to Click on Product ID columns
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
new file mode 100644
index 0000000..dc5bb29
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+function priceFormatter(cell, row) {
+ if (row.onSale) {
+ return (
+ $ { cell } NTD(Sales!!) $ { cell } NTD
+ );
+}
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ formatter: priceFormatter
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+function priceFormatter(cell, row) {
+ if (row.onSale) {
+ return (
+
+ $ { cell } NTD(Sales!!)
+
+ );
+ }
+
+ return (
+ $ { cell } NTD
+ );
+}
+
+const columns = [
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ formatter: priceFormatter
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
new file mode 100644
index 0000000..ac388ca
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
@@ -0,0 +1,73 @@
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(5, (value, index) => ({
+ id: index,
+ name: `User Name ${index}`,
+ rank: Math.random() < 0.5 ? 'down' : 'up'
+}));
+
+function rankFormatter(cell, row, rowIndex, formatExtraData) {
+ return (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
new file mode 100644
index 0000000..9930248
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
@@ -0,0 +1,41 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ hidden: true
+}, {
+ 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',
+ hidden: true
+},
+// omit...
+];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
new file mode 100644
index 0000000..f37d7b9
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
@@ -0,0 +1,71 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ style: {
+ fontWeight: 'bold',
+ fontSize: '18px'
+ }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ style: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) {
+ return {
+ backgroundColor: '#81c784'
+ };
+ }
+ return {
+ backgroundColor: '#c8e6c9'
+ };
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ style: {
+ fontWeight: 'bold',
+ fontSize: '18px'
+ }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ style: (cell, row, rowIndex, colIndex) => {
+ if (rowIndex % 2 === 0) {
+ return {
+ backgroundColor: '#81c784'
+ };
+ }
+ return {
+ backgroundColor: '#c8e6c9'
+ };
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
new file mode 100644
index 0000000..016b0cb
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
@@ -0,0 +1,46 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ title: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ title: (cell, row, rowIndex, colIndex) => `this is custom title for ${cell}`
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ title: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ title: (cell, row, rowIndex, colIndex) => \`this is custom title for \${cell}\`
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+
Try to hover on any Product Name cells
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
new file mode 100644
index 0000000..eb62ddc
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
@@ -0,0 +1,62 @@
+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(5, (value, index) => ({
+ id: index,
+ name: `User Name ${index}`,
+ phone: 21009831 + index,
+ address: {
+ city: 'New York',
+ postCode: '1111-4512'
+ }
+}));
+
+const columns = [{
+ dataField: 'id',
+ text: 'User ID'
+}, {
+ dataField: 'name',
+ text: 'User Name'
+}, {
+ dataField: 'phone',
+ text: 'Phone'
+}, {
+ dataField: 'address.city',
+ text: 'City'
+}, {
+ dataField: 'address.postCode',
+ text: 'PostCode'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'User ID'
+}, {
+ dataField: 'name',
+ text: 'User Name'
+}, {
+ dataField: 'phone',
+ text: 'Phone'
+}, {
+ dataField: 'address.city',
+ text: 'City'
+}, {
+ dataField: 'address.postCode',
+ text: 'PostCode'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
new file mode 100644
index 0000000..f9fcab8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
@@ -0,0 +1,47 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerAlign: 'center'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerAlign: (column, colIndex) => 'right'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerAlign: 'center'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerAlign: (column, colIndex) => 'right'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
new file mode 100644
index 0000000..7f01864
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js
@@ -0,0 +1,47 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerAttrs: { title: 'ID header column' }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerAttrs: (column, colIndex) => ({ 'data-test': `customized data ${colIndex}` })
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerAttrs: { title: 'ID header column' }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerAttrs: (column, colIndex) => ({ 'data-test': \`customized data \${colIndex}\` })
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
new file mode 100644
index 0000000..b897bc2
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
@@ -0,0 +1,53 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerClasses: 'demo-row-odd'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ headerClasses: (column, colIndex) => {
+ if (colIndex % 2 === 0) return 'demo-row-even';
+ return 'demo-row-odd';
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerClasses: 'demo-row-odd'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ headerClasses: (column, colIndex) => {
+ if (colIndex % 2 === 0) return 'demo-row-even';
+ return 'demo-row-odd';
+ }
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
new file mode 100644
index 0000000..7928a37
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
@@ -0,0 +1,51 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerEvents: {
+ onClick: () => alert('Click on Product ID header column')
+ }
+}, {
+ 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',
+ events: {
+ onClick: () => alert('Click on Product ID header column')
+ }
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+
Try to Click on Product ID header column
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
new file mode 100644
index 0000000..ce30d70
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js
@@ -0,0 +1,91 @@
+/* eslint no-unused-vars: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+function priceFormatter(column, colIndex, { sortElement, filterElement }) {
+ return (
+
+ { filterElement }
+ { column.text }
+ { sortElement }
+
+ );
+}
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ sort: true,
+ filter: textFilter(),
+ headerFormatter: priceFormatter
+}];
+
+const defaultSorted = [{
+ dataField: 'name',
+ order: 'desc'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+// ...
+function priceFormatter(column, colIndex, { sortElement, filterElement }) {
+ return (
+
+ { filterElement }
+ { column.text }
+ { sortElement }
+
+ );
+}
+
+const columns = [
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ sort: true,
+ filter: textFilter(),
+ headerFormatter: priceFormatter
+}];
+
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
new file mode 100644
index 0000000..16e34fd
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
@@ -0,0 +1,61 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+function priceFormatter(column, colIndex) {
+ return (
+ $$ { column.text } $$ $$ { column.text } $$
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
new file mode 100644
index 0000000..80ec299
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
@@ -0,0 +1,69 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerStyle: {
+ backgroundColor: '#c8e6c9'
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ headerStyle: (column, colIndex) => {
+ if (colIndex % 2 === 0) {
+ return {
+ backgroundColor: '#81c784'
+ };
+ }
+ return {
+ backgroundColor: '#c8e6c9'
+ };
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerStyle: {
+ backgroundColor: '#c8e6c9'
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ headerStyle: (column, colIndex) => {
+ if (colIndex % 2 === 0) {
+ return {
+ backgroundColor: '#81c784'
+ };
+ }
+ return {
+ backgroundColor: '#c8e6c9'
+ };
+ }
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
new file mode 100644
index 0000000..94c71b7
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
@@ -0,0 +1,47 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerTitle: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerTitle: (column, colIndex) => `this is custom title for ${column.text}`
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ headerTitle: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ headerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js
new file mode 100644
index 0000000..faa0261
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js
@@ -0,0 +1,145 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+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 RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+
+ { sourceCode }
+
+);
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ sizePerPage: 10
+ };
+ }
+
+ handleTableChange = ({ page, sizePerPage }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ this.setState(() => ({
+ page,
+ data: products.slice(currentIndex, currentIndex + sizePerPage),
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+
+ { sourceCode }
+
+);
+
+Table.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class EmptyTableOverlay extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ sizePerPage: 10
+ };
+ }
+
+ handleTableChange = (type, { page, sizePerPage }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ this.setState(() => ({
+ page,
+ data: products.slice(currentIndex, currentIndex + sizePerPage),
+ sizePerPage
+ }));
+ }, 3000);
+ this.setState(() => ({ data: [] }));
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+
+ );
+ }
+}
+
+export default EmptyTableOverlay;
diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
new file mode 100644
index 0000000..efd296c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
@@ -0,0 +1,158 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import overlayFactory from 'react-bootstrap-table2-overlay';
+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';
+import overlayFactory from 'react-bootstrap-table2-overlay';
+
+// ...
+const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => (
+
+ { sourceCode }
+
+);
+
+RemotePagination.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ loading: PropTypes.bool.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ loading: false,
+ data: products.slice(0, 10),
+ sizePerPage: 10
+ };
+ }
+
+ handleTableChange = ({ page, sizePerPage }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ this.setState(() => ({
+ page,
+ loading: false,
+ data: products.slice(currentIndex, currentIndex + sizePerPage),
+ sizePerPage
+ }));
+ }, 3000);
+ this.setState(() => ({ loading: true }));
+ }
+
+ render() {
+ const { data, sizePerPage, page, loading } = this.state;
+ return (
+
+ { sourceCode }
+
+);
+
+RemotePagination.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ loading: PropTypes.bool.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ loading: false,
+ data: products.slice(0, 10),
+ sizePerPage: 10
+ };
+ }
+
+ handleTableChange = (type, { page, sizePerPage }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ this.setState(() => ({
+ page,
+ loading: false,
+ data: products.slice(currentIndex, currentIndex + sizePerPage),
+ sizePerPage
+ }));
+ }, 3000);
+ this.setState(() => ({ loading: true }));
+ }
+
+ render() {
+ const { data, sizePerPage, page, loading } = this.state;
+ return (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/index.js b/packages/react-bootstrap-table2-example/examples/pagination/index.js
new file mode 100644
index 0000000..728f62d
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/index.js
@@ -0,0 +1,45 @@
+/* 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'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js b/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
new file mode 100644
index 0000000..21807d8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/pagination-hooks.js
@@ -0,0 +1,82 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint no-console: 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'
+}];
+
+const options = {
+ onSizePerPageChange: (sizePerPage, page) => {
+ console.log('Size per page change!!!');
+ console.log('Newest size per page:' + sizePerPage);
+ console.log('Newest page:' + page);
+ },
+ onPageChange: (page, sizePerPage) => {
+ console.log('Page change!!!');
+ console.log('Newest size per page:' + sizePerPage);
+ console.log('Newest page:' + page);
+ }
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-all.js b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js
new file mode 100644
index 0000000..2720584
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/remote/remote-all.js
@@ -0,0 +1,202 @@
+/* eslint guard-for-in: 0 */
+/* eslint no-restricted-syntax: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+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',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+// ...
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+
+ { sourceCode }
+
+);
+
+RemoteAll.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ totalSize: products.length,
+ sizePerPage: 10
+ };
+ this.handleTableChange = this.handleTableChange.bind(this);
+ }
+
+ handleTableChange = (type, { page, sizePerPage, filters }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ page,
+ data: result.slice(currentIndex, currentIndex + sizePerPage),
+ totalSize: result.length,
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+
+
When remote.pagination is enabled, the filtering,
+ sorting and searching will also change to remote mode automatically
+ { sourceCode }
+
+);
+
+RemoteAll.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ totalSize: products.length,
+ sizePerPage: 10
+ };
+ this.handleTableChange = this.handleTableChange.bind(this);
+ }
+
+ handleTableChange = (type, { page, sizePerPage, filters }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ page,
+ data: result.slice(currentIndex, currentIndex + sizePerPage),
+ totalSize: result.length,
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+
+ { sourceCode }
+
+ );
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products,
+ errorMessage: null
+ };
+ }
+
+ handleTableChange = (type, { data, cellEdit: { rowId, dataField, newValue } }) => {
+ setTimeout(() => {
+ if (newValue === 'test' && dataField === 'name') {
+ this.setState(() => ({
+ data,
+ errorMessage: 'Oops, product name shouldn't be "test"'
+ }));
+ } else {
+ const result = data.map((row) => {
+ if (row.id === rowId) {
+ const newRow = { ...row };
+ newRow[dataField] = newValue;
+ return newRow;
+ }
+ return row;
+ });
+ this.setState(() => ({
+ data: result,
+ errorMessage: null
+ }));
+ }
+ }, 2000);
+ }
+
+ render() {
+ return (
+
+ { sourceCode }
+
+ );
+};
+
+RemoteCellEdit.propTypes = {
+ data: PropTypes.array.isRequired,
+ onTableChange: PropTypes.func.isRequired,
+ errorMessage: PropTypes.string.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products,
+ errorMessage: null
+ };
+ }
+
+ handleTableChange = (type, { data, cellEdit: { rowId, dataField, newValue } }) => {
+ setTimeout(() => {
+ if (newValue === 'test' && dataField === 'name') {
+ this.setState(() => ({
+ data,
+ errorMessage: 'Oops, product name shouldn\'t be "test"'
+ }));
+ } else {
+ const result = data.map((row) => {
+ if (row.id === rowId) {
+ const newRow = { ...row };
+ newRow[dataField] = newValue;
+ return newRow;
+ }
+ return row;
+ });
+ this.setState(() => ({
+ data: result,
+ errorMessage: null
+ }));
+ }
+ }, 2000);
+ }
+
+ render() {
+ return (
+
+ { sourceCode }
+
+);
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products
+ };
+ }
+
+ handleTableChange = (type, { filters }) => {
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ data: result
+ }));
+ }, 2000);
+ }
+
+ render() {
+ return (
+
+ { sourceCode }
+
+);
+
+RemoteFilter.propTypes = {
+ data: PropTypes.array.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products
+ };
+ }
+
+ handleTableChange = (type, { filters }) => {
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ data: result
+ }));
+ }, 2000);
+ }
+
+ render() {
+ return (
+
+ { sourceCode }
+
+);
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ sizePerPage: 10
+ };
+ }
+
+ handleTableChange = (type, { page, sizePerPage }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ this.setState(() => ({
+ page,
+ data: products.slice(currentIndex, currentIndex + sizePerPage),
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+
+ { sourceCode }
+
+);
+
+RemotePagination.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ sizePerPage: 10
+ };
+ }
+
+ handleTableChange = (type, { page, sizePerPage }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ this.setState(() => ({
+ page,
+ data: products.slice(currentIndex, currentIndex + sizePerPage),
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+
+ { sourceCode }
+
+);
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products
+ };
+ }
+
+ handleTableChange = (type, { sortField, sortOrder, data }) => {
+ setTimeout(() => {
+ let result;
+ if (sortOrder === 'asc') {
+ result = data.sort((a, b) => {
+ if (a[sortField] > b[sortField]) {
+ return 1;
+ } else if (b[sortField] > a[sortField]) {
+ return -1;
+ }
+ return 0;
+ });
+ } else {
+ result = data.sort((a, b) => {
+ if (a[sortField] > b[sortField]) {
+ return -1;
+ } else if (b[sortField] > a[sortField]) {
+ return 1;
+ }
+ return 0;
+ });
+ }
+ this.setState(() => ({
+ data: result
+ }));
+ }, 2000);
+ }
+
+ render() {
+ return (
+
+ { sourceCode }
+
+);
+
+RemoteSort.propTypes = {
+ data: PropTypes.array.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products
+ };
+ }
+
+ handleTableChange = (type, { sortField, sortOrder, data }) => {
+ setTimeout(() => {
+ let result;
+ if (sortOrder === 'asc') {
+ result = data.sort((a, b) => {
+ if (a[sortField] > b[sortField]) {
+ return 1;
+ } else if (b[sortField] > a[sortField]) {
+ return -1;
+ }
+ return 0;
+ });
+ } else {
+ result = data.sort((a, b) => {
+ if (a[sortField] > b[sortField]) {
+ return -1;
+ } else if (b[sortField] > a[sortField]) {
+ return 1;
+ }
+ return 0;
+ });
+ }
+ this.setState(() => ({
+ data: result
+ }));
+ }, 2000);
+ }
+
+ render() {
+ return (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
new file mode 100644
index 0000000..6789789
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
new file mode 100644
index 0000000..134e378
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ hideSelectColumn: true,
+ bgColor: '#00BFFF'
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ hideSelectColumn: true,
+ bgColor: '#00BFFF'
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
new file mode 100644
index 0000000..6789789
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/multiple-selection.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
new file mode 100644
index 0000000..7cf5e15
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4]
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4]
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
new file mode 100644
index 0000000..ea391e4
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
@@ -0,0 +1,94 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ bgColor: '#00BFFF'
+};
+
+const selectRow2 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ bgColor: '#00BFFF'
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
new file mode 100644
index 0000000..7804c60
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-class.js
@@ -0,0 +1,96 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ classes: 'selection-row'
+};
+
+const selectRow2 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ classes: (row, rowIndex) =>
+ (rowIndex > 1 ? 'row-index-bigger-than-2101' : 'row-index-small-than-2101')
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ classes: 'selection-row'
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
new file mode 100644
index 0000000..9b104c0
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
@@ -0,0 +1,68 @@
+
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ onSelect: (row, isSelect, rowIndex) => {
+ console.log(row.id);
+ console.log(isSelect);
+ console.log(rowIndex);
+ },
+ onSelectAll: (isSelect, rows) => {
+ console.log(isSelect);
+ console.log(rows);
+ }
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
new file mode 100644
index 0000000..97f32b9
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-style.js
@@ -0,0 +1,100 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ style: { backgroundColor: '#c8e6c9' }
+};
+
+const selectRow2 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ style: (row, rowIndex) => {
+ const backgroundColor = rowIndex > 1 ? '#00BFFF' : '#00FFFF';
+ return { backgroundColor };
+ }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ style: { backgroundColor: '#c8e6c9' }
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js b/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
new file mode 100644
index 0000000..4df2109
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/single-selection.js
@@ -0,0 +1,57 @@
+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
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-class.js b/packages/react-bootstrap-table2-example/examples/rows/row-class.js
new file mode 100644
index 0000000..b7aa8bb
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-class.js
@@ -0,0 +1,83 @@
+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 rowClasses1 = 'custom-row-class';
+
+const sourceCode1 = `\
+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 rowClasses = 'custom-row-class';
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-event.js b/packages/react-bootstrap-table2-example/examples/rows/row-event.js
new file mode 100644
index 0000000..915f9af
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-event.js
@@ -0,0 +1,57 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const rowEvents = {
+ onClick: (e) => {
+ alert('click on row');
+ }
+};
+
+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 rowEvents = {
+ onClick: (e) => {
+ alert('click on row');
+ }
+};
+
+
+
Try to click on any rows
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-style.js b/packages/react-bootstrap-table2-example/examples/rows/row-style.js
new file mode 100644
index 0000000..024cc84
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-style.js
@@ -0,0 +1,95 @@
+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 rowStyle1 = { backgroundColor: '#c8e6c9' };
+
+const sourceCode1 = `\
+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 rowStyle = { backgroundColor: '#c8e6c9' };
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
new file mode 100644
index 0000000..a04b5ae
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js
@@ -0,0 +1,63 @@
+/* eslint no-unused-vars: 0 */
+
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ // here, we implement a custom sort which perform a reverse sorting
+ sortFunc: (a, b, order, dataField) => {
+ if (order === 'asc') {
+ return b - a;
+ }
+ return a - b; // desc
+ }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ // here, we implement a custom sort which perform a reverse sorting
+ sortFunc: (a, b, order, dataField) => {
+ if (order === 'asc') {
+ return b - a;
+ }
+ return a - b; // desc
+ }
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+
Product ID sorting is reverted
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
new file mode 100644
index 0000000..115fe16
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js
@@ -0,0 +1,71 @@
+/* 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'
+}];
+
+
+ { sourceCode }
+
+ );
+ }
+}
+
+export default DefaultSortTable;
diff --git a/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js b/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
new file mode 100644
index 0000000..16e628f
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
new file mode 100644
index 0000000..b1b470e
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js
@@ -0,0 +1,63 @@
+/* eslint
+ no-unused-vars: 0
+ arrow-body-style: 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 headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
+ sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
+);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ headerSortingClasses
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ headerSortingClasses
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
+ sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
+);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ headerSortingClasses
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ headerSortingClasses
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
new file mode 100644
index 0000000..cd2c6f0
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js
@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const headerSortingStyle = { backgroundColor: '#c8e6c9' };
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ headerSortingStyle
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ headerSortingStyle
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const headerSortingStyle = { backgroundColor: '#c8e6c9' };
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ headerSortingStyle
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ headerSortingStyle
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/welcome.js b/packages/react-bootstrap-table2-example/examples/welcome.js
new file mode 100644
index 0000000..41f3547
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/welcome.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Typed from 'typed.js';
+
+export default class Welcome extends React.Component {
+ componentDidMount() {
+ // type.js config
+ const options = {
+ strings: ['It\'s a bootstrap table rebuilt for React.js ♥ '],
+ typeSpeed: 50,
+ backSpeed: 50
+ };
+ this.typed = new Typed(this.el, options);
+ }
+
+ componentWillUnmount() {
+ // Make sure to destroy Typed instance on unmounting to prevent memory leaks
+ this.typed.destroy();
+ }
+
+ render() {
+ return (
+
+
+
react-bootstrap-table2
+ { this.el = el; } }
+ />
+
+
+
+
+
+
+
+ { this.props.children }
+
+
{ fragment }
);
+ }
+ };
+
+ describe('default filter wrapper', () => {
+ const props = createTableProps();
+
+ beforeEach(() => {
+ createFilterWrapper(props);
+ });
+
+ it('should rendering correctly', () => {
+ expect(wrapper.length).toBe(1);
+ });
+
+ it('should initializing state correctly', () => {
+ expect(instance.state.isDataChanged).toBeFalsy();
+ expect(instance.state.currFilters).toEqual({});
+ });
+
+ it('should rendering BootstraTable correctly', () => {
+ const table = wrapper.find(BootstrapTable);
+ expect(table.length).toBe(1);
+ expect(table.prop('onFilter')).toBeDefined();
+ expect(table.prop('isDataChanged')).toEqual(instance.state.isDataChanged);
+ });
+ });
+
+ describe('componentWillReceiveProps', () => {
+ let nextProps;
+
+ describe('when props.store.filters is same as current state.currFilters', () => {
+ beforeEach(() => {
+ nextProps = createTableProps();
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting isDataChanged as false (Temporary solution)', () => {
+ expect(instance.state.isDataChanged).toBeFalsy();
+ });
+ });
+
+ describe('when props.isDataChanged is true', () => {
+ beforeEach(() => {
+ nextProps = createTableProps({ isDataChanged: true });
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting isDataChanged as true', () => {
+ expect(instance.state.isDataChanged).toBeTruthy();
+ });
+ });
+
+ describe('when props.store.filters is different from current state.currFilters', () => {
+ const nextData = [];
+
+ beforeEach(() => {
+ nextProps = createTableProps();
+ nextProps.store.filters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
+ nextProps.store.setAllData(nextData);
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting states correctly', () => {
+ expect(nextProps.store.filteredData).toEqual(nextData);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(instance.state.currFilters).toBe(nextProps.store.filters);
+ });
+ });
+
+ describe('when remote filter is enabled', () => {
+ let props;
+ const nextData = [];
+
+ beforeEach(() => {
+ props = createTableProps({ remote: { filter: true } });
+ createFilterWrapper(props);
+ nextProps = createTableProps({ remote: { filter: true } });
+ nextProps.store.setAllData(nextData);
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting states correctly', () => {
+ expect(nextProps.store.filteredData).toEqual(nextData);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(instance.state.currFilters).toBe(nextProps.store.filters);
+ });
+ });
+ });
+
+ describe('onFilter', () => {
+ let props;
+
+ beforeEach(() => {
+ props = createTableProps();
+ createFilterWrapper(props);
+ });
+
+ describe('when filterVal is empty or undefined', () => {
+ const filterVals = ['', undefined];
+
+ it('should setting store object correctly', () => {
+ filterVals.forEach((filterVal) => {
+ instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+ expect(props.store.filtering).toBeFalsy();
+ });
+ });
+
+ it('should setting state correctly', () => {
+ filterVals.forEach((filterVal) => {
+ instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
+ });
+ });
+ });
+
+ describe('when filterVal is existing', () => {
+ const filterVal = '3';
+
+ it('should setting store object correctly', () => {
+ instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+ expect(props.store.filters).toEqual(instance.state.currFilters);
+ });
+
+ it('should setting state correctly', () => {
+ instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
+ });
+ });
+
+ describe('when remote filter is enabled', () => {
+ const filterVal = '3';
+
+ beforeEach(() => {
+ props = createTableProps();
+ props.remote = { filter: true };
+ createFilterWrapper(props);
+ instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+ });
+
+ it('should not setting store object correctly', () => {
+ expect(props.store.filters).not.toEqual(instance.state.currFilters);
+ });
+
+ it('should not setting state', () => {
+ expect(instance.state.isDataChanged).toBeFalsy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
+ });
+
+ it('should calling props.onRemoteFilterChange correctly', () => {
+ expect(onTableChangeCB.calledOnce).toBeTruthy();
+ });
+ });
+
+ describe('combination', () => {
+ it('should setting store object correctly', () => {
+ instance.onFilter(props.columns[1], '3', FILTER_TYPE.TEXT);
+ expect(props.store.filters).toEqual(instance.state.currFilters);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
+
+ instance.onFilter(props.columns[1], '2', FILTER_TYPE.TEXT);
+ expect(props.store.filters).toEqual(instance.state.currFilters);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
+
+ instance.onFilter(props.columns[2], '2', FILTER_TYPE.TEXT);
+ expect(props.store.filters).toEqual(instance.state.currFilters);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
+
+ instance.onFilter(props.columns[2], '', FILTER_TYPE.TEXT);
+ expect(props.store.filters).toEqual(instance.state.currFilters);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
+
+ instance.onFilter(props.columns[1], '', FILTER_TYPE.TEXT);
+ expect(props.store.filters).toEqual(instance.state.currFilters);
+ expect(instance.state.isDataChanged).toBeTruthy();
+ expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
+ });
+ });
+ });
+});
diff --git a/packages/react-bootstrap-table2-overlay/README.md b/packages/react-bootstrap-table2-overlay/README.md
new file mode 100644
index 0000000..b76619d
--- /dev/null
+++ b/packages/react-bootstrap-table2-overlay/README.md
@@ -0,0 +1,14 @@
+# react-bootstrap-table2-overlay
+In `react-bootstrap-table2`, you will be easier to custom the loading or lverlay on table no matter if remote enabled or not. In the following, we have two way to do it:
+
+-----
+
+## Empty Table
+[**`noDataIndication`**](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/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**](https://react-bootstrap-table.github.io/react-bootstrap-table2/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`**](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#overlay-function) prop.
+
+[**Here**](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=EmptyTableOverlay) is also a example for `overlay`
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-overlay/index.js b/packages/react-bootstrap-table2-overlay/index.js
new file mode 100644
index 0000000..a5db872
--- /dev/null
+++ b/packages/react-bootstrap-table2-overlay/index.js
@@ -0,0 +1,29 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import LoadingOverlay from 'react-loading-overlay';
+
+export default options => (element, loading) =>
+ class TableLoadingOverlayWrapper extends React.Component {
+ componentDidMount() {
+ if (loading) {
+ const { wrapper } = this.overlay;
+ const masker = wrapper.firstChild;
+ const headerDOM = wrapper.parentElement.querySelector('thead');
+ const bodyDOM = wrapper.parentElement.querySelector('tbody');
+ masker.style.marginTop = window.getComputedStyle(headerDOM).height;
+ masker.style.height = window.getComputedStyle(bodyDOM).height;
+ }
+ }
+
+ render() {
+ return (
+ this.overlay = n }
+ { ...options }
+ active={ loading }
+ >
+ { element }
+
+ );
+ }
+ };
diff --git a/packages/react-bootstrap-table2-overlay/package.json b/packages/react-bootstrap-table2-overlay/package.json
new file mode 100644
index 0000000..340ca9f
--- /dev/null
+++ b/packages/react-bootstrap-table2-overlay/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "react-bootstrap-table2-overlay",
+ "version": "0.0.3",
+ "description": "it's a loading overlay addons for react-bootstrap-table2",
+ "main": "./lib/index.js",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
+ },
+ "license": "MIT",
+ "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"
+ }
+ ],
+ "dependencies": {
+ "react-loading-overlay": "0.2.8"
+ },
+ "peerDependencies": {
+ "prop-types": "^15.0.0",
+ "react": "^16.0.0",
+ "react-dom": "^16.0.0"
+ }
+}
diff --git a/packages/react-bootstrap-table2-overlay/test/index.test.js b/packages/react-bootstrap-table2-overlay/test/index.test.js
new file mode 100644
index 0000000..1292475
--- /dev/null
+++ b/packages/react-bootstrap-table2-overlay/test/index.test.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { shallow, render } from 'enzyme';
+import LoadingOverlay from 'react-loading-overlay';
+
+import overlayFactory from '..';
+
+describe('overlayFactory', () => {
+ let wrapper;
+ // let instance;
+
+ const createTable = () => (
+
+
+
+ column1
+ column2
+
+
+
+ { [1, 2].map(row => (
+ { row } test
+
+ );
+
+ describe('when loading is false', () => {
+ beforeEach(() => {
+ const tableElm = createTable();
+ const Overlay = overlayFactory()(tableElm, false);
+ wrapper = shallow(
+ { page }
+
+ );
+ }
+}
+
+PageButton.propTypes = {
+ onPageChange: PropTypes.func.isRequired,
+ page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+ active: PropTypes.bool.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ title: PropTypes.string
+};
+
+export default PageButton;
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
new file mode 100644
index 0000000..931595f
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -0,0 +1,133 @@
+/* eslint no-mixed-operators: 0 */
+export default ExtendBase =>
+ class PageResolver extends ExtendBase {
+ backToPrevPage() {
+ const { currPage, pageStartIndex } = this.props;
+ return (currPage - 1) < pageStartIndex ? pageStartIndex : currPage - 1;
+ }
+
+ goToNextPage() {
+ const { currPage } = this.props;
+ const { lastPage } = this.state;
+ return (currPage + 1) > lastPage ? lastPage : currPage + 1;
+ }
+
+ initialState() {
+ const totalPages = this.calculateTotalPage();
+ const lastPage = this.calculateLastPage(totalPages);
+ return { totalPages, lastPage, dropdownOpen: false };
+ }
+
+ calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) {
+ return Math.ceil(dataSize / sizePerPage);
+ }
+
+ calculateLastPage(totalPages) {
+ const { pageStartIndex } = this.props;
+ return pageStartIndex + totalPages - 1;
+ }
+
+ calculatePages(
+ totalPages = this.state.totalPages,
+ lastPage = this.state.lastPage) {
+ const {
+ currPage,
+ paginationSize,
+ pageStartIndex,
+ withFirstAndLast,
+ firstPageText,
+ prePageText,
+ nextPageText,
+ lastPageText,
+ alwaysShowAllBtns
+ } = this.props;
+
+ let pages;
+ let endPage = totalPages;
+ if (endPage <= 0) return [];
+
+ let startPage = Math.max(currPage - Math.floor(paginationSize / 2), pageStartIndex);
+ endPage = startPage + paginationSize - 1;
+
+ if (endPage > lastPage) {
+ endPage = lastPage;
+ startPage = endPage - paginationSize + 1;
+ }
+
+ if (startPage !== pageStartIndex && totalPages > paginationSize && withFirstAndLast) {
+ pages = [firstPageText, prePageText];
+ } else if (totalPages > 1 || alwaysShowAllBtns) {
+ pages = [prePageText];
+ } else {
+ pages = [];
+ }
+
+ for (let i = startPage; i <= endPage; i += 1) {
+ if (i >= pageStartIndex) pages.push(i);
+ }
+
+ if (endPage <= lastPage && pages.length > 1) {
+ pages.push(nextPageText);
+ }
+ if (endPage !== lastPage && withFirstAndLast) {
+ pages.push(lastPageText);
+ }
+ return pages;
+ }
+
+ calculatePageStatus(pages = [], lastPage = this.state.lastPage) {
+ const {
+ currPage,
+ pageStartIndex,
+ firstPageText,
+ prePageText,
+ nextPageText,
+ lastPageText,
+ alwaysShowAllBtns
+ } = this.props;
+ const isStart = page =>
+ (currPage === pageStartIndex && (page === firstPageText || page === prePageText));
+ const isEnd = page =>
+ (currPage === lastPage && (page === nextPageText || page === lastPageText));
+
+ return pages
+ .filter((page) => {
+ if (alwaysShowAllBtns) {
+ return true;
+ }
+ return !(isStart(page) || isEnd(page));
+ })
+ .map((page) => {
+ let title;
+ const active = page === currPage;
+ const disabled = (isStart(page) || isEnd(page));
+
+ if (page === nextPageText) {
+ title = this.props.nextPageTitle;
+ } else if (page === prePageText) {
+ title = this.props.prePageTitle;
+ } else if (page === firstPageText) {
+ title = this.props.firstPageTitle;
+ } else if (page === lastPageText) {
+ title = this.props.lastPageTitle;
+ } else {
+ title = `${page}`;
+ }
+
+ return { page, active, disabled, title };
+ });
+ }
+
+ calculateSizePerPageStatus() {
+ const { sizePerPageList } = this.props;
+ return sizePerPageList.map((_sizePerPage) => {
+ const pageText = _sizePerPage.text || _sizePerPage;
+ const pageNumber = _sizePerPage.value || _sizePerPage;
+ return {
+ text: `${pageText}`,
+ page: pageNumber
+ };
+ });
+ }
+ };
+
diff --git a/packages/react-bootstrap-table2-paginator/src/page.js b/packages/react-bootstrap-table2-paginator/src/page.js
new file mode 100644
index 0000000..aa3085a
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/page.js
@@ -0,0 +1,17 @@
+export const getByCurrPage = (store, pageStartIndex) => {
+ const dataSize = store.data.length;
+ if (!dataSize) return [];
+ const getNormalizedPage = () => {
+ const offset = Math.abs(1 - pageStartIndex);
+ return store.page + offset;
+ };
+ const end = (getNormalizedPage() * store.sizePerPage) - 1;
+ const start = end - (store.sizePerPage - 1);
+
+ const result = [];
+ for (let i = start; i <= end; i += 1) {
+ result.push(store.data[i]);
+ if (i + 1 === dataSize) break;
+ }
+ return result;
+};
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
new file mode 100644
index 0000000..805af53
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PageButton from './page-button';
+
+const PaginatonList = props => (
+
+ {
+ props.pages.map(pageProps => (
+
+);
+
+PaginatonList.propTypes = {
+ pages: PropTypes.arrayOf(PropTypes.shape({
+ page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ active: PropTypes.bool,
+ disable: PropTypes.bool,
+ title: PropTypes.string
+ })).isRequired,
+ onPageChange: PropTypes.func.isRequired
+};
+
+export default PaginatonList;
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
new file mode 100644
index 0000000..d103e4b
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -0,0 +1,170 @@
+/* eslint react/require-default-props: 0 */
+/* eslint arrow-body-style: 0 */
+import cs from 'classnames';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import pageResolver from './page-resolver';
+import SizePerPageDropDown from './size-per-page-dropdown';
+import PaginationList from './pagination-list';
+import Const from './const';
+
+class Pagination extends pageResolver(Component) {
+ constructor(props) {
+ super(props);
+ this.closeDropDown = this.closeDropDown.bind(this);
+ this.toggleDropDown = this.toggleDropDown.bind(this);
+ this.handleChangePage = this.handleChangePage.bind(this);
+ this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+ this.state = this.initialState();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { dataSize, currSizePerPage } = nextProps;
+ if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
+ const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
+ const lastPage = this.calculateLastPage(totalPages);
+ this.setState({ totalPages, lastPage });
+ }
+ }
+
+ toggleDropDown() {
+ const dropdownOpen = !this.state.dropdownOpen;
+ this.setState(() => {
+ return { dropdownOpen };
+ });
+ }
+
+ closeDropDown() {
+ this.setState(() => {
+ return { dropdownOpen: false };
+ });
+ }
+
+ handleChangeSizePerPage(sizePerPage) {
+ const { currSizePerPage, onSizePerPageChange } = this.props;
+ const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
+ let { currPage } = this.props;
+ if (selectedSize !== currSizePerPage) {
+ const newTotalPages = this.calculateTotalPage(selectedSize);
+ const newLastPage = this.calculateLastPage(newTotalPages);
+ if (currPage > newLastPage) currPage = newLastPage;
+ onSizePerPageChange(selectedSize, currPage);
+ }
+ this.closeDropDown();
+ }
+
+ handleChangePage(newPage) {
+ let page;
+ const {
+ currPage,
+ pageStartIndex,
+ prePageText,
+ nextPageText,
+ lastPageText,
+ firstPageText,
+ onPageChange
+ // keepSizePerPageState
+ } = this.props;
+ const { lastPage } = this.state;
+
+ if (newPage === prePageText) {
+ page = this.backToPrevPage();
+ } else if (newPage === nextPageText) {
+ page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
+ } else if (newPage === lastPageText) {
+ page = lastPage;
+ } else if (newPage === firstPageText) {
+ page = pageStartIndex;
+ } else {
+ page = parseInt(newPage, 10);
+ }
+
+ // if (keepSizePerPageState) { this.closeDropDown(); }
+
+ if (page !== currPage) {
+ onPageChange(page);
+ }
+ }
+
+ render() {
+ const { totalPages, lastPage, dropdownOpen: open } = this.state;
+ const {
+ sizePerPageList,
+ currSizePerPage,
+ hideSizePerPage,
+ hidePageListOnlyOnePage
+ } = this.props;
+ const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage);
+
+ const pageListClass = cs(
+ 'react-bootstrap-table-pagination-list',
+ 'col-md-6 col-xs-6 col-sm-6 col-lg-6', {
+ 'react-bootstrap-table-pagination-list-hidden': (hidePageListOnlyOnePage && totalPages === 1)
+ });
+ return (
+
+
+ {
+ sizePerPageList.length > 1 && !hideSizePerPage ?
+ (
+
+
+
+
+ { currSizePerPage }
+
+ { ' ' }
+
+
+
+ {
+ options.map(option => (
+
+
+ );
+};
+
+SizePerPageDropDown.propTypes = {
+ currSizePerPage: PropTypes.string.isRequired,
+ options: PropTypes.array.isRequired,
+ onClick: PropTypes.func.isRequired,
+ onBlur: PropTypes.func.isRequired,
+ onSizePerPageChange: PropTypes.func.isRequired,
+ open: PropTypes.bool,
+ hidden: PropTypes.bool,
+ btnContextual: PropTypes.string,
+ variation: PropTypes.oneOf(['dropdown', 'dropup']),
+ className: PropTypes.string
+};
+SizePerPageDropDown.defaultProps = {
+ open: false,
+ hidden: false,
+ btnContextual: 'btn-default btn-secondary',
+ variation: 'dropdown',
+ className: ''
+};
+
+
+export default SizePerPageDropDown;
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js
new file mode 100644
index 0000000..eba6ca6
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-option.js
@@ -0,0 +1,32 @@
+/* eslint jsx-a11y/href-no-hash: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SizePerPageOption = ({
+ text,
+ page,
+ onSizePerPageChange
+}) => (
+
+ {
+ e.preventDefault();
+ onSizePerPageChange(page);
+ } }
+ >
+ { text }
+
+
+);
+
+SizePerPageOption.propTypes = {
+ text: PropTypes.string.isRequired,
+ page: PropTypes.number.isRequired,
+ onSizePerPageChange: PropTypes.func.isRequired
+};
+
+export default SizePerPageOption;
diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js
new file mode 100644
index 0000000..5393a79
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/wrapper.js
@@ -0,0 +1,159 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Const from './const';
+import Pagination from './pagination';
+import { getByCurrPage } from './page';
+
+export default (Base, {
+ remoteResolver
+}) =>
+ class PaginationWrapper extends remoteResolver(Component) {
+ static propTypes = {
+ store: PropTypes.object.isRequired
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleChangePage = this.handleChangePage.bind(this);
+ this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+
+ let currPage;
+ let currSizePerPage;
+ const { options } = props.pagination;
+ const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
+
+ // initialize current page
+ if (typeof options.page !== 'undefined') {
+ currPage = options.page;
+ } else if (typeof options.pageStartIndex !== 'undefined') {
+ currPage = options.pageStartIndex;
+ } else {
+ currPage = Const.PAGE_START_INDEX;
+ }
+
+ // initialize current sizePerPage
+ if (typeof options.sizePerPage !== 'undefined') {
+ currSizePerPage = options.sizePerPage;
+ } else if (typeof sizePerPageList[0] === 'object') {
+ currSizePerPage = sizePerPageList[0].value;
+ } else {
+ currSizePerPage = sizePerPageList[0];
+ }
+
+ this.state = { currPage, currSizePerPage };
+ this.saveToStore(currPage, currSizePerPage);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let needNewState = false;
+ let { currPage, currSizePerPage } = this.state;
+ const { page, sizePerPage, pageStartIndex, onPageChange } = nextProps.pagination.options;
+
+ if (typeof page !== 'undefined' && currPage !== page) { // user defined page
+ currPage = page;
+ needNewState = true;
+ } else if (nextProps.isDataChanged) { // user didn't defined page but data change
+ currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX;
+ needNewState = true;
+ }
+
+ if (typeof sizePerPage !== 'undefined') {
+ currSizePerPage = sizePerPage;
+ needNewState = true;
+ }
+
+ this.saveToStore(currPage, currSizePerPage);
+
+ if (needNewState) {
+ if (onPageChange) {
+ onPageChange(currPage, currSizePerPage);
+ }
+ this.setState(() => ({ currPage, currSizePerPage }));
+ }
+ }
+
+ saveToStore(page, sizePerPage) {
+ this.props.store.page = page;
+ this.props.store.sizePerPage = sizePerPage;
+ }
+
+ handleChangePage(currPage) {
+ const { currSizePerPage } = this.state;
+ const { pagination: { options } } = this.props;
+ this.saveToStore(currPage, currSizePerPage);
+
+ if (options.onPageChange) {
+ options.onPageChange(currPage, currSizePerPage);
+ }
+ if (this.isRemotePagination()) {
+ this.handleRemotePageChange();
+ return;
+ }
+ this.setState(() => ({ currPage }));
+ }
+
+ handleChangeSizePerPage(currSizePerPage, currPage) {
+ const { pagination: { options } } = this.props;
+ this.saveToStore(currPage, currSizePerPage);
+
+ if (options.onSizePerPageChange) {
+ options.onSizePerPageChange(currSizePerPage, currPage);
+ }
+ if (this.isRemotePagination()) {
+ this.handleRemotePageChange();
+ return;
+ }
+ this.setState(() => ({
+ currPage,
+ currSizePerPage
+ }));
+ }
+
+ render() {
+ const { pagination: { options }, store } = this.props;
+ const { currPage, currSizePerPage } = this.state;
+ const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
+ Const.With_FIRST_AND_LAST : options.withFirstAndLast;
+ const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
+ Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
+ const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
+ Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
+ const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
+ Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+ const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+ Const.PAGE_START_INDEX : options.pageStartIndex;
+
+ const data = this.isRemotePagination() ?
+ this.props.data :
+ getByCurrPage(store, pageStartIndex);
+
+ return [
+ { fragment }
);
+ }
+ };
+
+ describe('default pagination', () => {
+ const props = createTableProps();
+
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering correctly', () => {
+ expect(wrapper.length).toBe(1);
+ });
+
+ it('should initializing state correctly', () => {
+ expect(instance.state.currPage).toBeDefined();
+ expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX);
+ expect(instance.state.currSizePerPage).toBeDefined();
+ expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
+ });
+
+ it('should saving page and sizePerPage to store correctly', () => {
+ expect(props.store.page).toBe(instance.state.currPage);
+ expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
+ });
+
+ it('should rendering BootstraTable correctly', () => {
+ const table = wrapper.find(BootstrapTable);
+ expect(table.length).toBe(1);
+ expect(table.prop('data').length).toEqual(instance.state.currSizePerPage);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('dataSize')).toEqual(props.store.data.length);
+ expect(pagination.prop('currPage')).toEqual(instance.state.currPage);
+ expect(pagination.prop('currSizePerPage')).toEqual(instance.state.currSizePerPage);
+ expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
+ expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
+ expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
+ expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
+ expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
+ expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
+ expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
+ expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
+ expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
+ expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
+ expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
+ expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
+ expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
+ expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
+ expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
+ expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+ });
+
+ describe('componentWillReceiveProps', () => {
+ let nextProps;
+ beforeEach(() => {
+ nextProps = createTableProps();
+ });
+
+ describe('when options.page is existing', () => {
+ beforeEach(() => {
+ nextProps.pagination.options.page = 2;
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting currPage state correctly', () => {
+ expect(instance.state.currPage).toEqual(nextProps.pagination.options.page);
+ });
+
+ it('should saving store.page correctly', () => {
+ expect(props.store.page).toEqual(instance.state.currPage);
+ });
+ });
+
+ it('should not setting currPage state if options.page not existing', () => {
+ const { currPage } = instance.state;
+ instance.componentWillReceiveProps(nextProps);
+ expect(instance.state.currPage).toBe(currPage);
+ });
+
+ describe('when options.sizePerPage is existing', () => {
+ beforeEach(() => {
+ nextProps.pagination.options.sizePerPage = 20;
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting currSizePerPage state correctly', () => {
+ expect(instance.state.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+ });
+
+ it('should saving store.sizePerPage correctly', () => {
+ expect(props.store.sizePerPage).toEqual(instance.state.currSizePerPage);
+ });
+ });
+
+ it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
+ const { currSizePerPage } = instance.state;
+ instance.componentWillReceiveProps(nextProps);
+ expect(instance.state.currSizePerPage).toBe(currSizePerPage);
+ });
+
+ describe('when nextProps.isDataChanged is true', () => {
+ beforeEach(() => {
+ nextProps.isDataChanged = true;
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting currPage state correctly', () => {
+ expect(instance.state.currPage).toBe(Const.PAGE_START_INDEX);
+ });
+
+ it('should saving store.page correctly', () => {
+ expect(props.store.page).toEqual(instance.state.currPage);
+ });
+ });
+
+ describe('when nextProps.isDataChanged is true and options.pageStartIndex is existing', () => {
+ beforeEach(() => {
+ nextProps.isDataChanged = true;
+ nextProps.pagination.options.pageStartIndex = 0;
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should setting currPage state correctly', () => {
+ expect(instance.state.currPage).toBe(nextProps.pagination.options.pageStartIndex);
+ });
+
+ it('should saving store.page correctly', () => {
+ expect(props.store.page).toEqual(instance.state.currPage);
+ });
+ });
+ });
+ });
+
+ describe('when options.page is defined', () => {
+ const page = 3;
+ const props = createTableProps({ options: { page } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should setting correct state.currPage', () => {
+ expect(instance.state.currPage).toEqual(page);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('currPage')).toEqual(page);
+ });
+ });
+
+ describe('when options.sizePerPage is defined', () => {
+ const sizePerPage = 30;
+ const props = createTableProps({ options: { sizePerPage } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should setting correct state.currPage', () => {
+ expect(instance.state.currSizePerPage).toEqual(sizePerPage);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
+ });
+ });
+
+ describe('when options.totalSize is defined', () => {
+ const totalSize = 100;
+ const props = createTableProps({ options: { totalSize } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('dataSize')).toEqual(totalSize);
+ });
+ });
+
+ describe('when options.pageStartIndex is defined', () => {
+ const pageStartIndex = -1;
+ const props = createTableProps({ options: { pageStartIndex } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should setting correct state.currPage', () => {
+ expect(instance.state.currPage).toEqual(pageStartIndex);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
+ });
+ });
+
+ describe('when options.sizePerPageList is defined', () => {
+ const sizePerPageList = [10, 40];
+ const props = createTableProps({ options: { sizePerPageList } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
+ });
+ });
+
+ describe('when options.paginationSize is defined', () => {
+ const paginationSize = 10;
+ const props = createTableProps({ options: { paginationSize } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('paginationSize')).toEqual(paginationSize);
+ });
+ });
+
+ describe('when options.withFirstAndLast is defined', () => {
+ const withFirstAndLast = false;
+ const props = createTableProps({ options: { withFirstAndLast } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
+ });
+ });
+
+ describe('when options.alwaysShowAllBtns is defined', () => {
+ const alwaysShowAllBtns = true;
+ const props = createTableProps({ options: { alwaysShowAllBtns } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
+ });
+ });
+
+ describe('when options.firstPageText is defined', () => {
+ const firstPageText = '1st';
+ const props = createTableProps({ options: { firstPageText } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('firstPageText')).toEqual(firstPageText);
+ });
+ });
+
+ describe('when options.prePageText is defined', () => {
+ const prePageText = 'PRE';
+ const props = createTableProps({ options: { prePageText } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('prePageText')).toEqual(prePageText);
+ });
+ });
+
+ describe('when options.nextPageText is defined', () => {
+ const nextPageText = 'NEXT';
+ const props = createTableProps({ options: { nextPageText } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('nextPageText')).toEqual(nextPageText);
+ });
+ });
+
+ describe('when options.lastPageText is defined', () => {
+ const lastPageText = 'nth';
+ const props = createTableProps({ options: { lastPageText } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('lastPageText')).toEqual(lastPageText);
+ });
+ });
+
+ describe('when options.firstPageTitle is defined', () => {
+ const firstPageTitle = '1st';
+ const props = createTableProps({ options: { firstPageTitle } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
+ });
+ });
+
+ describe('when options.prePageTitle is defined', () => {
+ const prePageTitle = 'PRE';
+ const props = createTableProps({ options: { prePageTitle } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
+ });
+ });
+
+ describe('when options.nextPageTitle is defined', () => {
+ const nextPageTitle = 'NEXT';
+ const props = createTableProps({ options: { nextPageTitle } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
+ });
+ });
+
+ describe('when options.lastPageTitle is defined', () => {
+ const lastPageTitle = 'nth';
+ const props = createTableProps({ options: { lastPageTitle } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
+ });
+ });
+
+ describe('when options.hideSizePerPage is defined', () => {
+ const hideSizePerPage = true;
+ const props = createTableProps({ options: { hideSizePerPage } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
+ });
+ });
+
+ describe('when options.hidePageListOnlyOnePage is defined', () => {
+ const hidePageListOnlyOnePage = true;
+ const props = createTableProps({ options: { hidePageListOnlyOnePage } });
+ beforeEach(() => {
+ createPaginationWrapper(props);
+ });
+
+ it('should rendering Pagination correctly', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(wrapper.length).toBe(1);
+ expect(pagination.length).toBe(1);
+ expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
+ });
+ });
+
+ describe('handleChangePage', () => {
+ const newPage = 3;
+ const props = createTableProps({ options: { onPageChange: sinon.stub() } });
+ beforeEach(() => {
+ createPaginationWrapper(props, false);
+ instance.handleChangePage(newPage);
+ });
+
+ afterEach(() => {
+ props.pagination.options.onPageChange.reset();
+ });
+
+ it('should setting state.currPage correctly', () => {
+ expect(instance.state.currPage).toEqual(newPage);
+ });
+
+ it('should calling options.onPageChange correctly when it is defined', () => {
+ const { onPageChange } = props.pagination.options;
+ expect(onPageChange.calledOnce).toBeTruthy();
+ expect(onPageChange.calledWith(newPage, instance.state.currSizePerPage)).toBeTruthy();
+ });
+
+ it('should saving page and sizePerPage to store correctly', () => {
+ expect(props.store.page).toBe(newPage);
+ expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
+ });
+
+ describe('when pagination remote is enable', () => {
+ beforeEach(() => {
+ props.remote = true;
+ createPaginationWrapper(props, false);
+ onTableChangeCB.reset();
+ instance.handleChangePage(newPage);
+ });
+
+ it('should not setting state.currPage', () => {
+ expect(instance.state.currPage).not.toEqual(newPage);
+ });
+
+ it('should calling props.onRemotePageChange correctly', () => {
+ expect(onTableChangeCB.calledOnce).toBeTruthy();
+ });
+ });
+ });
+
+ describe('handleChangeSizePerPage', () => {
+ const newPage = 2;
+ const newSizePerPage = 30;
+ const props = createTableProps({ options: { onSizePerPageChange: sinon.stub() } });
+ beforeEach(() => {
+ createPaginationWrapper(props, false);
+ instance.handleChangeSizePerPage(newSizePerPage, newPage);
+ });
+
+ afterEach(() => {
+ props.pagination.options.onSizePerPageChange.reset();
+ });
+
+ it('should setting state.currPage and state.currSizePerPage correctly', () => {
+ expect(instance.state.currPage).toEqual(newPage);
+ expect(instance.state.currSizePerPage).toEqual(newSizePerPage);
+ });
+
+ it('should calling options.onSizePerPageChange correctly when it is defined', () => {
+ const { onSizePerPageChange } = props.pagination.options;
+ expect(onSizePerPageChange.calledOnce).toBeTruthy();
+ expect(onSizePerPageChange.calledWith(newSizePerPage, newPage)).toBeTruthy();
+ });
+
+ it('should saving page and sizePerPage to store correctly', () => {
+ expect(props.store.page).toBe(newPage);
+ expect(props.store.sizePerPage).toBe(newSizePerPage);
+ });
+
+ describe('when pagination remote is enable', () => {
+ beforeEach(() => {
+ props.remote = true;
+ createPaginationWrapper(props, false);
+ onTableChangeCB.reset();
+ instance.handleChangeSizePerPage(newSizePerPage, newPage);
+ });
+
+ it('should not setting state.currPage', () => {
+ expect(instance.state.currPage).not.toEqual(newPage);
+ expect(instance.state.currSizePerPage).not.toEqual(newSizePerPage);
+ });
+
+ it('should calling props.onRemotePageChange correctly', () => {
+ expect(onTableChangeCB.calledOnce).toBeTruthy();
+ });
+ });
+ });
+});
diff --git a/packages/react-bootstrap-table2/README.md b/packages/react-bootstrap-table2/README.md
new file mode 100644
index 0000000..ebaa793
--- /dev/null
+++ b/packages/react-bootstrap-table2/README.md
@@ -0,0 +1,43 @@
+# react-bootstrap-table-next
+Next generation of [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table)
+
+## Usage
+
+### Installation
+
+```sh
+npm install react-bootstrap-table-next --save
+```
+
+### Include CSS
+
+> react-bootstrap-table2 need you to add bootstrap css in your application firstly. About bootstrap css, we only compatible with bootstrap 3 but will start to compatible for bootstrap 4 on v0.2.0
+
+```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 () =>
+ |
+ );
+ });
+ }
+
+ return (
+ { content }
+ );
+};
+
+Body.propTypes = {
+ keyField: PropTypes.string.isRequired,
+ data: PropTypes.array.isRequired,
+ columns: PropTypes.array.isRequired,
+ selectRow: PropTypes.object,
+ selectedRowKeys: PropTypes.array
+};
+
+export default Body;
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
new file mode 100644
index 0000000..4834ec0
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -0,0 +1,161 @@
+/* eslint arrow-body-style: 0 */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cs from 'classnames';
+
+import Header from './header';
+import Caption from './caption';
+import Body from './body';
+import PropsBaseResolver from './props-resolver';
+import Const from './const';
+import { isSelectedAll } from './store/selection';
+
+class BootstrapTable extends PropsBaseResolver(Component) {
+ constructor(props) {
+ super(props);
+ this.validateProps();
+
+ this.state = {
+ data: props.data
+ };
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ data: nextProps.data
+ });
+ }
+
+ render() {
+ const { loading, overlay } = this.props;
+ const table = this.renderTable();
+ if (loading && overlay) {
+ const LoadingOverlay = overlay(table, loading);
+ return { props.children }
+ );
+};
+
+Caption.propTypes = {
+ children: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.string
+ ])
+};
+
+export default Caption;
diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
new file mode 100644
index 0000000..d50eeb4
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -0,0 +1,108 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import _ from './utils';
+
+class Cell extends Component {
+ constructor(props) {
+ super(props);
+ this.handleEditingCell = this.handleEditingCell.bind(this);
+ }
+
+ handleEditingCell(e) {
+ const { column, onStart, rowIndex, columnIndex, clickToEdit, dbclickToEdit } = this.props;
+ const { events } = column;
+ if (events) {
+ if (clickToEdit) {
+ const customClick = events.onClick;
+ if (_.isFunction(customClick)) customClick(e);
+ } else if (dbclickToEdit) {
+ const customDbClick = events.onDoubleClick;
+ if (_.isFunction(customDbClick)) customDbClick(e);
+ }
+ }
+ if (onStart) {
+ onStart(rowIndex, columnIndex);
+ }
+ }
+
+ render() {
+ const {
+ row,
+ rowIndex,
+ column,
+ columnIndex,
+ editable,
+ clickToEdit,
+ dbclickToEdit
+ } = this.props;
+ const {
+ dataField,
+ hidden,
+ formatter,
+ formatExtraData,
+ style,
+ classes,
+ title,
+ events,
+ align,
+ attrs
+ } = column;
+ let cellTitle;
+ let cellStyle = {};
+ let content = _.get(row, dataField);
+
+ const cellAttrs = {
+ ..._.isFunction(attrs) ? attrs(content, row, rowIndex, columnIndex) : attrs,
+ ...events
+ };
+
+ const cellClasses = _.isFunction(classes)
+ ? classes(content, row, rowIndex, columnIndex)
+ : classes;
+
+ if (style) {
+ cellStyle = _.isFunction(style) ? style(content, row, rowIndex, columnIndex) : style;
+ }
+
+ if (title) {
+ cellTitle = _.isFunction(title) ? title(content, row, rowIndex, columnIndex) : content;
+ cellAttrs.title = cellTitle;
+ }
+
+ if (formatter) {
+ content = column.formatter(content, row, rowIndex, formatExtraData);
+ }
+
+ if (align) {
+ cellStyle.textAlign =
+ _.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
+ }
+
+ if (hidden) {
+ cellStyle.display = 'none';
+ }
+
+ if (cellClasses) cellAttrs.className = cellClasses;
+
+ if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+ if (clickToEdit && editable) {
+ cellAttrs.onClick = this.handleEditingCell;
+ } else if (dbclickToEdit && editable) {
+ cellAttrs.onDoubleClick = this.handleEditingCell;
+ }
+ return (
+ { content }
+ );
+ }
+}
+
+Cell.propTypes = {
+ row: PropTypes.object.isRequired,
+ rowIndex: PropTypes.number.isRequired,
+ column: PropTypes.object.isRequired,
+ columnIndex: PropTypes.number.isRequired
+};
+
+export default Cell;
diff --git a/packages/react-bootstrap-table2/src/const.js b/packages/react-bootstrap-table2/src/const.js
new file mode 100644
index 0000000..6c47b1c
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/const.js
@@ -0,0 +1,10 @@
+export default {
+ SORT_ASC: 'asc',
+ SORT_DESC: 'desc',
+ ROW_SELECT_SINGLE: 'radio',
+ ROW_SELECT_MULTIPLE: 'checkbox',
+ ROW_SELECT_DISABLED: 'ROW_SELECT_DISABLED',
+ CHECKBOX_STATUS_CHECKED: 'checked',
+ CHECKBOX_STATUS_INDETERMINATE: 'indeterminate',
+ CHECKBOX_STATUS_UNCHECKED: 'unchecked'
+};
diff --git a/packages/react-bootstrap-table2/src/container.js b/packages/react-bootstrap-table2/src/container.js
new file mode 100644
index 0000000..195ef25
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/container.js
@@ -0,0 +1,71 @@
+/* eslint no-return-assign: 0 */
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+import Store from './store';
+import withSort from './sort/wrapper';
+import withSelection from './row-selection/wrapper';
+
+import remoteResolver from './props-resolver/remote-resolver';
+import _ from './utils';
+
+const withDataStore = Base =>
+ class BootstrapTableContainer extends remoteResolver(Component) {
+ constructor(props) {
+ super(props);
+ this.store = new Store(props.keyField);
+ this.store.data = props.data;
+ this.wrapComponents();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.store.setAllData(nextProps.data);
+ }
+
+ wrapComponents() {
+ this.BaseComponent = Base;
+ const { pagination, columns, filter, selectRow, cellEdit } = this.props;
+ if (pagination) {
+ const { wrapperFactory } = pagination;
+ this.BaseComponent = wrapperFactory(this.BaseComponent, {
+ remoteResolver
+ });
+ }
+
+ if (columns.filter(col => col.sort).length > 0) {
+ this.BaseComponent = withSort(this.BaseComponent);
+ }
+
+ if (filter) {
+ const { wrapperFactory } = filter;
+ this.BaseComponent = wrapperFactory(this.BaseComponent, {
+ _,
+ remoteResolver
+ });
+ }
+
+ if (cellEdit) {
+ const { wrapperFactory } = cellEdit;
+ this.BaseComponent = wrapperFactory(this.BaseComponent, {
+ _,
+ remoteResolver
+ });
+ }
+
+ if (selectRow) {
+ this.BaseComponent = withSelection(this.BaseComponent);
+ }
+ }
+
+ render() {
+ const baseProps = {
+ ...this.props,
+ store: this.store
+ };
+
+ return (
+
+
+ {
+ (selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
+ ?
+
+ );
+};
+
+Header.propTypes = {
+ columns: PropTypes.array.isRequired,
+ onSort: PropTypes.func,
+ onFilter: PropTypes.func,
+ sortField: PropTypes.string,
+ sortOrder: PropTypes.string,
+ selectRow: PropTypes.object
+};
+
+export default Header;
diff --git a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
new file mode 100644
index 0000000..e963f51
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
@@ -0,0 +1,6 @@
+export default ExtendBase =>
+ class ColumnResolver extends ExtendBase {
+ visibleColumnSize() {
+ return this.props.columns.length;
+ }
+ };
diff --git a/packages/react-bootstrap-table2/src/props-resolver/index.js b/packages/react-bootstrap-table2/src/props-resolver/index.js
new file mode 100644
index 0000000..4871e2d
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/props-resolver/index.js
@@ -0,0 +1,79 @@
+import ColumnResolver from './column-resolver';
+import Const from '../const';
+import _ from '../utils';
+
+export default ExtendBase =>
+ class TableResolver extends ColumnResolver(ExtendBase) {
+ validateProps() {
+ const { columns, keyField } = this.props;
+ if (!keyField) {
+ throw new Error('Please specify a field as key via keyField');
+ }
+ if (this.visibleColumnSize(columns) <= 0) {
+ throw new Error('No any visible columns detect');
+ }
+ }
+
+ isEmpty() {
+ return this.props.data.length === 0;
+ }
+
+ /**
+ * props resolver for cell selection
+ * @param {Object} options - addtional options like callback which are about to merge into props
+ *
+ * @returns {Object} result - props for cell selections
+ * @returns {String} result.mode - input type of row selection or disabled.
+ */
+ resolveSelectRowProps(options) {
+ const { selectRow } = this.props;
+ const { ROW_SELECT_DISABLED } = Const;
+
+ if (_.isDefined(selectRow)) {
+ return {
+ ...selectRow,
+ ...options
+ };
+ }
+
+ return {
+ mode: ROW_SELECT_DISABLED
+ };
+ }
+
+ /**
+ * props resolver for header cell selection
+ * @param {Object} options - addtional options like callback which are about to merge into props
+ *
+ * @returns {Object} result - props for cell selections
+ * @returns {String} result.mode - input type of row selection or disabled.
+ * @returns {String} result.checkedStatus - checkbox status depending on selected rows counts
+ */
+ resolveSelectRowPropsForHeader(options = {}) {
+ const { selectRow } = this.props;
+ const { allRowsSelected, selected = [], ...rest } = options;
+ const {
+ ROW_SELECT_DISABLED, CHECKBOX_STATUS_CHECKED,
+ CHECKBOX_STATUS_INDETERMINATE, CHECKBOX_STATUS_UNCHECKED
+ } = Const;
+
+ if (_.isDefined(selectRow)) {
+ let checkedStatus;
+
+ // checkbox status depending on selected rows counts
+ if (allRowsSelected) checkedStatus = CHECKBOX_STATUS_CHECKED;
+ else if (selected.length === 0) checkedStatus = CHECKBOX_STATUS_UNCHECKED;
+ else checkedStatus = CHECKBOX_STATUS_INDETERMINATE;
+
+ return {
+ ...selectRow,
+ ...rest,
+ checkedStatus
+ };
+ }
+
+ return {
+ mode: ROW_SELECT_DISABLED
+ };
+ }
+ };
diff --git a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js
new file mode 100644
index 0000000..6a44e57
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js
@@ -0,0 +1,59 @@
+import _ from '../utils';
+
+export default ExtendBase =>
+ class RemoteResolver extends ExtendBase {
+ getNewestState(state = {}) {
+ const store = this.store || this.props.store;
+ return {
+ page: store.page,
+ sizePerPage: store.sizePerPage,
+ filters: store.filters,
+ sortField: store.sortField,
+ sortOrder: store.sortOrder,
+ data: store.getAllData(),
+ ...state
+ };
+ }
+
+ isRemotePagination() {
+ const { remote } = this.props;
+ return remote === true || (_.isObject(remote) && remote.pagination);
+ }
+
+ isRemoteFiltering() {
+ const { remote } = this.props;
+ return remote === true || (_.isObject(remote) && remote.filter);
+ }
+
+ isRemoteSort() {
+ const { remote } = this.props;
+ return remote === true || (_.isObject(remote) && remote.sort);
+ }
+
+ isRemoteCellEdit() {
+ const { remote } = this.props;
+ return remote === true || (_.isObject(remote) && remote.cellEdit);
+ }
+
+ handleRemotePageChange() {
+ this.props.onTableChange('pagination', this.getNewestState());
+ }
+
+ handleRemoteFilterChange() {
+ const newState = {};
+ if (this.isRemotePagination()) {
+ const options = this.props.pagination.options || {};
+ newState.page = _.isDefined(options.pageStartIndex) ? options.pageStartIndex : 1;
+ }
+ this.props.onTableChange('filter', this.getNewestState(newState));
+ }
+
+ handleSortChange() {
+ this.props.onTableChange('sort', this.getNewestState());
+ }
+
+ handleCellChange(rowId, dataField, newValue) {
+ const cellEdit = { rowId, dataField, newValue };
+ this.props.onTableChange('cellEdit', this.getNewestState({ cellEdit }));
+ }
+ };
diff --git a/packages/react-bootstrap-table2/src/row-section.js b/packages/react-bootstrap-table2/src/row-section.js
new file mode 100644
index 0000000..f0c6efd
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/row-section.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const RowSection = ({ content, colSpan }) => (
+
+
+ { content }
+
+
+);
+
+RowSection.propTypes = {
+ content: PropTypes.any,
+ colSpan: PropTypes.number
+};
+
+RowSection.defaultProps = {
+ content: null,
+ colSpan: 1
+};
+
+export default RowSection;
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
new file mode 100644
index 0000000..bc7e0c5
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -0,0 +1,66 @@
+/* eslint
+ react/require-default-props: 0
+ jsx-a11y/no-noninteractive-element-interactions: 0
+*/
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Const from '../const';
+
+export default class SelectionCell extends Component {
+ static propTypes = {
+ mode: PropTypes.string.isRequired,
+ rowKey: PropTypes.any,
+ selected: PropTypes.bool,
+ onRowSelect: PropTypes.func,
+ disabled: PropTypes.bool,
+ rowIndex: PropTypes.number
+ }
+
+ constructor() {
+ super();
+ this.handleRowClick = this.handleRowClick.bind(this);
+ }
+
+ shouldComponentUpdate(nextProps) {
+ const { selected } = this.props;
+
+ return nextProps.selected !== selected;
+ }
+
+ handleRowClick() {
+ const {
+ mode: inputType,
+ rowKey,
+ selected,
+ onRowSelect,
+ disabled,
+ rowIndex
+ } = this.props;
+
+ if (disabled) return;
+
+ const checked = inputType === Const.ROW_SELECT_SINGLE
+ ? true
+ : !selected;
+
+ onRowSelect(rowKey, checked, rowIndex);
+ }
+
+ render() {
+ const {
+ mode: inputType,
+ selected,
+ disabled
+ } = this.props;
+
+ return (
+
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
new file mode 100644
index 0000000..a2c6956
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
@@ -0,0 +1,76 @@
+/* eslint react/require-default-props: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Const from '../const';
+
+export const CheckBox = ({ checked, indeterminate }) => (
+
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
new file mode 100644
index 0000000..442cb18
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Const from '../const';
+import {
+ isAnySelectedRow,
+ selectableKeys,
+ unSelectableKeys,
+ getSelectedRows
+} from '../store/selection';
+import { getRowByRowId } from '../store/rows';
+
+export default Base =>
+ class RowSelectionWrapper extends Component {
+ static propTypes = {
+ store: PropTypes.object.isRequired,
+ selectRow: PropTypes.object.isRequired
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleRowSelect = this.handleRowSelect.bind(this);
+ this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
+ this.state = {
+ selectedRowKeys: props.store.selected
+ };
+ }
+
+ /**
+ * row selection handler
+ * @param {String} rowKey - row key of what was selected.
+ * @param {Boolean} checked - next checked status of input button.
+ */
+ handleRowSelect(rowKey, checked, rowIndex) {
+ const { selectRow: { mode, onSelect }, store } = this.props;
+ const { ROW_SELECT_SINGLE } = Const;
+
+ let currSelected = [...store.selected];
+
+ if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+ currSelected = [rowKey];
+ } else if (checked) { // when select mode is checkbox
+ currSelected.push(rowKey);
+ } else {
+ currSelected = currSelected.filter(value => value !== rowKey);
+ }
+
+ store.selected = currSelected;
+
+ if (onSelect) {
+ const row = getRowByRowId(store)(rowKey);
+ onSelect(row, checked, rowIndex);
+ }
+
+ this.setState(() => ({
+ selectedRowKeys: currSelected
+ }));
+ }
+
+ /**
+ * handle all rows selection on header cell by store.selected or given specific result.
+ * @param {Boolean} option - customized result for all rows selection
+ */
+ handleAllRowsSelect(option) {
+ const { store, selectRow: {
+ onSelectAll,
+ nonSelectable
+ } } = this.props;
+ const selected = isAnySelectedRow(store)(nonSelectable);
+
+ // set next status of all row selected by store.selected or customizing by user.
+ const result = option || !selected;
+
+ const currSelected = result ?
+ selectableKeys(store)(nonSelectable) :
+ unSelectableKeys(store)(nonSelectable);
+
+
+ store.selected = currSelected;
+
+ if (onSelectAll) {
+ onSelectAll(result, getSelectedRows(store));
+ }
+
+ this.setState(() => ({
+ selectedRowKeys: currSelected
+ }));
+ }
+
+ render() {
+ return (
+
+ {
+ (selectRow.mode !== Const.ROW_SELECT_DISABLED && !hideSelectColumn)
+ ? (
+ |
+ );
+ })
+ }
+
+ );
+ }
+}
+
+Row.propTypes = {
+ row: PropTypes.object.isRequired,
+ rowIndex: PropTypes.number.isRequired,
+ columns: PropTypes.array.isRequired,
+ style: PropTypes.object,
+ className: PropTypes.string,
+ attrs: PropTypes.object
+};
+
+Row.defaultProps = {
+ editable: true,
+ style: {},
+ className: null,
+ attrs: {}
+};
+
+export default Row;
diff --git a/packages/react-bootstrap-table2/src/sort/caret.js b/packages/react-bootstrap-table2/src/sort/caret.js
new file mode 100644
index 0000000..cc64f9d
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/sort/caret.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+import Const from '../const';
+
+const SortCaret = ({ order }) => {
+ const orderClass = cs('react-bootstrap-table-sort-order', {
+ dropup: order === Const.SORT_ASC
+ });
+ return (
+
+
+ );
+};
+
+SortCaret.propTypes = {
+ order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired
+};
+export default SortCaret;
diff --git a/packages/react-bootstrap-table2/src/sort/symbol.js b/packages/react-bootstrap-table2/src/sort/symbol.js
new file mode 100644
index 0000000..ecaf324
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/sort/symbol.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const SortSymbol = () => (
+
+
+
+
+
+ );
+
+export default SortSymbol;
diff --git a/packages/react-bootstrap-table2/src/sort/wrapper.js b/packages/react-bootstrap-table2/src/sort/wrapper.js
new file mode 100644
index 0000000..45414e3
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/sort/wrapper.js
@@ -0,0 +1,68 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import remoteResolver from '../props-resolver/remote-resolver';
+
+export default Base =>
+ class SortWrapper extends remoteResolver(Component) {
+ static propTypes = {
+ store: PropTypes.object.isRequired
+ }
+
+ constructor(props) {
+ super(props);
+ this.handleSort = this.handleSort.bind(this);
+ }
+
+ componentWillMount() {
+ const { columns, defaultSorted, store } = this.props;
+ // defaultSorted is an array, it's ready to use as multi / single sort
+ // when we start to support multi sort, please update following code to use array.forEach
+ if (defaultSorted && defaultSorted.length > 0) {
+ const dataField = defaultSorted[0].dataField;
+ const order = defaultSorted[0].order;
+ const column = columns.filter(col => col.dataField === dataField);
+ if (column.length > 0) {
+ store.setSort(column[0], order);
+
+ if (this.isRemoteSort() || this.isRemotePagination()) {
+ this.handleSortChange();
+ } else {
+ store.sortBy(column[0]);
+ }
+ }
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.isDataChanged) {
+ const sortedColumn = nextProps.columns.find(
+ column => column.dataField === nextProps.store.sortField);
+ if (sortedColumn) {
+ nextProps.store.sortBy(sortedColumn);
+ }
+ }
+ }
+
+ handleSort(column) {
+ const { store } = this.props;
+ store.setSort(column);
+
+ if (this.isRemoteSort() || this.isRemotePagination()) {
+ this.handleSortChange();
+ } else {
+ store.sortBy(column);
+ this.forceUpdate();
+ }
+ }
+
+ render() {
+ return (
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('tbody').length).toBe(1);
+ expect(wrapper.find(Row).length).toBe(data.length);
+ });
+ });
+
+ describe('when data is empty', () => {
+ beforeEach(() => {
+ wrapper = shallow(
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('tbody').length).toBe(1);
+ expect(wrapper.find(RowSection).length).toBe(1);
+ expect(wrapper.find(RowSection).prop('colSpan')).toBe(columns.length);
+ expect(wrapper.find(RowSection).prop('content')).toBe(null);
+ });
+
+ describe('when noDataIndication props is defined', () => {
+ let emptyIndication;
+
+ describe('and it is not a function', () => {
+ beforeEach(() => {
+ emptyIndication = 'Table is empty';
+ wrapper = shallow(
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('tbody').length).toBe(1);
+ expect(wrapper.find(RowSection).length).toBe(1);
+ expect(wrapper.find(RowSection).prop('content')).toEqual(emptyIndication);
+ });
+ });
+
+ describe('and it is a function', () => {
+ const content = 'Table is empty';
+ let emptyIndicationCallBack;
+
+ beforeEach(() => {
+ emptyIndicationCallBack = sinon.stub().returns(content);
+ wrapper = shallow(
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('tbody').length).toBe(1);
+ expect(wrapper.find(RowSection).length).toBe(1);
+ expect(wrapper.find(RowSection).prop('content')).toEqual(emptyIndication);
+ });
+
+ it('should call custom noDataIndication function correctly', () => {
+ expect(emptyIndicationCallBack.callCount).toBe(1);
+ });
+ });
+ });
+ });
+
+ describe('when rowStyle prop is defined', () => {
+ const rowStyle = { backgroundColor: 'red', color: 'white' };
+
+ describe('and it is a style object', () => {
+ beforeEach(() => {
+ wrapper = shallow(
+ );
+ });
+
+ it('should rendering Row component with correct style', () => {
+ const rows = wrapper.find(Row);
+ rows.forEach((row) => {
+ expect(row.props().style).toEqual(rowStyle);
+ });
+ });
+ });
+
+ describe('and it is a callback functoin', () => {
+ const rowStyleCallBack = sinon.stub().returns(rowStyle);
+ beforeEach(() => {
+ wrapper = shallow(
+ );
+ });
+
+ it('should calling rowStyle callBack correctly', () => {
+ expect(rowStyleCallBack.callCount).toBe(data.length);
+ });
+
+ it('should calling rowStyle callBack with correct argument', () => {
+ expect(rowStyleCallBack.firstCall.calledWith(data[0], 0)).toBeTruthy();
+ expect(rowStyleCallBack.secondCall.calledWith(data[1], 1)).toBeTruthy();
+ });
+
+ it('should rendering Row component with correct style', () => {
+ const rows = wrapper.find(Row);
+ rows.forEach((row) => {
+ expect(row.props().style).toEqual(rowStyle);
+ });
+ });
+ });
+
+ describe('when selectRow.style is defined', () => {
+ const selectedRowKey = data[0][keyField];
+ const selectedRowKeys = [selectedRowKey];
+ const selectedStyle = { backgroundColor: 'green', fontWeight: 'bold' };
+ const selectRow = { mode: 'radio', style: selectedStyle };
+
+ beforeEach(() => {
+ wrapper = shallow(
+ );
+ });
+
+ it('should rendering selected Row component with mixing selectRow.style correctly', () => {
+ const selectedRow = wrapper.find(Row).get(0);
+ expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({
+ ...rowStyle,
+ ...selectedStyle
+ }));
+ });
+
+ describe('and selectRow.bgColor is also defined', () => {
+ beforeEach(() => {
+ selectRow.bgColor = 'gray';
+ wrapper = shallow(
+