work on docs

docs/basic-column.md

@@ -0,0 +1,37 @@
+---
+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.
+
+-----
+
+## Formatting Table Column
+
+[`column.formatter`](./column-props.html#columnformatter-function) is a good chance for you to customize the cell. If you just want to add some styling, attributes or DOM event linstener, `react-bootstrap-table2` have respective props to handle:
+
+* [`column.style`](./column-props.html#columnstyle-object-function)
+* [`column.classes`](./column-props.html#columnclasses-string-function)
+* [`column.events`](./column-props.html#columnevents-object)
+* [`column.attrs`](./column-props.html#columnattrs-object-function)
+
+In addition, we also give some useful props to let you have a quickly configuration:
+
+* [`column.hidden`](./column-props.html#columnhidden-bool)
+* [`column.title`](./column-props.html#columntitle-bool-function)
+* [`column.align`](./column-props.html#columnalign-string-function)
+* *Welcome to submit a PR or issue for asking a convinence props for column :)*
+
+## Formatting Table Header
+Formatting header column is almost same as column formatting, we got [`column.headerFormatter`](./column-props.html#columnheaderformatter-function) to let you customize the content of a header column. Default `react-bootstrap-table2` will take [`column.text`](./column-props.html#columntext-required-string) as the content of header column.
+
+Following, we list some useful props for customization:
+
+* [`column.headerStyle`](./column-props.html#columnheaderstyle-object-function)
+* [`column.headerClasses`](./column-props.html#columnheaderclasses-string-function)
+* [`column.headerEvents`](./column-props.html#columnheaderevents-object)
+* [`column.headerAttrs`](./column-props.html#columnheaderattrs-object-function)
+* [`column.headerTitle`](./column-props.html#columnheadertitle-bool-function)
+* [`column.headerAlign`](./column-props.html#columnheaderalign-string-function)

docs/basic-row-select.md

@@ -0,0 +1,32 @@
+---
+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.
+
+-----
+
+## 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.

docs/basic-sort.md

@@ -0,0 +1,64 @@
+---
+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.
+
+## 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'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+```
+
+After table rendered, you can see the Product ID and Product Name will have a caret icon beside the column name:
+![sort caret](/react-bootstrap-table2/img/docs/basic-sort-caret.png)
+
+## Control Sorting
+### Default Sort
+`react-bootstrap-table2` will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via [`defaultSorted`](./table-props.html#defaultsorted-array).
+
+### 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!**

docs/row-select-props.md

@@ -10,8 +10,8 @@ title: Row Selection Props
 * [style](#selectrowstyle-object-function)
 * [classes](#selectrowclasses-string-function)
 * [bgColor](#selectrowbgcolor-string-function)
-* [nonSelectable)](#selectrownonselectable-array)
-* [clickToSelect)](#selectrowclicktoselect-bool)
+* [nonSelectable](#selectrownonselectable-array)
+* [clickToSelect](#selectrowclicktoselect-bool)
 * [clickToEdit](#selectrowclicktoedit-bool)
 * [onSelect](#selectrowonselect-function)
 * [onSelectAll](#selectrowonselectall-function)

website/i18n/en.json

@@ -6,6 +6,12 @@
     "tagline": "Next Generation of react-bootstrap-table",
     "about": "react-bootstrap-table2",
     "About": "About",
+    "basic-column": "Work on Column",
+    "Work on Column": "Work on Column",
+    "basic-row-select": "Row Selection",
+    "Row Selection": "Row Selection",
+    "basic-sort": "Table Sort",
+    "Table Sort": "Table Sort",
     "cell-edit-props": "Cell Editing Props",
     "column-props": "Columns Props",
     "filter-props": "Column Filter Props",
@@ -19,7 +25,7 @@
     "API": "API",
     "Help": "Help",
     "Blog": "Blog",
-    "Usage": "Usage",
+    "Basic Usage": "Basic Usage",
     "Table Definitation": "Table Definitation",
     "Column Definitation": "Column Definitation",
     "Cell Editing Definitation": "Cell Editing Definitation",

website/sidebars.json

@@ -4,7 +4,11 @@
       "about",
       "getting-started"
     ],
-    "Usage": ["usage"]
+    "Basic Usage": [
+      "basic-column",
+      "basic-sort",
+      "basic-row-select"
+    ]
   },
   "api": {
     "Table Definitation": [