diff --git a/docs/columns.md b/docs/columns.md
index 55a4003..906536e 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -11,6 +11,7 @@ Available properties in a column object:
* [hidden](#hidden)
* [formatter](#formatter)
* [formatExtraData](#formatExtraData)
+* [type](#type)
* [sort](#sort)
* [sortFunc](#sortFunc)
* [sortCaret](#sortCaret)
@@ -132,6 +133,10 @@ The third argument: `components` have following specified properties:
## column.formatExtraData - [Any]
It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
+## column.type - [String]
+Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`.
+`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
+
## column.sort - [Bool]
Enable the column sort via a `true` value given.
diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js
index e9317e2..ea3c1f0 100644
--- a/packages/react-bootstrap-table2-editor/src/context.js
+++ b/packages/react-bootstrap-table2-editor/src/context.js
@@ -56,12 +56,13 @@ export default (
}
handleCellUpdate(row, column, newValue) {
+ const newValueWithType = dataOperator.typeConvert(column.type, newValue);
const { cellEdit } = this.props;
const { beforeSaveCell } = cellEdit.options;
const oldValue = _.get(row, column.dataField);
const beforeSaveCellDone = (result = true) => {
if (result) {
- this.doUpdate(row, column, newValue);
+ this.doUpdate(row, column, newValueWithType);
} else {
this.escapeEditing();
}
@@ -69,7 +70,7 @@ export default (
if (_.isFunction(beforeSaveCell)) {
const result = beforeSaveCell(
oldValue,
- newValue,
+ newValueWithType,
row,
column,
beforeSaveCellDone
@@ -78,7 +79,7 @@ export default (
return;
}
}
- this.doUpdate(row, column, newValue);
+ this.doUpdate(row, column, newValueWithType);
}
doUpdate(row, column, newValue) {
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js
new file mode 100644
index 0000000..28a064b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js
@@ -0,0 +1,123 @@
+/* eslint prefer-template: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const products = stockGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Stock ID'
+}, {
+ dataField: 'name',
+ text: 'Stock Name'
+}, {
+ dataField: 'price',
+ text: 'Price',
+ type: 'number'
+}, {
+ dataField: 'visible',
+ text: 'Visible?',
+ type: 'bool',
+ editor: {
+ type: Type.CHECKBOX,
+ value: 'true:false'
+ }
+}, {
+ dataField: 'inStockDate',
+ text: 'Stock Date',
+ type: 'date',
+ formatter: (cell) => {
+ let dateObj = cell;
+ if (typeof cell !== 'object') {
+ dateObj = new Date(cell);
+ }
+ return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
+ },
+ editor: {
+ type: Type.DATE
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Stock ID'
+}, {
+ dataField: 'name',
+ text: 'Stock Name'
+}, {
+ dataField: 'price',
+ text: 'Price',
+ type: 'number'
+}, {
+ dataField: 'visible',
+ text: 'Visible?',
+ type: 'bool',
+ editor: {
+ type: Type.CHECKBOX,
+ value: 'true:false'
+ }
+}, {
+ dataField: 'inStockDate',
+ text: 'Stock Date',
+ type: 'date',
+ formatter: (cell) => {
+ let dateObj = cell;
+ if (typeof cell !== 'object') {
+ dateObj = new Date(cell);
+ }
+ return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
+ },
+ editor: {
+ type: Type.DATE
+ }
+}];
+
+function afterSaveCell(oldValue, newValue) {
+ console.log('--after save cell--');
+ console.log('New Value was apply as');
+ console.log(newValue);
+ console.log(\`and the type is $\{typeof newValue}\`);
+}
+
+
{ sourceCode }
+