Feat/cell editor

.travis.yml

@@ -5,16 +5,17 @@ node_js:
  - "6"
 
 cache:
- yarn: true
+ directories:
+ - node_modules
 
 branches:
  only:
  # skip master branch when it's under development phase
  # - master 
  - develop
 
-before_install:
- - curl -o- -L https://yarnpkg.com/install.sh | bash -s
- - export PATH="$HOME/.yarn/bin:$PATH"
+# before_install:
+#  - curl -o- -L https://yarnpkg.com/install.sh | bash -s
+#  - export PATH="$HOME/.yarn/bin:$PATH"
 
-install: yarn --frozen-lockfile
+# install: yarn --frozen-lockfile

docs/README.md

@@ -2,6 +2,18 @@
 
 ## Props on BootstrapTable
 
+#### Required
+* [keyField (**required**)](#keyField)
+* [data (**required**)](#data)
+* [columns (**required**)](#columns)
+
+#### Optional
+* [striped](#striped)
+* [bordered](#bordered)
+* [hover](#hover)
+* [condensed](#condensed)
+* [cellEdit](#cellEdit)
+
 ### <a name='keyField'>keyField(**required**) - [String]</a>
 `keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key.
 
@@ -18,4 +30,29 @@ Same as `.table-bordered` class for adding borders on all sides of the table and
 ### <a name='hover'>hover - [Bool]</a>
 Same as `.table-hover` class for adding a hover effect (grey background color) on table rows
 ### <a name='condensed'>condensed - [Bool]</a>
-Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half
+Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half
+
+### <a name='cellEdit'>cellEdit - [Bool]</a>
+Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing.
+
+> Note: The `keyField` column can't be edited
+
+Following is a `cellEdit` object:
+```js
+{
+ mode: 'click',
+ blurToSave: true,
+ onEditing: (rowId, dataField, newValue) => { ... },
+ beforeSaveCell: (oldValue, newValue, row, column) => { ... },
+ afterSaveCell: (oldValue, newValue, row, column) => { ... },
+ nonEditableRows: () => { ... }
+}
+```
+#### <a name='cellEdit.mode'>cellEdit.mode - [String]</a>
+`cellEdit.mode` possible value is `click` and `dbclick`. It's required value that tell `react-bootstrap-table2` how to trigger the cell editing.
+
+#### <a name='cellEdit.blurToSave'>cellEdit.blurToSave - [Bool]</a>
+Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
+
+#### <a name='cellEdit.nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
+`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`)

docs/columns.md

@@ -25,6 +25,7 @@ Available properties in a column object:
 * [headerEvents](#headerEvents)
 * [headerAlign](#headerAlign)
 * [headerAttrs](#headerAttrs)
+* [editable](#editable)
 
 Following is a most simplest and basic usage:
 
@@ -411,5 +412,9 @@ Additionally, customize the header attributes by a `2-arguments` callback functi
 
 A new `Object` will be the result of element headerAttrs.
 
-#### * Caution
-Same as [column.attrs](#attrs), it has lower priority and will be overwrited when other props related to HTML attributes were given.
+> Caution: 
+> Same as [column.attrs](#attrs), it has lower priority and will be
+> overwrited when other props related to HTML attributes were given.
+
+## <a name='editable'>column.editable - [Bool]</a>
+`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`.

package.json

@@ -42,6 +42,8 @@
  "eslint-plugin-react": "^7.2.1",
  "html-webpack-plugin": "^2.30.1",
  "jest": "^20.0.4",
+ "jsdom": "^11.2.0",
+ "jsdom-global": "^3.0.2",
  "lerna": "^2.0.0",
  "node-sass": "^4.5.3",
  "react-test-renderer": "^15.6.1",
@@ -71,7 +73,7 @@
  ],
  "testEnvironment": "node",
  "testMatch": [
- "**/test/**/*.js"
+ "**/test/**/*.test.js"
  ]
  }
 }

packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const cellEdit = {
+ mode: 'click',
+ blurToSave: true
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'click',
+ blurToSave: true
+};
+export default () => (
+ <div>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js

@@ -0,0 +1,58 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const cellEdit = {
+ mode: 'click',
+ beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+ afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'click',
+ beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+ afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+};
+export default () => (
+ <div>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const cellEdit = {
+ mode: 'click'
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'click'
+};
+export default () => (
+ <div>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ editable: false
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+ // Product Name column can't be edit anymore
+ editable: false
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const cellEdit = {
+ mode: 'click',
+ blurToSave: true
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'click',
+ blurToSave: true
+};
+export default () => (
+ <div>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { BootstrapTableful } from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const cellEdit = {
+ mode: 'dbclick'
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'dbclick'
+};
+export default () => (
+ <div>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);