example for using select editor with text and value customization

Author: AllenFang

examples/js/advance/edit-type-table.js

@@ -4,7 +4,24 @@ import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 
 
 const jobs = [];
-const jobTypes = [ 'A', 'B', 'C', 'D' ];
+// editable, select type also accept a string array
+// it's most simple case for using select, but the text and value will all be the value in array
+// const jobTypes = [ 'A', 'B', 'C', 'D' ];
+//
+// Following case will be more easy to control the text and value in select.
+const jobTypes = [ {
+  value: 'A',
+  text: 'TYPE_A'
+}, {
+  value: 'B',
+  text: 'TYPE_B'
+}, {
+  value: 'C',
+  text: 'TYPE_C'
+}, {
+  value: 'D',
+  text: 'TYPE_D'
+} ];
 
 function addJobs(quantity) {
   const startId = jobs.length;
@@ -28,12 +45,21 @@ const cellEditProp = {
 };
 
 export default class EditTypeTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.formatType = this.formatType.bind(this);
+  }
+
+  formatType(cell) {
+    return `TYPE_${cell}`;
+  }
+
   render() {
     return (
       <BootstrapTable data={ jobs } cellEdit={ cellEditProp }>
         <TableHeaderColumn dataField='id' isKey={ true }>Job ID</TableHeaderColumn>
         <TableHeaderColumn dataField='name' editable={ { type: 'textarea' } }>Job Name</TableHeaderColumn>
-        <TableHeaderColumn dataField='type' editable={ { type: 'select', options: { values: jobTypes } } }>Job Type</TableHeaderColumn>
+        <TableHeaderColumn dataField='type' dataFormat={ this.formatType } editable={ { type: 'select', options: { values: jobTypes } } }>Job Type</TableHeaderColumn>
         <TableHeaderColumn dataField='active' editable={ { type: 'checkbox', options: { values: 'Y:N' } } }>Active</TableHeaderColumn>
         <TableHeaderColumn dataField='datetime' editable={ { type: 'datetime' } }>Date Time</TableHeaderColumn>
       </BootstrapTable>