Merge pull request #1486 from jogoodma/custom-tsv-csv-button

Custom CSV/TSV download button

Author: AllenFang

examples/js/custom/csv-button/custom-csv-or-tsv-button.js

@@ -0,0 +1,98 @@
+/* eslint max-len: 0 */
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 0 */
+import React, { PropTypes } from 'react';
+import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+// Initialize the product array.
+const products = [];
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+addProducts(5);
+
+/*
+Custom Download button that uses the DropdownButton component
+from react-bootstrap.
+*/
+function DownloadButton({ bootStrapTableOnClick, onSelect }) {
+  /*
+  This handler is fired by the react-bootstrap DropdownButton component
+  when the user has selected an export option (tsv or csv).  It passes
+  in the eventKey from the MenuItem that was selected by the user.
+   */
+  function handleOnSelect(eventKey) {
+    /*
+    Fire the user specified action and pass the key
+    and react-bootstrap-table onClick function.
+    */
+    onSelect(eventKey, bootStrapTableOnClick);
+  }
+  return (
+    <div>
+      <DropdownButton bsStyle='default' title='Export' id='export' onSelect={ handleOnSelect }>
+        <MenuItem eventKey='csv'>CSV</MenuItem>
+        <MenuItem eventKey='tsv'>TSV</MenuItem>
+      </DropdownButton>
+    </div>
+  );
+}
+DownloadButton.propTypes = {
+  // The onClick handler received from react-bootstrap-table.
+  bootStrapTableOnClick: PropTypes.func.isRequired,
+  // A handler that fires when the user selects an export option.
+  onSelect: PropTypes.func.isRequired
+};
+
+class CustomCSVOrTSVButtonTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      extension: 'csv',
+      separator: ','
+    };
+    this.updateExportOpts = this.updateExportOpts.bind(this);
+    this.getFilename = this.getFilename.bind(this);
+  }
+
+  getFilename() {
+    return 'spreadsheet' + '.' + this.state.extension;
+  }
+
+  updateExportOpts(format, tableOnClick) {
+    /*
+      Here we pass the react-bootstrap-table onClick event handler to setState
+      to ensure that it gets called after the state has been mutated.
+     */
+    if (format === 'tsv') {
+      this.setState({ extension: 'tsv', separator: '\t' }, tableOnClick);
+    } else {
+      this.setState({ extension: 'csv', separator: ',' }, tableOnClick);
+    }
+  }
+
+  render() {
+    const options = {
+      exportCSVBtn: (onClick) => <DownloadButton bootStrapTableOnClick={ onClick } onSelect={ this.updateExportOpts } />,
+      exportCSVSeparator: this.state.separator
+    };
+    return (
+      <BootstrapTable data={ products } options={ options } csvFileName={ this.getFilename } exportCSV={ true }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}
+export default CustomCSVOrTSVButtonTable;

examples/js/custom/demo.js

@@ -17,6 +17,7 @@ import DefaultCustomShowSelectButtonTable from './show-only-select-button/defaul
 import FullyCustomShowSelectButtonTable from './show-only-select-button/fully-custom-show-select-button';
 import DefaultCustomExportCSVButtonTable from './csv-button/default-custom-csv-button';
 import FullyCustomExportCSVButtonTable from './csv-button/fully-custom-csv-button';
+import CustomCSVOrTSVButtonTable from './csv-button/custom-csv-or-tsv-button';
 import DefaultCustomClearButtonTable from './search/default-custom-search-clear-button';
 import FullyCustomClearButtonTable from './search/fully-custom-search-clear-button';
 import DefaultCustomSearchFieldTable from './search/default-custom-search-field';
@@ -88,6 +89,10 @@ class Demo extends React.Component {
           { renderLinks('custom/csv-button/fully-custom-csv-button.js') }
           <FullyCustomExportCSVButtonTable/>
         </Panel>
+        <Panel header={ 'Custom CSV or TSV export button.' }>
+          { renderLinks('custom/csv-button/custom-csv-or-tsv-button.js') }
+          <CustomCSVOrTSVButtonTable />
+        </Panel>
         <Panel header={ 'Default Custom for Show Only Select Button Demo' }>
           { renderLinks('custom/show-only-select-button/default-custom-show-select-button.js') }
           <DefaultCustomShowSelectButtonTable/>