add stories for #510

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 (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+    </div>
+  );
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <BootstrapTable { ...props.baseProps } />
+        <hr />
+        <MyExportCSV { ...props.csvProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    // passing my custom data
+    props.onExport(products.filter(r => r.id > 2));
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
+    </div>
+  );
+};
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV
+    >
+      {
+        props => (
+          <div>
+            <BootstrapTable { ...props.baseProps } />
+            <hr />
+            <MyExportCSV { ...props.csvProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products1 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: true } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+
+<ToolkitProvider
+  keyField="id"
+  data={ products2 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: false } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+export default () => (
+  <div>
+    <h3>Export all selected row</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products1 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: true } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <h3>Export all selected rows in currect visible rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products2 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: false } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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', () => <CSVFormatter />)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
+  .add('Only Export Selected Rows', () => <ExportOnlySelected />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
+  .add('Export Custom Data', () => <ExportCustomData />)
   .add('Custom CSV', () => <CustomCSV />);
 
 storiesOf('EmptyTableOverlay', module)