From 231a4033b8066aebae3239fe139515b6cd7ff266 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Thu, 11 Jan 2018 23:16:33 +0800
Subject: [PATCH] add cell edit

---
 docs/basic-celledit.md | 61 ++++++++++++++++++++++++++++++++++++++++++
 website/i18n/en.json   |  2 ++
 website/sidebars.json  |  3 ++-
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 docs/basic-celledit.md

diff --git a/docs/basic-celledit.md b/docs/basic-celledit.md
new file mode 100644
index 0000000..a838777
--- /dev/null
+++ b/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!
\ No newline at end of file
diff --git a/website/i18n/en.json b/website/i18n/en.json
index 0d9cb7e..5cb94cb 100644
--- a/website/i18n/en.json
+++ b/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",
diff --git a/website/sidebars.json b/website/sidebars.json
index 93ea8a9..10cb2c2 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -8,7 +8,8 @@
       "basic-column",
       "basic-sort",
       "basic-row-select",
-      "basic-filter"
+      "basic-filter",
+      "basic-celledit"
     ]
   },
   "api": {