mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-12 04:00:16 +00:00
fix #63 (part1 - cell editing validation)
* implement cell editing validation * add test cases for cell editing validation * add story for validator for cell editor * add docs for cell editor validation
This commit is contained in:
+85
@@ -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>
|
||||
);
|
||||
Reference in New Issue
Block a user