custom data accessor

Author: jdeniau

demo/js/demo.js

@@ -13,7 +13,9 @@ function addProducts(quantity) {
       price: 100 + i,
       supplierId: id+2,
       discount: "10%",
-      categoryId: "catorage-"+id+6
+      category: {
+        id: "catorage-"+id+6,
+      },
     });
   }
 }
@@ -92,7 +94,7 @@ React.render(
       <TableHeaderColumn dataField="price" width="100px" dataFormat={priceFormatter} editable={false}>Product Price</TableHeaderColumn>
       <TableHeaderColumn dataField="supplierId" editable={true}>Supplier ID</TableHeaderColumn>
       <TableHeaderColumn dataField="discount" editable={false}>Discount(Percentage)</TableHeaderColumn>
-      <TableHeaderColumn dataField="categoryId" editable={true}>Category ID</TableHeaderColumn>
+      <TableHeaderColumn dataField="categoryId" dataAccess={(item) => item.category.id} editable={true}>Category ID</TableHeaderColumn>
   </BootstrapTable>,
 	document.getElementById("basic")
 );

examples/js/app.js

@@ -18,6 +18,7 @@ const routes = (
       <Route path='getting-started' component={ GettingStarted }/>
       <Route path='examples'>
         <Route path='basic' component={ require('./basic/demo') } />
+        <Route path='custom-data-access' component={ require('./custom-data-access/demo') } />
         <Route path='column' component={ require('./column/demo') } />
         <Route path='sort' component={ require('./sort/demo') } />
         <Route path='column-format' component={ require('./column-format/demo') } />

examples/js/components/App.js

@@ -36,6 +36,9 @@ class App extends React.Component {
     const examples = [ {
       text: 'Basic Table',
       href: 'basic'
+    }, {
+      text: 'Custom Data Access',
+      href: 'custom-data-access'
     }, {
       text: 'Work on Column',
       href: 'column'

examples/js/custom-data-access/custom-data-access.js

@@ -0,0 +1,41 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+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,
+      category: {
+        id: 20 + i,
+        name: 'Category name ' + i
+      }
+    });
+  }
+}
+
+addProducts(5);
+
+function categoryName(product) {
+  return product.category.name;
+}
+
+export default class TrClassStringTable extends React.Component {
+  render() {
+    return (
+      <BootstrapTable data={ products }>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price' dataAccess={ categoryName }>Category name</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}
+

examples/js/custom-data-access/demo.js

@@ -0,0 +1,24 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import CustomDataAccessTable from './custom-data-access';
+
+class Demo extends React.Component {
+  render() {
+    return (
+      <div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Use a custom function to access data</div>
+            <div className='panel-body'>
+              <h5>Source in /examples/js/custom-data-access/custom-data-access.js</h5>
+              <CustomDataAccessTable />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Demo;
+

package.json

@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "classnames": "^2.1.2",
-    "react-toastr": "^2.3.1"
+    "react-toastr": "2.4.0"
   },
   "peerDependencies": {
     "react": "^0.14.3 || ^15.0.0"

src/BootstrapTable.js

@@ -118,6 +118,7 @@ class BootstrapTable extends Component {
     return React.Children.map(children, (column, i) => {
       return {
         name: column.props.dataField,
+        dataAccess: column.props.dataAccess,
         align: column.props.dataAlign,
         sort: column.props.dataSort,
         format: column.props.dataFormat,

src/TableBody.js

@@ -32,7 +32,10 @@ class TableBody extends Component {
 
     const tableRows = this.props.data.map(function(data, r) {
       const tableColumns = this.props.columns.map(function(column, i) {
-        const fieldValue = data[column.name];
+        const fieldValue = typeof column.dataAccess === 'function' ?
+          column.dataAccess(data) :
+          data[column.name];
+
         if (this.editing &&
           column.name !== this.props.keyField && // Key field can't be edit
           column.editable && // column is editable? default is true, user can set it false

src/TableHeaderColumn.js

@@ -130,9 +130,10 @@ TableHeaderColumn.propTypes = {
   headerAlign: PropTypes.string,
   dataSort: PropTypes.bool,
   onSort: PropTypes.func,
-  dataFormat: PropTypes.func,
   csvFormat: PropTypes.func,
   csvHeader: PropTypes.string,
+  dataAccess: PropTypes.func,
+  dataFormat: PropTypes.func,
   isKey: PropTypes.bool,
   editable: PropTypes.any,
   hidden: PropTypes.bool,
@@ -168,9 +169,10 @@ TableHeaderColumn.defaultProps = {
   dataAlign: 'left',
   headerAlign: undefined,
   dataSort: false,
-  dataFormat: undefined,
   csvFormat: undefined,
   csvHeader: undefined,
+  dataAccess: undefined,
+  dataFormat: undefined,
   isKey: false,
   editable: true,
   onSort: undefined,

src/store/TableDataStore.js

@@ -386,7 +386,9 @@ export class TableDataStore {
       let valid = true;
       let filterVal;
       for (const key in filterObj) {
-        let targetVal = row[key];
+        let targetVal = typeof this.colInfos[key].dataAccess === 'function' ?
+          this.colInfos[key].dataAccess(row) :
+          row[key];
         if (targetVal === null) return false;
 
         switch (filterObj[key].type) {