add story for validator for cell editor

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

@@ -0,0 +1,85 @@
+import React from 'react';
+/* eslint no-unused-vars: 0 */
+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',
+ validator: (newValue, row, column) => {
+ if (isNaN(newValue)) {
+ return {
+ valid: false,
+ message: 'Price should be numeric'
+ };
+ }
+ if (newValue < 2000) {
+ return {
+ valid: false,
+ message: 'Price should bigger than 2000'
+ };
+ }
+ return true;
+ }
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ validator: (newValue, row, column) => {
+ if (isNaN(newValue)) {
+ return {
+ valid: false,
+ message: 'Price should be numeric'
+ };
+ }
+ if (newValue < 2000) {
+ return {
+ valid: false,
+ message: 'Price should bigger than 2000'
+ };
+ }
+ return true;
+ }
+}];
+
+const cellEdit = {
+ mode: 'click',
+ blurToSave: true
+};
+
+<BootstrapTableful
+ keyField='id'
+ data={ products }
+ columns={ columns }
+ cellEdit={ cellEdit }
+/>
+`;
+
+const cellEdit = {
+ mode: 'click',
+ blurToSave: true
+};
+export default () => (
+ <div>
+ <h3>Product Price should bigger than $2000</h3>
+ <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -42,6 +42,7 @@ import BlurToSaveTable from 'examples/cell-edit/blur-to-save-table';
 import RowLevelEditableTable from 'examples/cell-edit/row-level-editable-table';
 import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-table';
 import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table';
+import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -92,4 +93,5 @@ storiesOf('Cell Editing', module)
  .add('Blur to Save Cell', () => <BlurToSaveTable />)
  .add('Row Level Editable', () => <RowLevelEditableTable />)
  .add('Column Level Editable', () => <ColumnLevelEditableTable />)
- .add('Rich Hook Functions', () => <CellEditHooks />);
+ .add('Rich Hook Functions', () => <CellEditHooks />)
+ .add('Validation', () => <CellEditValidator />);