add cell edit

docs/basic-celledit.md

@@ -0,0 +1,61 @@
+---
+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
+
+-----
+
+## 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
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
+/>
+```
+
+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!

website/i18n/en.json

@@ -6,6 +6,8 @@
     "tagline": "Next Generation of react-bootstrap-table",
     "about": "react-bootstrap-table2",
     "About": "About",
+    "basic-celledit": "Cell Edit",
+    "Cell Edit": "Cell Edit",
     "basic-column": "Work on Column",
     "Work on Column": "Work on Column",
     "basic-filter": "Column Filter",

website/sidebars.json

@@ -8,7 +8,8 @@
       "basic-column",
       "basic-sort",
       "basic-row-select",
-      "basic-filter"
+      "basic-filter",
+      "basic-celledit"
     ]
   },
   "api": {