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 6875835

Browse files
add stories for #510 
1 parent d136ec3 commit 6875835

File tree

3 files changed

+242
-0
lines changed

3 files changed

+242
-0
lines changed
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
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+
// passing my custom data
69+
props.onExport(products.filter(r => r.id > 2));
70+
};
71+
return (
72+
<div>
73+
<button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
74+
</div>
75+
);
76+
};
77+
78+
export default () => (
79+
<div>
80+
<ToolkitProvider
81+
keyField="id"
82+
data={ products }
83+
columns={ columns }
84+
exportCSV
85+
>
86+
{
87+
props => (
88+
<div>
89+
<BootstrapTable { ...props.baseProps } />
90+
<hr />
91+
<MyExportCSV { ...props.csvProps } />
92+
</div>
93+
)
94+
}
95+
</ToolkitProvider>
96+
<Code>{ sourceCode }</Code>
97+
</div>
98+
);
Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
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 paginationFactory from 'react-bootstrap-table2-paginator';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const { ExportCSVButton } = CSVExport;
11+
const products1 = productsGenerator(15);
12+
const products2 = productsGenerator(15);
13+
14+
const columns = [{
15+
dataField: 'id',
16+
text: 'Product ID'
17+
}, {
18+
dataField: 'name',
19+
text: 'Product Name'
20+
}, {
21+
dataField: 'price',
22+
text: 'Product Price'
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+
}];
40+
41+
const selectRow = {
42+
mode: 'checkbox',
43+
clickToSelect: true
44+
};
45+
46+
<ToolkitProvider
47+
keyField="id"
48+
data={ products1 }
49+
columns={ columns }
50+
exportCSV={ { onlyExportSelection: true, exportAll: true } }
51+
>
52+
{
53+
props => (
54+
<div>
55+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
56+
<hr />
57+
<BootstrapTable
58+
{ ...props.baseProps }
59+
selectRow={ selectRow }
60+
pagination={ paginationFactory() }
61+
/>
62+
</div>
63+
)
64+
}
65+
</ToolkitProvider>
66+
67+
<ToolkitProvider
68+
keyField="id"
69+
data={ products2 }
70+
columns={ columns }
71+
exportCSV={ { onlyExportSelection: true, exportAll: false } }
72+
>
73+
{
74+
props => (
75+
<div>
76+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
77+
<hr />
78+
<BootstrapTable
79+
{ ...props.baseProps }
80+
selectRow={ selectRow }
81+
pagination={ paginationFactory() }
82+
/>
83+
</div>
84+
)
85+
}
86+
</ToolkitProvider>
87+
`;
88+
89+
const selectRow = {
90+
mode: 'checkbox',
91+
clickToSelect: true
92+
};
93+
94+
export default () => (
95+
<div>
96+
<h3>Export all selected row</h3>
97+
<ToolkitProvider
98+
keyField="id"
99+
data={ products1 }
100+
columns={ columns }
101+
exportCSV={ { onlyExportSelection: true, exportAll: true } }
102+
>
103+
{
104+
props => (
105+
<div>
106+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
107+
<hr />
108+
<BootstrapTable
109+
{ ...props.baseProps }
110+
selectRow={ selectRow }
111+
pagination={ paginationFactory() }
112+
/>
113+
</div>
114+
)
115+
}
116+
</ToolkitProvider>
117+
<h3>Export all selected rows in currect visible rows</h3>
118+
<ToolkitProvider
119+
keyField="id"
120+
data={ products2 }
121+
columns={ columns }
122+
exportCSV={ { onlyExportSelection: true, exportAll: false } }
123+
>
124+
{
125+
props => (
126+
<div>
127+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
128+
<hr />
129+
<BootstrapTable
130+
{ ...props.baseProps }
131+
selectRow={ selectRow }
132+
pagination={ paginationFactory() }
133+
/>
134+
</div>
135+
)
136+
}
137+
</ToolkitProvider>
138+
<Code>{ sourceCode }</Code>
139+
</div>
140+
);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,10 @@ import ExportCSV from 'examples/csv';
146146
import CSVFormatter from 'examples/csv/csv-column-formatter';
147147
import CustomCSVHeader from 'examples/csv/custom-csv-header';
148148
import HideCSVColumn from 'examples/csv/hide-column';
149+
import ExportOnlySelected from 'examples/csv/export-only-selected';
149150
import CSVColumnType from 'examples/csv/csv-column-type';
150151
import CustomCSVButton from 'examples/csv/custom-csv-button';
152+
import ExportCustomData from 'examples/csv/export-custom-data';
151153
import CustomCSV from 'examples/csv/custom-csv';
152154

153155
// loading overlay
@@ -330,8 +332,10 @@ storiesOf('Export CSV', module)
330332
.add('Format CSV Column', () => <CSVFormatter />)
331333
.add('Custom CSV Header', () => <CustomCSVHeader />)
332334
.add('Hide CSV Column', () => <HideCSVColumn />)
335+
.add('Only Export Selected Rows', () => <ExportOnlySelected />)
333336
.add('CSV Column Type', () => <CSVColumnType />)
334337
.add('Custom CSV Button', () => <CustomCSVButton />)
338+
.add('Export Custom Data', () => <ExportCustomData />)
335339
.add('Custom CSV', () => <CustomCSV />);
336340

337341
storiesOf('EmptyTableOverlay', module)

0 commit comments

Comments
(0)

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