Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 21344ec

Browse files
refine cell edit stories
1 parent 39be018 commit 21344ec

11 files changed

+151
-119
lines changed

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

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
import BootstrapTable from 'react-bootstrap-table2';
4+
import cellEditFactory from 'react-bootstrap-table2-editor';
45
import Code from 'components/common/code-block';
56
import { productsGenerator } from 'utils/common';
67

@@ -18,6 +19,8 @@ const columns = [{
1819
}];
1920

2021
const sourceCode = `\
22+
import cellEditFactory from 'react-bootstrap-table2-editor';
23+
// ...
2124
const columns = [{
2225
dataField: 'id',
2326
text: 'Product ID'
@@ -29,26 +32,28 @@ const columns = [{
2932
text: 'Product Price'
3033
}];
3134
32-
const cellEdit = {
33-
mode: 'click',
34-
blurToSave: true
35-
};
36-
3735
<BootstrapTable
38-
keyField='id'
36+
keyField="id"
3937
data={ products }
4038
columns={ columns }
41-
cellEdit={ cellEdit }
39+
cellEdit={ cellEditFactory({
40+
mode: 'click',
41+
blurToSave: true
42+
}) }
4243
/>
4344
`;
4445

45-
const cellEdit = {
46-
mode: 'click',
47-
blurToSave: true
48-
};
4946
export default () => (
5047
<div>
51-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
48+
<BootstrapTable
49+
keyField="id"
50+
data={ products }
51+
columns={ columns }
52+
cellEdit={ cellEditFactory({
53+
mode: 'click',
54+
blurToSave: true
55+
}) }
56+
/>
5257
<Code>{ sourceCode }</Code>
5358
</div>
5459
);

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
56
import Code from 'components/common/code-block';
67
import { productsGenerator } from 'utils/common';
78

@@ -22,6 +23,8 @@ const columns = [{
2223
}];
2324

2425
const sourceCode = `\
26+
import cellEditFactory from 'react-bootstrap-table2-editor';
27+
// ...
2528
const columns = [{
2629
dataField: 'id',
2730
text: 'Product ID'
@@ -36,24 +39,22 @@ const columns = [{
3639
(cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
3740
}];
3841
39-
const cellEdit = {
40-
mode: 'click'
41-
};
42-
4342
<BootstrapTable
44-
keyField='id'
43+
keyField="id"
4544
data={ products }
4645
columns={ columns }
47-
cellEdit={ cellEdit }
46+
cellEdit={ cellEditFactory({ mode: 'click' }) }
4847
/>
4948
`;
5049

51-
const cellEdit = {
52-
mode: 'click'
53-
};
5450
export default () => (
5551
<div>
56-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
52+
<BootstrapTable
53+
keyField="id"
54+
data={ products }
55+
columns={ columns }
56+
cellEdit={ cellEditFactory({ mode: 'click' }) }
57+
/>
5758
<Code>{ sourceCode }</Code>
5859
</div>
5960
);

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

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React from 'react';
44

55
import BootstrapTable from 'react-bootstrap-table2';
6+
import cellEditFactory from 'react-bootstrap-table2-editor';
67
import Code from 'components/common/code-block';
78
import { productsGenerator } from 'utils/common';
89

@@ -20,6 +21,8 @@ const columns = [{
2021
}];
2122

2223
const sourceCode = `\
24+
import cellEditFactory from 'react-bootstrap-table2-editor';
25+
// ...
2326
const columns = [{
2427
dataField: 'id',
2528
text: 'Product ID'
@@ -31,28 +34,30 @@ const columns = [{
3134
text: 'Product Price'
3235
}];
3336
34-
const cellEdit = {
35-
mode: 'click',
36-
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
37-
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
38-
};
39-
4037
<BootstrapTable
41-
keyField='id'
38+
keyField="id"
4239
data={ products }
4340
columns={ columns }
44-
cellEdit={ cellEdit }
41+
cellEdit={ cellEditFactory({
42+
mode: 'click',
43+
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
44+
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
45+
}) }
4546
/>
4647
`;
4748

48-
const cellEdit = {
49-
mode: 'click',
50-
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
51-
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
52-
};
5349
export default () => (
5450
<div>
55-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
51+
<BootstrapTable
52+
keyField="id"
53+
data={ products }
54+
columns={ columns }
55+
cellEdit={ cellEditFactory({
56+
mode: 'click',
57+
beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
58+
afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
59+
}) }
60+
/>
5661
<Code>{ sourceCode }</Code>
5762
</div>
5863
);

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
56
import Code from 'components/common/code-block';
67
import { productsGenerator } from 'utils/common';
78

@@ -26,6 +27,8 @@ const columns = [{
2627
}];
2728

2829
const sourceCode = `\
30+
import cellEditFactory from 'react-bootstrap-table2-editor';
31+
// ...
2932
const columns = [{
3033
dataField: 'id',
3134
text: 'Product ID'
@@ -44,24 +47,22 @@ const columns = [{
4447
}
4548
}];
4649
47-
const cellEdit = {
48-
mode: 'click'
49-
};
50-
5150
<BootstrapTable
52-
keyField='id'
51+
keyField="id"
5352
data={ products }
5453
columns={ columns }
55-
cellEdit={ cellEdit }
54+
cellEdit={ cellEditFactory({ mode: 'click' }) }
5655
/>
5756
`;
5857

59-
const cellEdit = {
60-
mode: 'click'
61-
};
6258
export default () => (
6359
<div>
64-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
60+
<BootstrapTable
61+
keyField="id"
62+
data={ products }
63+
columns={ columns }
64+
cellEdit={ cellEditFactory({ mode: 'click' }) }
65+
/>
6566
<Code>{ sourceCode }</Code>
6667
</div>
6768
);

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

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from 'react';
21
/* eslint no-unused-vars: 0 */
2+
import React from 'react';
33
import BootstrapTable from 'react-bootstrap-table2';
4+
import cellEditFactory from 'react-bootstrap-table2-editor';
45
import Code from 'components/common/code-block';
56
import { productsGenerator } from 'utils/common';
67

@@ -33,6 +34,8 @@ const columns = [{
3334
}];
3435

3536
const sourceCode = `\
37+
import cellEditFactory from 'react-bootstrap-table2-editor';
38+
// ...
3639
const columns = [{
3740
dataField: 'id',
3841
text: 'Product ID'
@@ -59,27 +62,29 @@ const columns = [{
5962
}
6063
}];
6164
62-
const cellEdit = {
63-
mode: 'click',
64-
blurToSave: true
65-
};
66-
6765
<BootstrapTable
68-
keyField='id'
66+
keyField="id"
6967
data={ products }
7068
columns={ columns }
71-
cellEdit={ cellEdit }
69+
cellEdit={ cellEditFactory({
70+
mode: 'click',
71+
blurToSave: true
72+
}) }
7273
/>
7374
`;
7475

75-
const cellEdit = {
76-
mode: 'click',
77-
blurToSave: true
78-
};
7976
export default () => (
8077
<div>
8178
<h3>Product Price should bigger than 2000ドル</h3>
82-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
79+
<BootstrapTable
80+
keyField="id"
81+
data={ products }
82+
columns={ columns }
83+
cellEdit={ cellEditFactory({
84+
mode: 'click',
85+
blurToSave: true
86+
}) }
87+
/>
8388
<Code>{ sourceCode }</Code>
8489
</div>
8590
);

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
56
import Code from 'components/common/code-block';
67
import { productsGenerator } from 'utils/common';
78

@@ -20,6 +21,8 @@ const columns = [{
2021
}];
2122

2223
const sourceCode = `\
24+
import cellEditFactory from 'react-bootstrap-table2-editor';
25+
// ...
2326
const columns = [{
2427
dataField: 'id',
2528
text: 'Product ID'
@@ -32,24 +35,22 @@ const columns = [{
3235
editable: (content, row, rowIndex, columnIndex) => content > 2101
3336
}];
3437
35-
const cellEdit = {
36-
mode: 'click'
37-
};
38-
3938
<BootstrapTable
40-
keyField='id'
39+
keyField="id"
4140
data={ products }
4241
columns={ columns }
43-
cellEdit={ cellEdit }
42+
cellEdit={ cellEditFactory({ mode: 'click' }) }
4443
/>
4544
`;
4645

47-
const cellEdit = {
48-
mode: 'click'
49-
};
5046
export default () => (
5147
<div>
52-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
48+
<BootstrapTable
49+
keyField="id"
50+
data={ products }
51+
columns={ columns }
52+
cellEdit={ cellEditFactory({ mode: 'click' }) }
53+
/>
5354
<Code>{ sourceCode }</Code>
5455
</div>
5556
);

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
/* eslint react/prefer-stateless-function: 0 */
12
import React from 'react';
23

34
import BootstrapTable from 'react-bootstrap-table2';
5+
import cellEditFactory from 'react-bootstrap-table2-editor';
46
import Code from 'components/common/code-block';
57
import { productsGenerator } from 'utils/common';
68

@@ -18,6 +20,8 @@ const columns = [{
1820
}];
1921

2022
const sourceCode = `\
23+
import cellEditFactory from 'react-bootstrap-table2-editor';
24+
// ...
2125
const columns = [{
2226
dataField: 'id',
2327
text: 'Product ID'
@@ -29,24 +33,22 @@ const columns = [{
2933
text: 'Product Price'
3034
}];
3135
32-
const cellEdit = {
33-
mode: 'click'
34-
};
35-
3636
<BootstrapTable
37-
keyField='id'
37+
keyField="id"
3838
data={ products }
3939
columns={ columns }
40-
cellEdit={ cellEdit }
40+
cellEdit={ cellEditFactory({ mode: 'click' }) }
4141
/>
4242
`;
4343

44-
const cellEdit = {
45-
mode: 'click'
46-
};
4744
export default () => (
4845
<div>
49-
<BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
46+
<BootstrapTable
47+
keyField="id"
48+
data={ products }
49+
columns={ columns }
50+
cellEdit={ cellEditFactory({ mode: 'click' }) }
51+
/>
5052
<Code>{ sourceCode }</Code>
5153
</div>
5254
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /