From b4a64cd1f340d0141aa81f0a38bbdd3b148a4059 Mon Sep 17 00:00:00 2001
From: Dana Zaharoni <dana.zaharoni@gmail.com>
Date: Mon, 28 Mar 2016 09:55:56 +0300
Subject: [PATCH] Whe nusing a custom sort function, pass any other extra data.
 The example shows how a column that displays enum values can be sorted
 according to those values and not the enum number. const qualityType = {   0:
 'good',   1: 'bad',   2: 'unknown' }; Indeed, instead of sorting item tables
 according to the enum keys 0, 1 and 2 it is possible to sort now by the enum
 values "good", "bad" and "unknown" alphabetically which makes more sense
 since this is what the user can see. ASC order will show "bad" items, then
 "good" items then "unknown" items (alphabetical order is respected), instead
 of showing "good", then "bad", then "unknown".

---
 .../sort/custom-sort-with-extra-data-table.js | 61 +++++++++++++++++++
 examples/js/sort/demo.js                      | 10 +++
 src/BootstrapTable.js                         |  1 +
 src/TableHeaderColumn.js                      |  2 +
 src/store/TableDataStore.js                   |  8 +--
 5 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 examples/js/sort/custom-sort-with-extra-data-table.js

diff --git a/examples/js/sort/custom-sort-with-extra-data-table.js b/examples/js/sort/custom-sort-with-extra-data-table.js
new file mode 100644
index 000000000..6b2c50d33
--- /dev/null
+++ b/examples/js/sort/custom-sort-with-extra-data-table.js
@@ -0,0 +1,61 @@
+import React from 'react';
+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,
+      quality: i % 3
+    });
+  }
+}
+
+addProducts(5);
+
+function enumFormatter(cell, row, enumObject) {
+  return enumObject[cell];
+}
+
+function sortByName(a, b, order, field, enumObject) {
+  if (order === 'desc') {
+    if (enumObject[a[field]] > enumObject[b[field]]) {
+      return -1;
+    } else if (enumObject[a[field]] < enumObject[b[field]]) {
+      return 1;
+    }
+    return 0;
+  }
+  if (enumObject[a[field]] < enumObject[b[field]]) {
+    return -1;
+  } else if (enumObject[a[field]] > enumObject[b[field]]) {
+    return 1;
+  }
+  return 0;
+}
+
+export default class CustomSortWithExtraDataTable extends React.Component {
+  render() {
+    return (
+      <BootstrapTable data={ products }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='quality'
+                           dataFormat={ enumFormatter } formatExtraData={ qualityType }
+                           dataSort={ true }
+                           sortFunc={ sortByName } sortFuncExtraData={ qualityType }>
+          Product Quality</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}
diff --git a/examples/js/sort/demo.js b/examples/js/sort/demo.js
index ae1f0c878..1e4ca73ec 100755
--- a/examples/js/sort/demo.js
+++ b/examples/js/sort/demo.js
@@ -3,6 +3,7 @@ import React from 'react';
 import SortTable from './sort-table';
 import DefaultSortTable from './default-sort-table';
 import CustomSortTable from './custom-sort-table';
+import CustomSortWithExtraDataTable from './custom-sort-with-extra-data-table';
 import ReusableCustomSortTable from './reusable-custom-sort-table';
 import SortHookTable from './sort-hook-table';
 import DisableSortIndicatorTable from './disable-sort-indicator-table';
@@ -38,6 +39,15 @@ class Demo extends React.Component {
             </div>
           </div>
         </div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Customize Table Sort With Extra Data Example</div>
+            <div className='panel-body'>
+              <h5>Source in /examples/js/sort/custom-sort-with-extra-data-table.js</h5>
+              <CustomSortWithExtraDataTable />
+            </div>
+          </div>
+        </div>
         <div className='col-md-offset-1 col-md-8'>
           <div className='panel panel-default'>
             <div className='panel-heading'>Reusable Customize Table Sort Example</div>
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
index bcd0453c9..db6cc537e 100644
--- a/src/BootstrapTable.js
+++ b/src/BootstrapTable.js
@@ -126,6 +126,7 @@ class BootstrapTable extends Component {
         width: column.props.width,
         text: column.props.children,
         sortFunc: column.props.sortFunc,
+        sortFuncExtraData: column.props.sortFuncExtraData,
         index: i
       };
     });
diff --git a/src/TableHeaderColumn.js b/src/TableHeaderColumn.js
index f8f83643f..594887766 100644
--- a/src/TableHeaderColumn.js
+++ b/src/TableHeaderColumn.js
@@ -123,6 +123,7 @@ TableHeaderColumn.propTypes = {
   className: PropTypes.string,
   width: PropTypes.string,
   sortFunc: PropTypes.func,
+  sortFuncExtraData: PropTypes.any,
   columnClassName: PropTypes.any,
   filterFormatted: PropTypes.bool,
   sort: PropTypes.string,
@@ -159,6 +160,7 @@ TableHeaderColumn.defaultProps = {
   filterFormatted: false,
   sort: undefined,
   formatExtraData: undefined,
+  sortFuncExtraData: undefined,
   filter: undefined,
   sortIndicator: true
 };
diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js
index a2682c76a..f275e3087 100644
--- a/src/store/TableDataStore.js
+++ b/src/store/TableDataStore.js
@@ -4,11 +4,11 @@
 /* eslint eqeqeq: 0 */
 import Const from '../Const';
 
-function _sort(arr, sortField, order, sortFunc) {
+function _sort(arr, sortField, order, sortFunc, sortFuncExtraData) {
   order = order.toLowerCase();
   arr.sort((a, b) => {
     if (sortFunc) {
-      return sortFunc(a, b, order, sortField);
+      return sortFunc(a, b, order, sortField, sortFuncExtraData);
     } else {
       if (order === Const.SORT_DESC) {
         return a[sortField] > b[sortField] ? -1 : ((a[sortField] < b[sortField]) ? 1 : 0);
@@ -93,8 +93,8 @@ export class TableDataStore {
     let currentDisplayData = this.getCurrentDisplayData();
     if (!this.colInfos[sortField]) return this;
 
-    const { sortFunc } = this.colInfos[sortField];
-    currentDisplayData = _sort(currentDisplayData, sortField, order, sortFunc);
+    const { sortFunc, sortFuncExtraData } = this.colInfos[sortField];
+    currentDisplayData = _sort(currentDisplayData, sortField, order, sortFunc, sortFuncExtraData);
 
     return this;
   }