\ No newline at end of file
diff --git a/docs/about.md b/docs/about.md
deleted file mode 100644
index 9ec511f..0000000
--- a/docs/about.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-id: about
-title: react-bootstrap-table2
-sidebar_label: About
----
-
-[`react-bootstrap-table2`](https://github.com/react-bootstrap-table/react-bootstrap-table2) is next generation of [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table). We rebuilt it to makie it more better and easy to use. Following is our mission:
-
-* Refactoring core module and make challenges be possible
-* More customizable table
-* Reduce the bugs and bundled size
-* Solve the performance issue
-* Improve the [`remote mode`](https://allenfang.github.io/react-bootstrap-table/docs.html#remote)
-* Improve handling of DOM events well
-* Support nest data
-* Support table footer
\ No newline at end of file
diff --git a/docs/basic-celledit.html b/docs/basic-celledit.html
new file mode 100644
index 0000000..fdf4f2d
--- /dev/null
+++ b/docs/basic-celledit.html
@@ -0,0 +1,52 @@
+Cell Edit · react-bootstrap-table2
react-bootstrap-table2 separate the cell edit code base to 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
\ No newline at end of file
diff --git a/docs/basic-celledit.md b/docs/basic-celledit.md
deleted file mode 100644
index f0745a3..0000000
--- a/docs/basic-celledit.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-id: basic-celledit
-title: Cell Edit
-sidebar_label: Cell Edit
----
-
-`react-bootstrap-table2` separate the cell edit code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so there's a little bit different when you use cell edit than `react-bootstrap-table`. In the following, we are going to show you how to enable the cell edit
-
-**[Live Demo For Cell Edit](../storybook/index.html?selectedKind=Cell%20Editing)**
-
------
-
-## Install
-
-```sh
-$ npm install react-bootstrap-table2-editor --save
-```
-
-## How
-
-We have [two ways](./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
-
-
-```
-
-How user save their new editings? We offer two ways:
-
-* Press ENTER(**default**)
-* Blur from current editing cell(Need to enable the [cellEdit.blurToSave](./cell-edit-props.html#celleditblurtosave-bool))
-
-## Editable Cell
-`react-bootstrap-table2` support you to configure the cell editable on three level:
-
-* Row Level ([cellEdit.nonEditableRows](./cell-edit-props.html#celleditnoneditablerows-function))
-* Column Level (Configure [column.editable](./column-props.html#columneditable-bool-function) as bool value)
-* Cell Level (Configure [column.editable](./column-props.html#columneditable-bool-function) as a callback function)
-
-## Customize Style/Class
-Currently, we only support the editing cell style/class customization, in the future, we will offer more customizations.
-
-### Editing Cell
-
-* Customize the editing cell style via [column.editCellStyle](./column-props.html#columneditcellstyle-object-function)
-* Customize the editing cell classname via [column.editCellStyle](./column-props.html#columneditcellstyle-object-function)
-
-## Validation
-
-[`column.validator`](./column-props.html#columnvalidator-function) will help you to work on it!
\ No newline at end of file
diff --git a/docs/basic-column.html b/docs/basic-column.html
new file mode 100644
index 0000000..28dcb13
--- /dev/null
+++ b/docs/basic-column.html
@@ -0,0 +1,37 @@
+Work on Column · react-bootstrap-table2
Firstly, legacy react-bootstrap-table is hard to customize the DOM Event, Attributes on column or header column. In the react-bootstrap-table2, we make those bad design become more easy and flexible.
column.formatter is a good chance for you to customize the cell. If you just want to add some styling, attributes or DOM event linstener, react-bootstrap-table2 have respective props to handle:
Welcome to submit a PR or issue for asking a convinence props for column :)
+
+
Formatting Table Header
+
Formatting header column is almost same as column formatting, we got column.headerFormatter to let you customize the content of a header column. Default react-bootstrap-table2 will take column.text as the content of header column.
+
Following, we list some useful props for customization:
\ No newline at end of file
diff --git a/docs/basic-column.md b/docs/basic-column.md
deleted file mode 100644
index 9afe7b2..0000000
--- a/docs/basic-column.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-id: basic-column
-title: Work on Column
-sidebar_label: Work on Column
----
-
-Firstly, legacy `react-bootstrap-table` is hard to customize the DOM Event, Attributes on column or header column. In the `react-bootstrap-table2`, we make those bad design become more easy and flexible.
-
-**[Live Demo For Column](../storybook/index.html?selectedKind=Work%20on%20Columns)**
-**[Live Demo For Header Column](../storybook/index.html?selectedKind=Work%20on%20Header%20Columns)**
-
------
-
-## Formatting Table Column
-
-[`column.formatter`](./column-props.html#columnformatter-function) is a good chance for you to customize the cell. If you just want to add some styling, attributes or DOM event linstener, `react-bootstrap-table2` have respective props to handle:
-
-* [`column.style`](./column-props.html#columnstyle-object-function)
-* [`column.classes`](./column-props.html#columnclasses-string-function)
-* [`column.events`](./column-props.html#columnevents-object)
-* [`column.attrs`](./column-props.html#columnattrs-object-function)
-
-In addition, we also give some useful props to let you have a quickly configuration:
-
-* [`column.hidden`](./column-props.html#columnhidden-bool)
-* [`column.title`](./column-props.html#columntitle-bool-function)
-* [`column.align`](./column-props.html#columnalign-string-function)
-* *Welcome to submit a PR or issue for asking a convinence props for column :)*
-
-## Formatting Table Header
-Formatting header column is almost same as column formatting, we got [`column.headerFormatter`](./column-props.html#columnheaderformatter-function) to let you customize the content of a header column. Default `react-bootstrap-table2` will take [`column.text`](./column-props.html#columntext-required-string) as the content of header column.
-
-Following, we list some useful props for customization:
-
-* [`column.headerStyle`](./column-props.html#columnheaderstyle-object-function)
-* [`column.headerClasses`](./column-props.html#columnheaderclasses-string-function)
-* [`column.headerEvents`](./column-props.html#columnheaderevents-object)
-* [`column.headerAttrs`](./column-props.html#columnheaderattrs-object-function)
-* [`column.headerTitle`](./column-props.html#columnheadertitle-bool-function)
-* [`column.headerAlign`](./column-props.html#columnheaderalign-string-function)
\ No newline at end of file
diff --git a/docs/basic-filter.html b/docs/basic-filter.html
new file mode 100644
index 0000000..a4f20ea
--- /dev/null
+++ b/docs/basic-filter.html
@@ -0,0 +1,47 @@
+Column Filter · react-bootstrap-table2
react-bootstrap-table2 separate the filter core code base to react-bootstrap-table2-filter, so there's a little bit different when you use column filter than react-bootstrap-table. In the following, we are going to show you how to enable the column filter:
You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
+
+
TextFilter
+
Coming soon!
+
+
Text Filter
+
Following is a quick demo for enable the column filter on Product Price column!!
\ No newline at end of file
diff --git a/docs/basic-filter.md b/docs/basic-filter.md
deleted file mode 100644
index 936c6c7..0000000
--- a/docs/basic-filter.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-id: basic-filter
-title: Column Filter
-sidebar_label: Column Filter
----
-
-`react-bootstrap-table2` separate the filter core code base to [`react-bootstrap-table2-filter`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter), so there's a little bit different when you use column filter than `react-bootstrap-table`. In the following, we are going to show you how to enable the column filter:
-
-**[Live Demo For Column Filter](../storybook/index.html?selectedKind=Column%20Filter)**
-
------
-
-## Install
-
-```sh
-$ npm install react-bootstrap-table2-filter --save
-```
-
-You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
-
-* TextFilter
-* **Coming soon!**
-
-## Text Filter
-Following is a quick demo for enable the column filter on **Product Price** column!!
-
-```js
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-
-// omit...
-const columns = [
- ..., {
- dataField: 'price',
- text: 'Product Price',
- filter: textFilter()
-}];
-
-
-```
-
-In addition, we preserve all of the filter features and functionality in legacy `react-bootstrap-table`, but in different way to do it:
-
-```js
-import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
-// omit...
-
-const priceFilter = textFilter({
- placeholder: 'My Custom PlaceHolder', // custom the input placeholder
- className: 'my-custom-text-filter', // custom classname on input
- defaultValue: 'test', // default filtering value
- comparator: Comparator.EQ, // default is Comparator.LIKE
- style: { ... }, // your custom styles on input
- delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
-});
-
-// omit...
-```
\ No newline at end of file
diff --git a/docs/basic-pagination.html b/docs/basic-pagination.html
new file mode 100644
index 0000000..1892c90
--- /dev/null
+++ b/docs/basic-pagination.html
@@ -0,0 +1,22 @@
+Pagination · react-bootstrap-table2
react-bootstrap-table2 separate the pagination code base to react-bootstrap-table2-pagination, so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table
\ No newline at end of file
diff --git a/docs/basic-pagination.md b/docs/basic-pagination.md
deleted file mode 100644
index 117e7fb..0000000
--- a/docs/basic-pagination.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-id: basic-pagination
-title: Pagination
-sidebar_label: Pagination
----
-
-`react-bootstrap-table2` separate the pagination code base to [`react-bootstrap-table2-pagination`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator), so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table
-
-**[Live Demo For Pagination](../storybook/index.html?selectedKind=Pagination)**
-
------
-
-## Install
-
-```sh
-$ npm install react-bootstrap-table2-pagination --save
-```
-
-## How
-
-Let's enable a pagination on your table:
-
-```js
-import paginator from 'react-bootstrap-table2-paginator';
-// omit...
-
-
-```
-
-## Customization
-
-See [pagination props](./pagination-props.html)
\ No newline at end of file
diff --git a/docs/basic-remote.html b/docs/basic-remote.html
new file mode 100644
index 0000000..09664e1
--- /dev/null
+++ b/docs/basic-remote.html
@@ -0,0 +1,25 @@
+Remote Table · react-bootstrap-table2
By default, react-bootstrap-table2 always handle the data changes internally, such as sorting, paging, filtering etc. However, you may want to handle those logic or sync up to backend or Redux store so that remote can help you on it as well.
+
+
How
+
Make sure you already see remote props on BootstrapTable firstly. In the beginning, you can assign true to enable the remote mode on table but few people doing like that, because it will enable all the functionalities(sort, filter etc) become remote mode.
+
In the most of case, you probably only need some functionalites handled on the remote, so remote allow you to pass an object to control it.
+
Table/Data Change
+
It's the key point that you need to know something changed so that you can handle your data or logic externally. In the remote mode, you are supposed to give onTableChange on BootstrapTable and it will being called when table have any changes if you enable the remote mode.
+
+
All the changes are go though onTableChange listener,
+it's only way that table give fully control to you
+
+
Please read onTableChange docs to understand how to leverage it.
+
Remote Pagination
+
Pagination remote is a particular case in react-bootstrap-table2. If you enable the pagination remote mode, react-bootstrap-table2 will not handle sort and filter internally, instead your application is supposed to handle it in the remote way.
+
Because, sort and filter need to work on overall data. In the remote pagination, react-bootstrap-table2 doesn't know all the data, only have the data on current page. So that's why you need to handle the remote filtering or sorting also.
+
You can see this example to see how it work for above case.
+
A good news is we are consider to easing this limitation through partial sorting/filtering on current page.
\ No newline at end of file
diff --git a/docs/basic-remote.md b/docs/basic-remote.md
deleted file mode 100644
index f983533..0000000
--- a/docs/basic-remote.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-id: basic-remote
-title: Remote Table
-sidebar_label: Work on Remote
----
-
-## What is Remote
-
-By default, `react-bootstrap-table2` always handle the data changes internally, such as sorting, paging, filtering etc. However, you may want to handle those logic or sync up to backend or Redux store so that `remote` can help you on it as well.
-
------
-
-## How
-Make sure you already see [`remote`](./table-props.html#remote-bool-object) props on `BootstrapTable` firstly. In the beginning, you can assign `true` to enable the remote mode on table but few people doing like that, because it will enable all the functionalities(sort, filter etc) become `remote` mode.
-
-In the most of case, you probably only need some functionalites handled on the remote, so `remote` allow you to pass an object to control it.
-
-## Table/Data Change
-It's the key point that you need to know something changed so that you can handle your data or logic externally. In the `remote` mode, you are supposed to give [`onTableChange`](./table-props.html#ontablechange-function) on `BootstrapTable` and it will being called when table have any changes if you enable the `remote` mode.
-
-> All the changes are go though `onTableChange` listener,
-> it's only way that table give fully control to you
-
-Please read [`onTableChange`](./table-props.html#ontablechange-function) docs to understand how to leverage it.
-
-## Remote Pagination
-Pagination remote is a particular case in `react-bootstrap-table2`. If you enable the pagination remote mode, `react-bootstrap-table2` will not handle **sort** and **filter** internally, instead your application is supposed to handle it in the remote way.
-
-Because, **sort** and **filter** need to work on overall data. In the remote pagination, `react-bootstrap-table2` doesn't know all the data, only have the data on current page. So that's why you need to handle the remote filtering or sorting also.
-
-You can see [this](../storybook/index.html?selectedKind=Remote&selectedStory=Remote%20All) example to see how it work for above case.
-
-A good news is we are consider to easing this limitation through partial sorting/filtering on current page.
\ No newline at end of file
diff --git a/docs/basic-row-select.html b/docs/basic-row-select.html
new file mode 100644
index 0000000..8822ac8
--- /dev/null
+++ b/docs/basic-row-select.html
@@ -0,0 +1,26 @@
+Row Selection · react-bootstrap-table2
For the table row selection functionality, the usage is almost same as react-bootstrap-table. If you are a user from legacy react-bootstrap-table, you can consider to skip this part.
We support the single and multiple selection on table, config the selectRow.mode on BootstrapTable will enable the selection on the table.
+
By default behavior, user need to click on the selection column or the checkbox/radio to select/unselect a row, for a user experience perspective, we have selectoRow.clickToSelect to allow user to select/unselect row by clicking on the row.
+
Customization
+
Style/Class
+
Like column, we support to custom the style, class on the selecting row easily via following selectRow props:
react-bootstrap-table2 offer a selectRow.hideSelectColumn to let you hide the selection column. But for the customization on selection column or checkbox/radio button, we will support it ine next couple release.
+Coming Soon!
+
Event Listening
+
selectRow.onSelect allow you to listen a row is select or unselect. For the multiple selection, we also have selectRow.onSelectAll to listen the select/unselect all event.
\ No newline at end of file
diff --git a/docs/basic-row-select.md b/docs/basic-row-select.md
deleted file mode 100644
index daadd48..0000000
--- a/docs/basic-row-select.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-id: basic-row-select
-title: Row Selection
-sidebar_label: Row Selection
----
-
-For the table row selection functionality, the usage is almost same as `react-bootstrap-table`. If you are a user from legacy `react-bootstrap-table`, you can consider to skip this part.
-
-**[Live Demo For Row Selection](../storybook/index.html?selectedKind=Row%20Selection)**
-
------
-
-## Selection Mode
-
-We support the single and multiple selection on table, config the [`selectRow.mode`](./row-select-props.html#selectrowmode-string) on `BootstrapTable` will enable the selection on the table.
-
-By default behavior, user need to click on the selection column or the checkbox/radio to select/unselect a row, for a user experience perspective, we have [`selectoRow.clickToSelect`](./row-select-props.html#selectrowclicktoselect-bool) to allow user to select/unselect row by clicking on the row.
-
-## Customization
-
-### Style/Class
-Like column, we support to custom the style, class on the selecting row easily via following `selectRow` props:
-
-* [`selectRow.bgColor`](row-select-props.html#selectrowbgcolor-string-function)
-* [`selectRow.style`](./row-select-props.html#selectrowstyle-object-function)
-* [`selectRow.classes`](./row-select-props.html#selectrowclasses-string-function)
-
-### Selection Column
-`react-bootstrap-table2` offer a [`selectRow.hideSelectColumn`](./row-select-props.html#selectrowhideselectcolumn-bool) to let you hide the selection column. But for the customization on selection column or checkbox/radio button, we will support it ine next couple release.
-**Coming Soon!**
-
-## Event Listening
-
-[`selectRow.onSelect`](./row-select-props.html#selectrowonselect-function) allow you to listen a row is select or unselect. For the multiple selection, we also have [`selectRow.onSelectAll`](./selectrowonselectall-function) to listen the select/unselect all event.
diff --git a/docs/basic-row.html b/docs/basic-row.html
new file mode 100644
index 0000000..3108b38
--- /dev/null
+++ b/docs/basic-row.html
@@ -0,0 +1,21 @@
+Work on Row · react-bootstrap-table2
react-bootstrap-table2 allow you to configure columns to be sortable. Currently, we don't support the multi-column sort, but it will be implemented in the future.
After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:
+
+
Control Sorting
+
Default Sort
+
react-bootstrap-table2 will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via defaultSorted.
+
Manage Sorting Externally
+
Coming Soon!
+
Custom the Sorting Algorithm
+
It's simple!! configure sortFunc on column definitation.
+
{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true
+ // Perform a reverse sorting here
+ sortFunc: (a, b, order, dataField) => {
+ if (order === 'asc') {
+ return b - a;
+ }
+ return a - b; // desc
+ }
+}
+
\ No newline at end of file
diff --git a/docs/basic-sort.md b/docs/basic-sort.md
deleted file mode 100644
index a6d2b4c..0000000
--- a/docs/basic-sort.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: basic-sort
-title: Table Sort
-sidebar_label: Table Sort
----
-
-`react-bootstrap-table2` allow you to configure columns to be sortable. Currently, we don't support the multi-column sort, but it will be implemented in the future.
-
-**[Live Demo For Table Sort](../storybook/index.html?selectedKind=Sort%20Table)**
-
------
-
-## Enable Sort on Column
-Firstly, you need to know what column you allow user to sort and give the [`sort`](./column-props.html#columnsort-bool) as `true` in the column definitation.
-
-```js
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- sort: true
-}, {
- dataField: 'name',
- text: 'Product Name',
- sort: true
-}, {
- dataField: 'price',
- text: 'Product Price'
-}];
-
-
-```
-
-After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:
-
-
-## Control Sorting
-### Default Sort
-`react-bootstrap-table2` will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via [`defaultSorted`](./table-props.html#defaultsorted-array).
-
-### Manage Sorting Externally
-
-**Coming Soon!**
-
-## Custom the Sorting Algorithm
-
-It's simple!! configure [`sortFunc`](./column-props.html#columnsortfunc-function) on column definitation.
-
-```js
-{
- dataField: 'id',
- text: 'Product ID',
- sort: true
- // Perform a reverse sorting here
- sortFunc: (a, b, order, dataField) => {
- if (order === 'asc') {
- return b - a;
- }
- return a - b; // desc
- }
-}
-```
-
-## Custom the Sorting Style
-There're two way you can change or prettify the header when sorting: [`headerSortingClasses`](./column-props.html#headersortingclasses-string-function) and [`headerSortingStyle`](./column-props.html#headersortingstyle-object-function)
-
-## Custom the Sort Caret
-
-**Coming Soon!**
\ No newline at end of file
diff --git a/docs/cell-edit-props.html b/docs/cell-edit-props.html
new file mode 100644
index 0000000..84583bf
--- /dev/null
+++ b/docs/cell-edit-props.html
@@ -0,0 +1,48 @@
+Cell Editing Props · react-bootstrap-table2
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 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.
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.
\ No newline at end of file
diff --git a/docs/cell-edit-props.md b/docs/cell-edit-props.md
deleted file mode 100644
index 5749e1d..0000000
--- a/docs/cell-edit-props.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-id: cell-edit-props
-title: Cell Editing Props
----
-
-## Required
-* [mode (**required**)](#celleditmode-string)
-
-## Optional
-* [blurToSave](#celleditblurtosave-bool)
-* [nonEditableRows](#celleditnoneditablerows-function)
-* [timeToCloseMessage](#celledittimetoclosemessage-function)
-* [beforeSaveCell](#celleditbeforesavecell-function)
-* [afterSaveCell](#celleditaftersavecell-function)
-* [errorMessage](#cellediterrormessage-string)
-* [onErrorMessageDisappear](#celleditonerrormessagedisappear-function)
-
------
-
-## cellEdit.mode - [String]
-`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing.
-
-## cellEdit.blurToSave - [Bool]
-Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
-
-## cellEdit.nonEditableRows - [Function]
-`cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
-
-## cellEdit.timeToCloseMessage - [Function]
-If a [`column.validator`](./column-props.html#columnvalidator-function) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
-
-## cellEdit.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`](./table-props.html#remote-bool-object) mode.
-
-## cellEdit.onErrorMessageDisappear - [Function]
-This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.
\ No newline at end of file
diff --git a/docs/column-props.html b/docs/column-props.html
new file mode 100644
index 0000000..9890546
--- /dev/null
+++ b/docs/column-props.html
@@ -0,0 +1,449 @@
+Columns Props · react-bootstrap-table2
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
+
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.
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:
+
{
+ 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, you can define any value for it and will be passed as fourth argument for column.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:
The possible value of order argument is asc and desc.
+
+
column.classes - [String | Function]
+
It's availabe to have custom class on table column:
+
{
+ // 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:
In addition, similar to column.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:
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 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:
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:
colIndex: The index of the current column being processed in BootstrapTable.
+
+
headerSortingStyle - [Object | Function]
+
It's similiar to 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:
column.editable default is true, means every column is editable if you configure 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:
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:
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:
You can use column.editCellStyle to custom the style of <td> when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
+
Parameters
+
+
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.
+
+
{
+ editCellStyle: { ... }
+}
+
+
Or take a callback function
+
{
+ 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 <td> when cell editing. It's same as column.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.
+
{
+ editCellClasses: 'custom-class'
+}
+
+
Or take a callback function
+
{
+ 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 Filter
+
+
We have a quick example to show you how to use column.filter:
For some reason of simple customization, react-bootstrap-table2 allow you to pass some props to filter factory function. Please check here 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:
\ No newline at end of file
diff --git a/docs/column-props.md b/docs/column-props.md
deleted file mode 100644
index 42124dc..0000000
--- a/docs/column-props.md
+++ /dev/null
@@ -1,565 +0,0 @@
----
-id: column-props
-title: Columns Props
----
-
-Definition of columns props on BootstrapTable
-
-## Required
-* [dataField (**required**)](#columndatafield-required-string)
-* [text (**required**)](#columntext-required-string)
-
-## Optional
-* [hidden](#columnhidden-bool)
-* [formatter](#columnformatter-function)
-* [formatExtraData](#columnformatextradata-any)
-* [sort](#columnsort-bool)
-* [sortFunc](#columnsortfunc-function)
-* [classes](#columnclasses-string-function)
-* [style](#columnstyle-object-function)
-* [title](#columntitle-bool-function)
-* [events](#columnevents-object)
-* [align](#columnalign-string-function)
-* [attrs](#columnattrs-object-function)
-* [headerFormatter](#columnheaderformatter-function)
-* [headerClasses](#columnheaderclasses-string-function)
-* [headerStyle](#columnheaderstyle-object-function)
-* [headerTitle](#columnheadertitle-bool-function)
-* [headerEvents](#columnheaderevents-object)
-* [headerAlign](#columnheaderalign-string-function)
-* [headerAttrs](#columnheaderattrs-object-function)
-* [headerSortingClasses](#headersortingclasses-string-function)
-* [headerSortingStyle](#headersortingstyle-object-function)
-* [editable](#columneditable-bool-function)
-* [validator](#columnvalidator-function)
-* [editCellStyle](#columneditcellstyle-object-function)
-* [editCellClasses](#columneditcellclasses-string-function)
-* [filter](#columnfilter-object)
-* [filterValue](#columnfiltervalue-function)
-
------
-
-## 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`](#columnheaderformatter-function)
-
-## 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`](#columnformatextradata-any)
-
-## 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`](#columnformatter-function), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#columnformatter-function) 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`](#columnclasses-string-function), `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`](#columnclasses-string-function), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes **4** arguments and an `Object` is expect to return:
-
-
-```js
-{
- 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`](#columntitle-bool-function),
-
-```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`](#columnalign-string-function), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on header column.
-
-```js
-{
- // 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`](#columnevents-object) 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`](#columnattrs-object-function) 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](#columnattrs-object-function), 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-string-function). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
-
-```js
-const sortingHeaderStyle = {
- 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`](#columneditcellstyle-object-function) which also accept a callback function to able to custom your class more flexible. Following is the arguments of this callback function: `cell`, `row`, `rowIndex`, `colIndex`.
-
-```js
-{
- 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 Filter
-
-We have a quick example to show you how to use `column.filter`:
-
-```js
-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]
-}
-```
diff --git a/docs/filter-props.html b/docs/filter-props.html
new file mode 100644
index 0000000..8c8b7ec
--- /dev/null
+++ b/docs/filter-props.html
@@ -0,0 +1,8 @@
+Column Filter Props · react-bootstrap-table2
\ No newline at end of file
diff --git a/docs/filter-props.md b/docs/filter-props.md
deleted file mode 100644
index d38666f..0000000
--- a/docs/filter-props.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: filter-props
-title: Column Filter Props
----
-
-**No Any Available Props Yet**
\ No newline at end of file
diff --git a/docs/getting-started.html b/docs/getting-started.html
new file mode 100644
index 0000000..8e72e2c
--- /dev/null
+++ b/docs/getting-started.html
@@ -0,0 +1,39 @@
+Getting Started · react-bootstrap-table2
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
+
+
Finish above step, let's add the react-bootstrap-table2 styles:
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 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.
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 prop.
\ No newline at end of file
diff --git a/docs/overlay.md b/docs/overlay.md
deleted file mode 100644
index a324aa9..0000000
--- a/docs/overlay.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-id: overlay
-title: Remote Loading/Overlay
-sidebar_label: 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`**](./table-props.html#nodataindication-function) is a simple case you can take it, if current data size is empty, `react-bootstrap-table2` will call the `noDataIndication` prop and get the result to display on the table.
-
-[**Here**](../storybook/index.html?selectedKind=EmptyTableOverlay) is a quick exmaple for `noDataIndication`.
-
-## Loading Table
-In the most of case for remote mode, you need the loading animation to tell the user the table is loading or doing some action in the background. Hence, you can lervarge [**`overlay`**](./table-props.html#overlay-function) prop.
-
-[**Here**](../storybook/index.html?selectedKind=EmptyTableOverlay) is also a example for `overlay`
\ No newline at end of file
diff --git a/docs/pagination-props.html b/docs/pagination-props.html
new file mode 100644
index 0000000..33f67dc
--- /dev/null
+++ b/docs/pagination-props.html
@@ -0,0 +1,97 @@
+Pagination Props · react-bootstrap-table2
Use pagination.page specify the current page when table render.
+
+
It's necessary value when remote pagination is enabled.
+
+
pagination.sizePerPage - [Number]
+
Use pagination.sizePerPage specify the current size per page when table render.
+
+
It's necessary value when remote pagination is enabled.
+
+
pagination.totalSize - [Number]
+
It's only work for remote mode, because react-bootstrap-table2 will never know the totally data size actually. Remeber to assign totalSize when you enable the remote pagination.
+
pagination.pageStartIndex - [Number]
+
Default is 1, which means the first page index is start from 1. If your first page want to start from 0, you can control it via pageStartIndex.
+
pagination.paginationSize - [Number]
+
Default is 5, which means the size of pagination.
+
pagination.sizePerPageList - [Array]
+
Default size per page have 10, 25, 30, 50. You can assign a number of array to replace this default list. However, sizePerPageList is flexible to let you decide the text display on the dropdown list:
Default is true, you can disable it if you don't want to show the "Go to first" and "Go to last" page buttons.
+
pagination.alwaysShowAllBtns - [Bool]
+
Default is false, which means react-bootstrap-table2 will hide the next or previouse page button if unnecessary. Anyway, you can still show them always via alwaysShowAllBtns prop.
+
pagination.firstPageText - [Any]
+
A quick way to specify the text on the first page button.
+
pagination.prePageText - [Any]
+
A quick way to specify the text on the previous page button.
+
pagination.nextPageText - [Any]
+
A quick way to specify the text on the next page button.
+
pagination.lastPageText - [Any]
+
A quick way to specify the text on the last page button.
+
pagination.firstPageTitle - [Any]
+
A quick way to specify the title on the first page button.
+
pagination.prePageTitle - [Any]
+
A quick way to specify the title on the previous page button.
+
pagination.nextPageTitle - [Any]
+
A quick way to specify the title on the next page button.
+
pagination.lastPageTitle - [Any]
+
A quick way to specify the title on the last page button.
+
pagination.hideSizePerPage - [Bool]
+
You can hide it :)
+
pagination.hidePageListOnlyOnePage - [Bool]
+
You can hide the pagination when there's only one page in table. Default is false.
+
pagination.onPageChange - [Function]
+
Accept a callback function and will be called when page changed. This callback function get below arguments:
+
Arguments
+
+
page
+
sizePerPage
+
+
pagination.onSizePerPageChange - [Function]
+
Accept a callback function and will be called when size per page changed. This callback function get below arguments:
\ No newline at end of file
diff --git a/docs/pagination-props.md b/docs/pagination-props.md
deleted file mode 100644
index 1ef0264..0000000
--- a/docs/pagination-props.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: pagination-props
-title: Pagination Props
----
-
-## Required
-**NONE**
-
-## Optional
-* [page](#paginationpage-number)
-* [sizePerPage](#paginationsizeperpage-number)
-* [totalSize](#paginationtotalsize-number)
-* [pageStartIndex](#paginationpagestartindex-number)
-* [paginationSize](#paginationpaginationsize-number)
-* [sizePerPageList](#paginationsizeperpagelist-array)
-* [withFirstAndLast](#paginationwithfirstandlast-bool)
-* [alwaysShowAllBtns](#paginationalwaysshowallbtns-bool)
-* [firstPageText](#paginationfirstpagetext-any)
-* [prePageText](#paginationprepagetext-any)
-* [nextPageText](#paginationnextpagetext-any)
-* [lastPageText](#paginationlastpagetext-any)
-* [firstPageTitle](#paginationfirstpagetitle-any)
-* [prePageTitle](#paginationprepagetitle-any)
-* [nextPageTitle](#paginationnextpagetitle-any)
-* [lastPageTitle](#paginationlastpagetitle-any)
-* [hideSizePerPage](#paginationhidesizeperpage-bool)
-* [hidePageListOnlyOnePage](#paginationhidepagelistonlyonepage-bool)
-* [onPageChange](#paginationonpagechange-function)
-* [onSizePerPageChange](#paginationonsizeperpagechange-function)
------
-
-## pagination.page - [Number]
-Use `pagination.page` specify the current page when table render.
-
-> It's necessary value when [remote](./table-props.html#remote-bool-object) pagination is enabled.
-
-## pagination.sizePerPage - [Number]
-Use `pagination.sizePerPage` specify the current size per page when table render.
-
-> It's necessary value when [remote](./table-props.html#remote-bool-object) pagination is enabled.
-
-## pagination.totalSize - [Number]
-It's only work for [remote](./table-props.html#remote-bool-object) mode, because `react-bootstrap-table2` will never know the totally data size actually. Remeber to assign `totalSize` when you enable the remote pagination.
-
-## pagination.pageStartIndex - [Number]
-Default is **1**, which means the first page index is start from 1. If your first page want to start from **0**, you can control it via `pageStartIndex`.
-
-## pagination.paginationSize - [Number]
-Default is **5**, which means the size of pagination.
-
-## pagination.sizePerPageList - [Array]
-Default size per page have **10**, **25**, **30**, **50**. You can assign a number of array to replace this default list. However, `sizePerPageList` is flexible to let you decide the text display on the dropdown list:
-
-```js
-[ {
- text: '5th', value: 5
-}, {
- text: '10th', value: 10
-}, {
- text: 'All', value: data.length
-} ]
-```
-
-## pagination.withFirstAndLast - [Bool]
-Default is `true`, you can disable it if you don't want to show the **"Go to first"** and **"Go to last"** page buttons.
-
-## pagination.alwaysShowAllBtns - [Bool]
-Default is `false`, which means `react-bootstrap-table2` will hide the next or previouse page button if unnecessary. Anyway, you can still show them always via `alwaysShowAllBtns` prop.
-
-## pagination.firstPageText - [Any]
-A quick way to specify the text on the first page button.
-
-## pagination.prePageText - [Any]
-A quick way to specify the text on the previous page button.
-
-## pagination.nextPageText - [Any]
-A quick way to specify the text on the next page button.
-
-## pagination.lastPageText - [Any]
-A quick way to specify the text on the last page button.
-
-## pagination.firstPageTitle - [Any]
-A quick way to specify the title on the first page button.
-
-## pagination.prePageTitle - [Any]
-A quick way to specify the title on the previous page button.
-
-## pagination.nextPageTitle - [Any]
-A quick way to specify the title on the next page button.
-
-## pagination.lastPageTitle - [Any]
-A quick way to specify the title on the last page button.
-
-## pagination.hideSizePerPage - [Bool]
-You can hide it :)
-
-## pagination.hidePageListOnlyOnePage - [Bool]
-You can hide the pagination when there's only one page in table. Default is `false`.
-
-## pagination.onPageChange - [Function]
-Accept a callback function and will be called when page changed. This callback function get below arguments:
-
-**Arguments**
-* page
-* sizePerPage
-
-## pagination.onSizePerPageChange - [Function]
-Accept a callback function and will be called when size per page changed. This callback function get below arguments:
-
-**Arguments**
-* page
-* sizePerPage
\ No newline at end of file
diff --git a/docs/row-select-props.html b/docs/row-select-props.html
new file mode 100644
index 0000000..807f059
--- /dev/null
+++ b/docs/row-select-props.html
@@ -0,0 +1,137 @@
+Row Selection Props · react-bootstrap-table2
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.
+
Available values
+
+
radio
+
checkbox
+
+
Following is a quick example for single selection:
Note: When you also enable cellEdit, 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
+
+
selectRow.clickToEdit - [Bool]
+
Able to click to edit cell and select row at the same time.
\ No newline at end of file
diff --git a/docs/row-select-props.md b/docs/row-select-props.md
deleted file mode 100644
index 75cf2b6..0000000
--- a/docs/row-select-props.md
+++ /dev/null
@@ -1,172 +0,0 @@
----
-id: row-select-props
-title: Row Selection Props
----
-
-## Required
-* [mode (**required**)](#selectrowmode-string)
-
-## Optional
-* [style](#selectrowstyle-object-function)
-* [classes](#selectrowclasses-string-function)
-* [bgColor](#selectrowbgcolor-string-function)
-* [nonSelectable](#selectrownonselectable-array)
-* [clickToSelect](#selectrowclicktoselect-bool)
-* [clickToEdit](#selectrowclicktoedit-bool)
-* [onSelect](#selectrowonselect-function)
-* [onSelectAll](#selectrowonselectall-function)
-* [hideSelectColumn](#selectrowhideselectcolumn-bool)
-
------
-
-## 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.
-
-### Available values
-* **radio**
-* **checkbox**
-
-Following is a quick example for single selection:
-
-```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]
-A quick way to specify 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-props.html), the `selectRow.clickToSelect` will deactivate the functionality of cell editing. If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#selectrowclicktoedit-bool)
-
-## selectRow.clickToEdit - [Bool]
-Able to click to edit cell and select row at the same time.
-
-```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`](#selectrowmode-string) 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'
-};
-```
\ No newline at end of file
diff --git a/docs/table-props.html b/docs/table-props.html
new file mode 100644
index 0000000..f29040c
--- /dev/null
+++ b/docs/table-props.html
@@ -0,0 +1,227 @@
+BootstrapTable Props · react-bootstrap-table2
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 for more detail.
+
remote - [Bool | Object]
+
Default is false, if enable remote, you are supposed to be handle all the table change events, like: pagination, insert, filtering etc.
+This is a chance that you can connect to your remote server or database to manipulate your data.
+For flexibility reason, you can control what functionality should be handled on remote via a object return:
In above case, only column filter will be handled on remote.
+
+
Note: when remote is enable, you are suppose to give onTableChange prop on BootstrapTable
+It's the only way to communicate to your remote server and update table states.
There'r 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.
+
noDataIndication - [Function]
+
noDataIndication should be a callback function which return anything that will be showed in the table when data is empty.
+
loading - [Bool]
+
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's only valid when remote is enabled.
+When loading is true, react-bootstrap-table2 will attend to render a overlay on table via overlay prop, if 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:
Actually, react-bootstrap-table2-overlay is depends on react-loading-overlay and overlayFactory just a factory function and you can pass any props which available for react-loading-overlay:
defaultSorted accept an object array which allow you to define the default sort columns when first render.
+
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.
paginator is a function actually and allow to pass some pagination options, following we list all the available options:
+
paginator({
+ page, // Specify the current page. It's necessary when remote is enabled
+ sizePerPage, // Specify the size per page. It's necessary when remote is enabled
+ totalSize, // Total data size. It's necessary when remote is enabled
+ pageStartIndex: 0, // first page will be 0, default is 1
+ paginationSize: 3, // the pagination bar size, default is 5
+ sizePerPageList: [ {
+ text: '5', value: 5
+ }, {
+ text: '10', value: 10
+ }, {
+ text: 'All', value: products.length
+ } ], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text
+ withFirstAndLast: false, // hide the going to first and last page button
+ alwaysShowAllBtns: true, // always show the next and previous page button
+ firstPageText: 'First', // the text of first page button
+ prePageText: 'Prev', // the text of previous page button
+ nextPageText: 'Next', // the text of next page button
+ lastPageText: 'Last', // the text of last page button
+ nextPageTitle: 'Go to next', // the title of next page button
+ prePageTitle: 'Go to previous', // the title of previous page button
+ firstPageTitle: 'Go to first', // the title of first page button
+ lastPageTitle: 'Go to last', // the title of last page button
+ hideSizePerPage: true, // hide the size per page dorpdown
+ hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
+ onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
+ onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
+})
+
+
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.
This callback function will be called when remote enabled only.
+
const onTableChange = (type, newState) => {
+ // handle any data change here
+}
+<BootstrapTable data={ data } columns={ columns } onTableChange={ onTableChange } />
+
+
There's only two arguments will be passed to onTableChange: type and newState:
+
type is tell you what kind of functionality to trigger this table's change: available values at the below:
+
+
filter
+
pagination
+
sort
+
cellEdit
+
+
Following is a shape of newState
+
{
+ page, // newest page
+ sizePerPage, // newest sizePerPage
+ sortField, // newest sort field
+ sortOrder, // newest sort order
+ filters, // an object which have current filter status per column
+ data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
+ cellEdit: { // You can only see this prop when type is cellEdit
+ rowId,
+ dataField,
+ newValue
+ }
+}
+
\ No newline at end of file
diff --git a/docs/table-props.md b/docs/table-props.md
deleted file mode 100644
index c5763b4..0000000
--- a/docs/table-props.md
+++ /dev/null
@@ -1,284 +0,0 @@
----
-id: table-props
-title: BootstrapTable Props
----
-## Required
-* [keyField (**required**)](#keyfield-required-string)
-* [data (**required**)](#data-required-array)
-* [columns (**required**)](#columns-required-object)
-
-## Optional
-* [remote](#remote-bool-object)
-* [noDataIndication](#nodataindication-function)
-* [loading](#loading-bool)
-* [overlay](#overlay-function)
-* [caption](#caption-string-node)
-* [striped](#striped-bool)
-* [bordered](#bordered-bool)
-* [hover](#hover-bool)
-* [condensed](#condensed-bool)
-* [cellEdit](#celledit-object)
-* [selectRow](#selectrow-object)
-* [rowStyle](#rowstyle-object-function)
-* [rowClasses](#rowclasses-string-function)
-* [rowEvents](#rowevents-object)
-* [defaultSorted](#defaultsorted-array)
-* [pagination](#pagination-object)
-* [filter](#filter-object)
-* [onTableChange](#ontablechange-function)
-
------
-
-## 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 supposed to be handle all the table change events, like: pagination, insert, filtering etc.
-This is a chance that you can connect to your remote server or database to manipulate your data.
-For flexibility reason, you can control what functionality should be handled on remote via a object return:
-
-```js
-remote={ {
- filter: true,
- pagination: true,
- 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-function) prop on `BootstrapTable`
-> It's the only way to communicate to your remote server and update table states.
-
-A special case for remote pagination:
-```js
-remote={ { pagination: true, filter: false, sort: false } }
-```
-
-There'r 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.
-
-## noDataIndication - [Function]
-`noDataIndication` should be a callback function which return anything that will be showed in the table when data is **empty**.
-
-## loading - [Bool]
-Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote-bool-object) is enabled.
-When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay-function) prop, if [`overlay`](#overlay-function) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
-
-## overlay - [Function]
-`overlay` accept a factory 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';
-
-
-```
-
-Actually, `react-bootstrap-table2-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
-
-```js
-overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
-```
-
-## 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
-
-```
-
-This prop also accept a callback function for flexible to custom row style:
-
-```js
-const rowStyle = (row, rowIndex) => {
- return { ... };
-};
-
-
-```
-
-## rowClasses - [String | Function]
-Custom the style of table rows:
-
-```js
-
-```
-
-This prop also accept a callback function for flexible to custom row style:
-
-```js
-const rowClasses = (row, rowIndex) => {
- return 'custom-row-class';
-};
-
-
-```
-
-## 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...
-
-
-```
-
-`paginator` is a function actually and allow to pass some pagination options, following we list all the available options:
-
-```js
-paginator({
- page, // Specify the current page. It's necessary when remote is enabled
- sizePerPage, // Specify the size per page. It's necessary when remote is enabled
- totalSize, // Total data size. It's necessary when remote is enabled
- pageStartIndex: 0, // first page will be 0, default is 1
- paginationSize: 3, // the pagination bar size, default is 5
- sizePerPageList: [ {
- text: '5', value: 5
- }, {
- text: '10', value: 10
- }, {
- text: 'All', value: products.length
- } ], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text
- withFirstAndLast: false, // hide the going to first and last page button
- alwaysShowAllBtns: true, // always show the next and previous page button
- firstPageText: 'First', // the text of first page button
- prePageText: 'Prev', // the text of previous page button
- nextPageText: 'Next', // the text of next page button
- lastPageText: 'Last', // the text of last page button
- nextPageTitle: 'Go to next', // the title of next page button
- prePageTitle: 'Go to previous', // the title of previous page button
- firstPageTitle: 'Go to first', // the title of first page button
- lastPageTitle: 'Go to last', // the title of last page button
- hideSizePerPage: true, // hide the size per page dorpdown
- hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
- onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
- onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
-})
-```
-
-## 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-bool-object) enabled only.
-
-```js
-const onTableChange = (type, newState) => {
- // handle any data change here
-}
-
-```
-
-There's only two arguments will be passed to `onTableChange`: `type` and `newState`:
-
-`type` is tell you what kind of functionality to trigger this table's change: available values at the below:
-
-* `filter`
-* `pagination`
-* `sort`
-* `cellEdit`
-
-Following is a shape of `newState`
-
-```js
-{
- page, // newest page
- sizePerPage, // newest sizePerPage
- sortField, // newest sort field
- sortOrder, // newest sort order
- filters, // an object which have current filter status per column
- data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
- cellEdit: { // You can only see this prop when type is cellEdit
- rowId,
- dataField,
- newValue
- }
-}
-```
diff --git a/docs/usage.html b/docs/usage.html
new file mode 100644
index 0000000..6f93032
--- /dev/null
+++ b/docs/usage.html
@@ -0,0 +1,3 @@
+document number 2 · react-bootstrap-table2
\ No newline at end of file
diff --git a/docs/usage.md b/docs/usage.md
deleted file mode 100644
index 3432c41..0000000
--- a/docs/usage.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-id: usage
-title: document number 2
----
-
-This is a link to [another document.](/docs/en/doc3.md)
-This is a link to an [external page.](http://www.example.com)
diff --git a/en/help.html b/en/help.html
new file mode 100644
index 0000000..7168e5b
--- /dev/null
+++ b/en/help.html
@@ -0,0 +1,7 @@
+react-bootstrap-table2 · Next Generation of react-bootstrap-table
\ No newline at end of file
diff --git a/en/index.html b/en/index.html
new file mode 100644
index 0000000..de3ac92
--- /dev/null
+++ b/en/index.html
@@ -0,0 +1,9 @@
+react-bootstrap-table2 · Next Generation of react-bootstrap-table
Satisfy for Redux/Mobx or any other state management tool.
+
react-bootstrap-table2
+
Intuitive to use. Compatitable for Bootstrap 3 and 4. Better than legacy react-bootstrap-table2!!
+
\ No newline at end of file
diff --git a/en/users.html b/en/users.html
new file mode 100644
index 0000000..ab7f6b6
--- /dev/null
+++ b/en/users.html
@@ -0,0 +1 @@
+react-bootstrap-table2 · Next Generation of react-bootstrap-table
\ No newline at end of file
diff --git a/help.html b/help.html
new file mode 100644
index 0000000..b69f477
--- /dev/null
+++ b/help.html
@@ -0,0 +1,7 @@
+react-bootstrap-table2 · Next Generation of react-bootstrap-table
\ No newline at end of file
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 0000000..6baf036
Binary files /dev/null and b/img/.DS_Store differ
diff --git a/website/static/img/docs/basic-sort-caret.png b/img/docs/basic-sort-caret.png
similarity index 100%
rename from website/static/img/docs/basic-sort-caret.png
rename to img/docs/basic-sort-caret.png
diff --git a/img/language.svg b/img/language.svg
new file mode 100644
index 0000000..6619593
--- /dev/null
+++ b/img/language.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/static/img/react-bootstrap-table2-sample.png b/img/react-bootstrap-table2-sample.png
similarity index 100%
rename from website/static/img/react-bootstrap-table2-sample.png
rename to img/react-bootstrap-table2-sample.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1033eda
--- /dev/null
+++ b/index.html
@@ -0,0 +1,9 @@
+react-bootstrap-table2 · Next Generation of react-bootstrap-table
