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 b765661

Browse files
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
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)

‎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)

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