diff --git a/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js b/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js new file mode 100644 index 0000000..50da9b7 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js @@ -0,0 +1,98 @@ +/* eslint react/prop-types: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const MyExportCSV = (props) => { + const handleClick = () => { + props.onExport(); + }; + return ( +
+ +
+ ); +}; + + + { + props => ( +
+ +
+ +
+ ) + } +
+`; + +const MyExportCSV = (props) => { + const handleClick = () => { + // passing my custom data + props.onExport(products.filter(r => r.id > 2)); + }; + return ( +
+ +
+ ); +}; + +export default () => ( +
+ + { + props => ( +
+ +
+ +
+ ) + } +
+ { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/examples/csv/export-only-selected.js b/packages/react-bootstrap-table2-example/examples/csv/export-only-selected.js new file mode 100644 index 0000000..e260f53 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/csv/export-only-selected.js @@ -0,0 +1,140 @@ +/* eslint react/prop-types: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const { ExportCSVButton } = CSVExport; +const products1 = productsGenerator(15); +const products2 = productsGenerator(15); + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit'; + +const { ExportCSVButton } = CSVExport; +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const selectRow = { + mode: 'checkbox', + clickToSelect: true +}; + + + { + props => ( +
+ Export CSV!! +
+ +
+ ) + } +
+ + + { + props => ( +
+ Export CSV!! +
+ +
+ ) + } +
+`; + +const selectRow = { + mode: 'checkbox', + clickToSelect: true +}; + +export default () => ( +
+

Export all selected row

+ + { + props => ( +
+ Export CSV!! +
+ +
+ ) + } +
+

Export all selected rows in currect visible rows

+ + { + props => ( +
+ Export CSV!! +
+ +
+ ) + } +
+ { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 45fb5cc..0c652db 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -146,8 +146,10 @@ import ExportCSV from 'examples/csv'; import CSVFormatter from 'examples/csv/csv-column-formatter'; import CustomCSVHeader from 'examples/csv/custom-csv-header'; import HideCSVColumn from 'examples/csv/hide-column'; +import ExportOnlySelected from 'examples/csv/export-only-selected'; import CSVColumnType from 'examples/csv/csv-column-type'; import CustomCSVButton from 'examples/csv/custom-csv-button'; +import ExportCustomData from 'examples/csv/export-custom-data'; import CustomCSV from 'examples/csv/custom-csv'; // loading overlay @@ -330,8 +332,10 @@ storiesOf('Export CSV', module) .add('Format CSV Column', () => ) .add('Custom CSV Header', () => ) .add('Hide CSV Column', () => ) + .add('Only Export Selected Rows', () => ) .add('CSV Column Type', () => ) .add('Custom CSV Button', () => ) + .add('Export Custom Data', () => ) .add('Custom CSV', () => ); storiesOf('EmptyTableOverlay', module) diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md index f26c366..0886862 100644 --- a/packages/react-bootstrap-table2-toolkit/README.md +++ b/packages/react-bootstrap-table2-toolkit/README.md @@ -123,4 +123,7 @@ Default is `false`. Give true to avoid to attach the csv header. Default is `true`. #### exportAll - [bool] -Default is `true`. `false` will only export current data which display on table. \ No newline at end of file +Default is `true`. `false` will only export current data which display on table. + +#### onlyExportSelection - [bool] +Default is `false`. `true` will only export the data which is selected. \ No newline at end of file diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js index d12a7f0..eba442e 100644 --- a/packages/react-bootstrap-table2-toolkit/context.js +++ b/packages/react-bootstrap-table2-toolkit/context.js @@ -26,7 +26,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) { fileName: PropTypes.string, separator: PropTypes.string, ignoreHeader: PropTypes.bool, - noAutoBOM: PropTypes.bool + noAutoBOM: PropTypes.bool, + exportAll: PropTypes.bool, + onlyExportSelection: PropTypes.bool }) ]) } diff --git a/packages/react-bootstrap-table2-toolkit/src/csv/button.js b/packages/react-bootstrap-table2-toolkit/src/csv/button.js index d0ee010..e85d7ee 100644 --- a/packages/react-bootstrap-table2-toolkit/src/csv/button.js +++ b/packages/react-bootstrap-table2-toolkit/src/csv/button.js @@ -11,7 +11,7 @@ const ExportCSVButton = (props) => { return (