diff --git a/README.md b/README.md
index 1d5d13d..440204d 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,12 @@
# 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
+## Development
+Please check [development guide](./docs/development.md).
+
+## Usage
+See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
+
+## Roadmap
+See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
-## 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
diff --git a/docs/README.md b/docs/README.md
index 6ed4f43..828cae1 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -59,20 +59,20 @@ A special case for remote pagination:
remote={ { pagination: true, filter: false, sort: false } }
```
-In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort`) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
+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-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
+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-table-overlay` can be a good option for you:
+`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-table-overlay
+$ npm install react-bootstrap-table2-overlay
```
```js
-import overlayFactory from 'react-bootstrap-table-overlay';
+import overlayFactory from 'react-bootstrap-table2-overlay';
cellEdit.errorMessage - [String]
-This prop is not often used. Only used when you keep the error message in your application state and also handle the cell editing on remote mode.
+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.
+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
index 73fdc96..a18a073 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -73,7 +73,7 @@ dataField: 'address.city'
```
## column.text (**required**) - [String]
-`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
+`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
## column.hidden - [Bool]
`hidden` allow you to hide column when `true` given.
@@ -89,9 +89,9 @@ dataField: 'address.city'
## 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`: column object itself
-* `colIndex`
-* `components`: it's an object which contain all of other react element, like sort caret or filter etc.
+* `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
@@ -131,7 +131,7 @@ It's availabe to have custom class on table column:
classes: 'id-custom-cell'
}
```
-In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take `4` arguments and a `string` is expect to return:
+In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take **4** arguments and a `String` is expected to return::
```js
@@ -148,7 +148,7 @@ In addition, `classes` also accept a callback function which have more power to
**Return value**
-A new `String` will be the result of element class.
+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:
@@ -185,7 +185,7 @@ It's availabe to have custom style on table column:
}
```
-In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes `4` arguments and an `Object` is expect to return:
+In addition, similar to [`column.classes`](#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
@@ -215,7 +215,7 @@ It's availabe to have customized inline-style on table header column:
}
```
-Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
```js
{
@@ -233,7 +233,7 @@ 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:
+`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
@@ -282,7 +282,7 @@ 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:
+Besides, `align` also accept a callback function for dynamically setting text align. It takes **4** arguments and a `String` is expect to return:
```js
{
@@ -385,14 +385,14 @@ Not only `Object`, `callback function` is also acceptable. It takes `4` argument
A new `Object` will be the result of element HTML attributes.
-#### * Caution
+> 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.
+> 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, // it will be chosen.
+ title: true, // get higher priority
attrs: { title: 'test' }
}
```
@@ -409,7 +409,7 @@ If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.
}
```
-Additionally, customize the header attributes by a `2-arguments` callback function:
+Additionally, customize the header attributes by a **2** arguments callback function:
```js
{
@@ -556,4 +556,25 @@ import { textFilter } from 'react-bootstrap-table2-filter';
}
```
-For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
\ No newline at end of file
+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/row-selection.md b/docs/row-selection.md
index 6262be4..e50ef83 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -2,13 +2,10 @@
# Row selection
`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first.
-
-## Available properties
-
-The following are available properties in `selectRow`:
-
-#### Required
+## Required
* [mode (**required**)](#mode)
+
+## Optional
* [style](#style)
* [classes)](#classes)
* [bgColor](#bgColor)
@@ -19,15 +16,13 @@ The following are available properties in `selectRow`:
* [onSelectAll](#onSelectAll)
* [hideSelectColumn](#hideSelectColumn)
-#### Optional
-
-## selectRow.mode - [String]
+### 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`
+* **radio**
+* **checkbox**
#### examples
@@ -35,6 +30,7 @@ Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `ra
const selectRow = {
mode: 'radio' // single row selection
};
+
```
-## selectRow.style - [Object | Function]
+### selectRow.style - [Object | Function]
`selectRow.style` allow you to have custom style on selected rows:
```js
@@ -75,7 +71,7 @@ const selectRow = {
};
```
-## selectRow.classes - [String | Function]
+### selectRow.classes - [String | Function]
`selectRow.classes` allow you to add css class on selected rows:
```js
@@ -94,7 +90,7 @@ const selectRow = {
};
```
-## selectRow.bgColor - [String | Function]
+### selectRow.bgColor - [String | Function]
The backgroud color when row is selected
```js
@@ -115,7 +111,7 @@ const selectRow = {
};
```
-## selectRow.nonSelectable - [Array]
+### 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
@@ -125,8 +121,8 @@ const selectRow = {
};
```
-## selectRow.clickToSelect - [Bool]
-Able to select row when clicking on row.
+### selectRow.clickToSelect - [Bool]
+Allow user to select row by clicking on the row.
```js
const selectRow = {
@@ -135,10 +131,10 @@ const selectRow = {
};
```
-> Note: if you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
-## selectRow.clickToEdit - [Bool]
+### selectRow.clickToEdit - [Bool]
Able to click to edit cell and select row
```js
@@ -149,7 +145,7 @@ const selectRow = {
};
```
-## selectRow.onSelect - [Function]
+### selectRow.onSelect - [Function]
This callback function will be called when a row is select/unselect and pass following three arguments:
`row`, `isSelect` and `rowIndex`.
@@ -162,7 +158,7 @@ const selectRow = {
};
```
-## selectRow.onSelectAll - [Function]
+### 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
@@ -174,7 +170,7 @@ const selectRow = {
};
```
-## selectRow.hideSelectColumn - [Bool]
+### selectRow.hideSelectColumn - [Bool]
Default is `false`, if you don't want to have a selection column, give this prop as `true`
```js