vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-06-28 21:20:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refine cell edit stories

Browse Source
This commit is contained in:
AllenFang
2018-01-06 17:15:42 +08:00
parent 39be018327
commit 21344ec4b3
11 changed files with 151 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -18,6 +19,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -29,26 +32,28 @@ const columns = [{
text: 'Product Price'
}];
const cellEdit = {
mode: 'click',
blurToSave: true
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true
}) }
/>
`;
const cellEdit = {
mode: 'click',
blurToSave: true
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true
}) }
/>
<Code>{ sourceCode }</Code>
</div>
);

21
packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js vendored
View File

@@ -2,6 +2,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -22,6 +23,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -36,24 +39,22 @@ const columns = [{
(cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
}];
const cellEdit = {
mode: 'click'
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
`;
const cellEdit = {
mode: 'click'
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
<Code>{ sourceCode }</Code>
</div>
);

33
packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js vendored
View File

@@ -3,6 +3,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -20,6 +21,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -31,28 +34,30 @@ const columns = [{
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!!'); }
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({
mode: 'click',
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
}) }
/>
`;
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>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({
mode: 'click',
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
}) }
/>
<Code>{ sourceCode }</Code>
</div>
);

21
packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js vendored
View File

@@ -2,6 +2,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -26,6 +27,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -44,24 +47,22 @@ const columns = [{
}
}];
const cellEdit = {
mode: 'click'
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
`;
const cellEdit = {
mode: 'click'
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
<Code>{ sourceCode }</Code>
</div>
);

31
packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js vendored
View File

@@ -1,6 +1,7 @@
import React from 'react';
/* eslint no-unused-vars: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -33,6 +34,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -59,27 +62,29 @@ const columns = [{
}
}];
const cellEdit = {
mode: 'click',
blurToSave: true
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true
}) }
/>
`;
const cellEdit = {
mode: 'click',
blurToSave: true
};
export default () => (
<div>
<h3>Product Price should bigger than $2000</h3>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true
}) }
/>
<Code>{ sourceCode }</Code>
</div>
);

21
packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js vendored
View File

@@ -2,6 +2,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -20,6 +21,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -32,24 +35,22 @@ const columns = [{
editable: (content, row, rowIndex, columnIndex) => content > 2101
}];
const cellEdit = {
mode: 'click'
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
`;
const cellEdit = {
mode: 'click'
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
<Code>{ sourceCode }</Code>
</div>
);

22
packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js vendored
View File

@@ -1,6 +1,8 @@
/* eslint react/prefer-stateless-function: 0 */
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -18,6 +20,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -29,24 +33,22 @@ const columns = [{
text: 'Product Price'
}];
const cellEdit = {
mode: 'click'
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
`;
const cellEdit = {
mode: 'click'
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'click' }) }
/>
<Code>{ sourceCode }</Code>
</div>
);

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

@@ -1,6 +1,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -19,6 +20,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -32,26 +35,28 @@ const columns = [{
text: 'Product Price'
}];
const cellEdit = {
mode: 'click',
blurToSave: true
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true
}) }
/>
`;
const cellEdit = {
mode: 'click',
blurToSave: true
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true
}) }
/>
<Code>{ sourceCode }</Code>
</div>
);

21
packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js vendored
View File

@@ -1,6 +1,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -18,6 +19,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -29,24 +32,22 @@ const columns = [{
text: 'Product Price'
}];
const cellEdit = {
mode: 'dbclick'
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
/>
`;
const cellEdit = {
mode: 'dbclick'
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
/>
<Code>{ sourceCode }</Code>
</div>
);

35
packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js vendored
View File

@@ -1,6 +1,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -18,6 +19,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const columns = [{
dataField: 'id',
text: 'Product ID'
@@ -29,29 +32,29 @@ const columns = [{
text: 'Product Price'
}];
const cellEdit = {
mode: 'click',
blurToSave: true,
// Product ID: 0, 3 will be non-editable
nonEditableRows: () => [0, 3]
};
<BootstrapTable
keyField='id'
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true,
nonEditableRows: () => [0, 3]
}) }
/>
`;
const cellEdit = {
mode: 'click',
blurToSave: true,
nonEditableRows: () => [0, 3]
};
export default () => (
<div>
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({
mode: 'click',
blurToSave: true,
nonEditableRows: () => [0, 3]
}) }
/>
<Code>{ sourceCode }</Code>
</div>
);

7
packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js vendored
View File

@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import BootstrapTable from 'react-bootstrap-table2';
import cellEditFactory from 'react-bootstrap-table2-editor';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -18,6 +19,8 @@ const columns = [{
}];
const sourceCode = `\
import cellEditFactory from 'react-bootstrap-table2-editor';
// ...
const RemoteCellEdit = (props) => {
const cellEdit = {
mode: 'click',
@@ -31,7 +34,7 @@ const RemoteCellEdit = (props) => {
keyField="id"
data={ props.data }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory(cellEdit) }
onTableChange={ props.onTableChange }
/>
<Code>{ sourceCode }</Code>
@@ -104,7 +107,7 @@ const RemoteCellEdit = (props) => {
keyField="id"
data={ props.data }
columns={ columns }
cellEdit={ cellEdit }
cellEdit={ cellEditFactory(cellEdit) }
onTableChange={ props.onTableChange }
/>
<Code>{ sourceCode }</Code>