examples for #1086

Author: AllenFang

examples/js/manipulation/demo.js

@@ -116,6 +116,7 @@ class Demo extends React.Component {
               <h5>Source in /examples/js/manipulation/export-csv-table.js</h5>
               <h5><b>Use <code>csvFormat</code> to format cell when exporting.</b></h5>
               <h5><b>Use <code>csvHeader</code> to change the header text in csv.</b></h5>
+              <h5><b>Use <code>csvFormatExtraData</code> to assign your extra data for formatting csv cell data.</b></h5>
               <ExportCSVTable />
             </div>
           </div>

examples/js/manipulation/export-csv-table.js

@@ -6,14 +6,21 @@ import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 
 const products = [];
 
+const qualityType = {
+  0: 'good',
+  1: 'bad',
+  2: 'unknown'
+};
+
 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
+      price: 2100 + i,
+      quality: i % 3
     });
   }
 }
@@ -22,16 +29,21 @@ addProducts(5);
 
 export default class ExportCSVTable extends React.Component {
 
-  csvFormatter(cell, row) {
+  csvPriceFormatter(cell, row) {
     return `${row.id}: ${cell} USD`;
   }
 
+  csvQualityFormatter(cell, row, extra) {
+    return extra[cell];
+  }
+
   render() {
     return (
       <BootstrapTable data={ products } exportCSV={ true }>
           <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
           <TableHeaderColumn dataField='name' csvHeader='product-name'>Product Name</TableHeaderColumn>
-          <TableHeaderColumn dataField='price' csvFormat={ this.csvFormatter }>Product Price</TableHeaderColumn>
+          <TableHeaderColumn dataField='price' csvFormat={ this.csvPriceFormatter }>Product Price</TableHeaderColumn>
+          <TableHeaderColumn dataField='quality' csvFormat={ this.csvQualityFormatter } csvFormatExtraData={ qualityType }>Product Quality</TableHeaderColumn>
       </BootstrapTable>
     );
   }