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)