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 fe9d047

Browse files
add export csv stories
1 parent 0b53845 commit fe9d047

File tree

8 files changed

+540
-37
lines changed

8 files changed

+540
-37
lines changed
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
/* eslint no-unused-vars: 0 */
5+
import BootstrapTable from 'react-bootstrap-table-next';
6+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const { ExportCSVButton } = CSVExport;
11+
const products = productsGenerator();
12+
13+
const columns = [{
14+
dataField: 'id',
15+
text: 'Product ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name'
19+
}, {
20+
dataField: 'price',
21+
text: 'Product Price',
22+
csvFormatter: (cell, row, rowIndex) => `$ ${cell}NTD`
23+
}];
24+
25+
const sourceCode = `\
26+
import BootstrapTable from 'react-bootstrap-table-next';
27+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
28+
29+
const { ExportCSVButton } = CSVExport;
30+
const columns = [{
31+
dataField: 'id',
32+
text: 'Product ID'
33+
}, {
34+
dataField: 'name',
35+
text: 'Product Name'
36+
}, {
37+
dataField: 'price',
38+
text: 'Product Price',
39+
csvFormatter: (cell, row, rowIndex) => \`$ \${cell}NTD\`
40+
}];
41+
42+
<ToolkitProvider
43+
keyField="id"
44+
data={ products }
45+
columns={ columns }
46+
exportCSV
47+
>
48+
{
49+
props => (
50+
<div>
51+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
52+
<hr />
53+
<BootstrapTable { ...props.baseProps } />
54+
</div>
55+
)
56+
}
57+
</ToolkitProvider>
58+
`;
59+
60+
export default () => (
61+
<div>
62+
<ToolkitProvider
63+
keyField="id"
64+
data={ products }
65+
columns={ columns }
66+
exportCSV
67+
>
68+
{
69+
props => (
70+
<div>
71+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
72+
<hr />
73+
<BootstrapTable { ...props.baseProps } />
74+
</div>
75+
)
76+
}
77+
</ToolkitProvider>
78+
<Code>{ sourceCode }</Code>
79+
</div>
80+
);
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const { ExportCSVButton } = CSVExport;
10+
const products = productsGenerator();
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name'
18+
}, {
19+
dataField: 'price',
20+
text: 'Product Price',
21+
csvType: Number
22+
}];
23+
24+
const sourceCode = `\
25+
import BootstrapTable from 'react-bootstrap-table-next';
26+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
27+
28+
const { ExportCSVButton } = CSVExport;
29+
const columns = [{
30+
dataField: 'id',
31+
text: 'Product ID'
32+
}, {
33+
dataField: 'name',
34+
text: 'Product Name'
35+
}, {
36+
dataField: 'price',
37+
text: 'Product Price',
38+
csvType: Number
39+
}];
40+
41+
<ToolkitProvider
42+
keyField="id"
43+
data={ products }
44+
columns={ columns }
45+
exportCSV
46+
>
47+
{
48+
props => (
49+
<div>
50+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
51+
<hr />
52+
<BootstrapTable { ...props.baseProps } />
53+
</div>
54+
)
55+
}
56+
</ToolkitProvider>
57+
`;
58+
59+
export default () => (
60+
<div>
61+
<ToolkitProvider
62+
keyField="id"
63+
data={ products }
64+
columns={ columns }
65+
exportCSV
66+
>
67+
{
68+
props => (
69+
<div>
70+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
71+
<hr />
72+
<BootstrapTable { ...props.baseProps } />
73+
</div>
74+
)
75+
}
76+
</ToolkitProvider>
77+
<Code>{ sourceCode }</Code>
78+
</div>
79+
);
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const products = productsGenerator();
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name'
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price'
20+
}];
21+
22+
const sourceCode = `\
23+
import BootstrapTable from 'react-bootstrap-table-next';
24+
import ToolkitProvider from 'react-bootstrap-table2-toolkit';
25+
26+
const columns = [{
27+
dataField: 'id',
28+
text: 'Product ID'
29+
}, {
30+
dataField: 'name',
31+
text: 'Product Name'
32+
}, {
33+
dataField: 'price',
34+
text: 'Product Price'
35+
}];
36+
37+
const MyExportCSV = (props) => {
38+
const handleClick = () => {
39+
props.onExport();
40+
};
41+
return (
42+
<div>
43+
<button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
44+
</div>
45+
);
46+
};
47+
48+
<ToolkitProvider
49+
keyField="id"
50+
data={ products }
51+
columns={ columns }
52+
exportCSV
53+
>
54+
{
55+
props => (
56+
<div>
57+
<BootstrapTable { ...props.baseProps } />
58+
<hr />
59+
<MyExportCSV { ...props.csvProps } />
60+
</div>
61+
)
62+
}
63+
</ToolkitProvider>
64+
`;
65+
66+
const MyExportCSV = (props) => {
67+
const handleClick = () => {
68+
props.onExport();
69+
};
70+
return (
71+
<div>
72+
<button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
73+
</div>
74+
);
75+
};
76+
77+
export default () => (
78+
<div>
79+
<ToolkitProvider
80+
keyField="id"
81+
data={ products }
82+
columns={ columns }
83+
exportCSV
84+
>
85+
{
86+
props => (
87+
<div>
88+
<BootstrapTable { ...props.baseProps } />
89+
<hr />
90+
<MyExportCSV { ...props.csvProps } />
91+
</div>
92+
)
93+
}
94+
</ToolkitProvider>
95+
<Code>{ sourceCode }</Code>
96+
</div>
97+
);
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const { ExportCSVButton } = CSVExport;
10+
const products = productsGenerator();
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID',
15+
csvText: 'CSV Product ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name',
19+
csvText: 'CSV Product Name'
20+
}, {
21+
dataField: 'price',
22+
text: 'Product Price',
23+
csvText: 'CSV Product price'
24+
}];
25+
26+
const sourceCode = `\
27+
import BootstrapTable from 'react-bootstrap-table-next';
28+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
29+
30+
const { ExportCSVButton } = CSVExport;
31+
const columns = [{
32+
dataField: 'id',
33+
text: 'Product ID',
34+
csvText: 'CSV Product ID'
35+
}, {
36+
dataField: 'name',
37+
text: 'Product Name',
38+
csvText: 'CSV Product Name'
39+
}, {
40+
dataField: 'price',
41+
text: 'Product Price',
42+
csvText: 'CSV Product price'
43+
}];
44+
45+
<ToolkitProvider
46+
keyField="id"
47+
data={ products }
48+
columns={ columns }
49+
exportCSV
50+
>
51+
{
52+
props => (
53+
<div>
54+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
55+
<hr />
56+
<BootstrapTable { ...props.baseProps } />
57+
</div>
58+
)
59+
}
60+
</ToolkitProvider>
61+
`;
62+
63+
export default () => (
64+
<div>
65+
<ToolkitProvider
66+
keyField="id"
67+
data={ products }
68+
columns={ columns }
69+
exportCSV
70+
>
71+
{
72+
props => (
73+
<div>
74+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
75+
<hr />
76+
<BootstrapTable { ...props.baseProps } />
77+
</div>
78+
)
79+
}
80+
</ToolkitProvider>
81+
<Code>{ sourceCode }</Code>
82+
</div>
83+
);

0 commit comments

Comments
(0)

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