Merge pull request #368 from dana2208/Pass_extra_data_to_sort_function

When using a custom sort function, pass any other extra data.

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>
+    );
+  }
+}

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>

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
       };
     });

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
 };

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;
   }