fix #852

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

@@ -0,0 +1,102 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator(150);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const { SearchBar } = Search;
+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={ products }
+  columns={ columns }
+  exportCSV={ { onlyExportFiltered: true, exportAll: false } }
+  search
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <SearchBar { ...props.searchProps } />
+        <BootstrapTable
+          { ...props.baseProps }
+          pagination={ paginationFactory() }
+          filter={ filterFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <h3>Export all the filtered/searched rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV={ { onlyExportFiltered: true, exportAll: false } }
+      search
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <SearchBar { ...props.searchProps } />
+            <BootstrapTable
+              { ...props.baseProps }
+              pagination={ paginationFactory() }
+              filter={ filterFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -192,6 +192,7 @@ 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 ExportOnlyFiltered from 'examples/csv/export-only-filtered';
 import CSVColumnType from 'examples/csv/csv-column-type';
 import CustomCSVButton from 'examples/csv/custom-csv-button';
 import ExportCustomData from 'examples/csv/export-custom-data';
@@ -443,6 +444,7 @@ storiesOf('Export CSV', module)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
   .add('Only Export Selected Rows', () => <ExportOnlySelected />)
+  .add('Only Export Filtered/Searched Rows', () => <ExportOnlyFiltered />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
   .add('Export Custom Data', () => <ExportCustomData />)

packages/react-bootstrap-table2-filter/src/context.js

@@ -91,6 +91,10 @@ export default (
       };
     }
 
+    getFiltered() {
+      return this.data;
+    }
+
     doFilter(props, customResult, ignoreEmitDataChange = false) {
       let result = customResult;
 

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

@@ -191,6 +191,11 @@ 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.
 
+#### onlyExportFiltered - [bool]
+Default is `false`. `true` will only export the data which is filtered/searched.
+
+>> When you configure this prop as true, you must turn off `exportAll`.
+
 -----
 
 ## Column Toggle

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

@@ -30,6 +30,7 @@ class ToolkitProvider extends statelessDecorator(React.Component) {
         ignoreHeader: PropTypes.bool,
         noAutoBOM: PropTypes.bool,
         exportAll: PropTypes.bool,
+        onlyExportFiltered: PropTypes.bool,
         onlyExportSelection: PropTypes.bool
       })
     ])

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

@@ -27,19 +27,24 @@ export default Base =>
         data = source;
       } else if (options.exportAll) {
         data = this.props.data;
+      } else if (options.onlyExportFiltered) {
+        const payload = {};
+        this.tableExposedAPIEmitter.emit('get.filtered.rows', payload);
+        data = payload.result;
       } else {
         const payload = {};
         this.tableExposedAPIEmitter.emit('get.table.data', payload);
         data = payload.result;
       }
 
-      // filter data
+      // filter data by row selection
       if (options.onlyExportSelection) {
         const payload = {};
         this.tableExposedAPIEmitter.emit('get.selected.rows', payload);
         const selections = payload.result;
         data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
       }
+
       const content = transform(data, meta, this._.get, options);
       save(content, options);
     }

packages/react-bootstrap-table2-toolkit/src/search/context.js

@@ -59,6 +59,10 @@ export default (options = {
       }
     }
 
+    getSearched() {
+      return this.state.data;
+    }
+
     triggerListener(result) {
       if (this.props.dataChangeListener) {
         this.props.dataChangeListener.emit('filterChanged', result.length);

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

@@ -23,6 +23,15 @@ const withContext = Base =>
         const exposedAPIEmitter = new EventEmitter();
         exposedAPIEmitter.on('get.table.data', payload => payload.result = this.table.getData());
         exposedAPIEmitter.on('get.selected.rows', payload => payload.result = this.selectionContext.getSelected());
+        exposedAPIEmitter.on('get.filtered.rows', (payload) => {
+          if (this.searchContext) {
+            payload.result = this.searchContext.getSearched();
+          } else if (this.filterContext) {
+            payload.result = this.filterContext.getFiltered();
+          } else {
+            payload.result = this.table.getData();
+          }
+        });
         props.registerExposedAPI(exposedAPIEmitter);
       }