diff --git a/demo/js/demo.js b/demo/js/demo.js
index 9798dfbdf..8983f2148 100644
--- a/demo/js/demo.js
+++ b/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")
 );
diff --git a/examples/js/app.js b/examples/js/app.js
index 3ad1d6f7d..c07912555 100644
--- a/examples/js/app.js
+++ b/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') } />
diff --git a/examples/js/components/App.js b/examples/js/components/App.js
index f49022963..cbfbc4663 100644
--- a/examples/js/components/App.js
+++ b/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'
diff --git a/examples/js/custom-data-access/custom-data-access.js b/examples/js/custom-data-access/custom-data-access.js
new file mode 100644
index 000000000..826813057
--- /dev/null
+++ b/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>
+    );
+  }
+}
+
diff --git a/examples/js/custom-data-access/demo.js b/examples/js/custom-data-access/demo.js
new file mode 100644
index 000000000..cde00b754
--- /dev/null
+++ b/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;
+
diff --git a/package.json b/package.json
index f4150a8f7..8c271d739 100644
--- a/package.json
+++ b/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"
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
index 33d27cdd4..1e656db37 100644
--- a/src/BootstrapTable.js
+++ b/src/BootstrapTable.js
@@ -116,6 +116,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,
diff --git a/src/TableBody.js b/src/TableBody.js
index 1144c6112..c76b08738 100644
--- a/src/TableBody.js
+++ b/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
diff --git a/src/TableHeaderColumn.js b/src/TableHeaderColumn.js
index 2650c2232..cb1db08d3 100644
--- a/src/TableHeaderColumn.js
+++ b/src/TableHeaderColumn.js
@@ -120,6 +120,7 @@ TableHeaderColumn.propTypes = {
   dataSort: PropTypes.bool,
   onSort: PropTypes.func,
   dataFormat: PropTypes.func,
+  dataAccess: PropTypes.func,
   isKey: PropTypes.bool,
   editable: PropTypes.any,
   hidden: PropTypes.bool,
@@ -153,6 +154,7 @@ TableHeaderColumn.defaultProps = {
   dataAlign: 'left',
   dataSort: false,
   dataFormat: undefined,
+  dataAccess: undefined,
   isKey: false,
   editable: true,
   onSort: undefined,
diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js
index 2a211f96c..a5c726705 100644
--- a/src/store/TableDataStore.js
+++ b/src/store/TableDataStore.js
@@ -207,7 +207,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];
 
           switch (filterObj[key].type) {
           case Const.FILTER_TYPE.NUMBER: {