Skip to content

Commit b765661

Browse files
AllenFangAllenFang
authored
Merge pull request #522 from react-bootstrap-table/feat/510
Feat/510
2 parents 37db43f + 6875835 commit b765661

File tree

9 files changed

+282
-8
lines changed

9 files changed

+282
-8
lines changed

‎packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js‎

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+
);

‎packages/react-bootstrap-table2-example/examples/csv/export-only-selected.js‎

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)

‎packages/react-bootstrap-table2-toolkit/README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,7 @@ Default is `false`. Give true to avoid to attach the csv header.
123123
Default is `true`.
124124

125125
#### exportAll - [bool]
126-
Default is `true`. `false` will only export current data which display on table.
126+
Default is `true`. `false` will only export current data which display on table.
127+
128+
#### onlyExportSelection - [bool]
129+
Default is `false`. `true` will only export the data which is selected.

‎packages/react-bootstrap-table2-toolkit/context.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
2626
fileName: PropTypes.string,
2727
separator: PropTypes.string,
2828
ignoreHeader: PropTypes.bool,
29-
noAutoBOM: PropTypes.bool
29+
noAutoBOM: PropTypes.bool,
30+
exportAll: PropTypes.bool,
31+
onlyExportSelection: PropTypes.bool
3032
})
3133
])
3234
}

‎packages/react-bootstrap-table2-toolkit/src/csv/button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const ExportCSVButton = (props) => {
1111
return (
1212
<button
1313
type="button"
14-
onClick={ onExport }
14+
onClick={ () => onExport() }
1515
{ ...rest }
1616
>
1717
{ children }

‎packages/react-bootstrap-table2-toolkit/src/op/csv.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ const csvDefaultOptions = {
55
separator: ',',
66
ignoreHeader: false,
77
noAutoBOM: true,
8-
exportAll: true
8+
exportAll: true,
9+
onlyExportSelection: false
910
};
1011

1112
export default Base =>
1213
class CSVOperation extends Base {
13-
handleExportCSV = () => {
14-
const { columns, exportCSV } = this.props;
14+
handleExportCSV = (source) => {
15+
const { columns, exportCSV, keyField } = this.props;
1516
const meta = getMetaInfo(columns);
1617
const options = exportCSV === true ?
1718
csvDefaultOptions :
@@ -20,7 +21,19 @@ export default Base =>
2021
...exportCSV
2122
};
2223

23-
const data = options.exportAll ? this.props.data : this.getData();
24+
// get data for csv export
25+
let data;
26+
if (typeof source !== 'undefined') {
27+
data = source;
28+
} else {
29+
data = options.exportAll ? this.props.data : this.getData();
30+
}
31+
32+
// filter data
33+
if (options.onlyExportSelection) {
34+
const selections = this.getSelected();
35+
data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
36+
}
2437
const content = transform(data, meta, this._.get, options);
2538
save(content, options);
2639
}

‎packages/react-bootstrap-table2/src/contexts/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,8 +269,9 @@ const withContext = Base =>
269269
}
270270

271271
render() {
272-
const { keyField, columns, bootstrap4 } = this.props;
272+
const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
273273
const baseProps = { keyField, columns };
274+
if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
274275

275276
let base = this.renderBase();
276277

‎packages/react-bootstrap-table2/src/contexts/selection-context.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ export default (
1515
keyField: PropTypes.string.isRequired
1616
}
1717

18+
constructor(props) {
19+
super(props);
20+
if (props.registerExposedAPI) {
21+
const getSelected = () => this.getSelected();
22+
props.registerExposedAPI(getSelected);
23+
}
24+
}
25+
1826
state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
1927

2028
componentWillReceiveProps(nextProps) {
@@ -25,6 +33,11 @@ export default (
2533
}
2634
}
2735

36+
// exposed API
37+
getSelected() {
38+
return this.state.selected;
39+
}
40+
2841
handleRowSelect = (rowKey, checked, rowIndex, e) => {
2942
const { data, keyField, selectRow: { mode, onSelect } } = this.props;
3043
const { ROW_SELECT_SINGLE } = Const;

0 commit comments

Comments
 (0)