allow boostrap table to multiple-sort

* Record all values of columns sort order in the table of sortOrder

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -74,7 +74,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
           <Header
             columns={ columns }
             sortField={ this.store.sortField }
-            sortOrder={ this.store.sortOrder }
+            sortOrderTable={ this.store.sortOrderTable }
             onSort={ this.handleSort }
             selectRow={ headerCellSelectionInfo }
           />

packages/react-bootstrap-table2/src/const.js

@@ -1,6 +1,8 @@
 export default {
+  SORT_UNSET: 'unset',
   SORT_ASC: 'asc',
   SORT_DESC: 'desc',
+  SORT_UNSORTABLE: 'unsortable',
   UNABLE_TO_CELL_EDIT: 'none',
   CLICK_TO_CELL_EDIT: 'click',
   DBCLICK_TO_CELL_EDIT: 'dbclick',

packages/react-bootstrap-table2/src/header-cell.js

@@ -19,7 +19,6 @@ const HeaderCell = (props) => {
   } = props;
   const {
     text,
-    sort,
     hidden,
     headerTitle,
     headerAlign,
@@ -60,7 +59,7 @@ const HeaderCell = (props) => {
 
   if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
 
-  if (sort) {
+  if (sortOrder !== Const.SORT_UNSORTABLE) {
     const customClick = cellAttrs.onClick;
     cellAttrs.onClick = (e) => {
       onSort(column);
@@ -68,10 +67,10 @@ const HeaderCell = (props) => {
     };
     cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
-    if (sorting) {
-      sortSymbol = <SortCaret order={ sortOrder } />;
-    } else {
+    if (sortOrder === Const.SORT_UNSET) {
       sortSymbol = <SortSymbol />;
+    } else {
+      sortSymbol = <SortCaret order={ sortOrder } sorting={sorting} />;
     }
   }
 
@@ -106,7 +105,9 @@ HeaderCell.propTypes = {
   index: PropTypes.number.isRequired,
   onSort: PropTypes.func,
   sorting: PropTypes.bool,
-  sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC])
+  sortOrder: PropTypes.oneOf([
+    Const.SORT_UNSET, Const.SORT_ASC, Const.SORT_DESC, Const.SORT_UNSORTABLE
+  ])
 };
 
 export default HeaderCell;

packages/react-bootstrap-table2/src/header.js

@@ -13,7 +13,7 @@ const Header = (props) => {
     columns,
     onSort,
     sortField,
-    sortOrder,
+    sortOrderTable,
     selectRow
   } = props;
 
@@ -33,7 +33,7 @@ const Header = (props) => {
                 column={ column }
                 onSort={ onSort }
                 sorting={ currSort }
-                sortOrder={ sortOrder }
+                sortOrder={ sortOrderTable[column.dataField] }
               />);
           })
         }
@@ -46,7 +46,7 @@ Header.propTypes = {
   columns: PropTypes.array.isRequired,
   onSort: PropTypes.func,
   sortField: PropTypes.string,
-  sortOrder: PropTypes.string,
+  sortOrderTable: PropTypes.object,
   selectRow: PropTypes.object
 };
 

packages/react-bootstrap-table2/src/sort-caret.js

@@ -4,18 +4,24 @@ import PropTypes from 'prop-types';
 
 import Const from './const';
 
-const SortCaret = ({ order }) => {
+const SortCaret = ({ order, sorting }) => {
   const orderClass = cs('react-bootstrap-table-sort-order', {
     dropup: order === Const.SORT_ASC
   });
+
+  const iconClass = cs('caret', {
+    sorting
+  });
+
   return (
     <span className={ orderClass }>
-      <span className="caret" />
+      <span className={ iconClass } />
     </span>
   );
 };
 
 SortCaret.propTypes = {
-  order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired
+  order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired,
+  sorting: PropTypes.bool.isRequired
 };
 export default SortCaret;

packages/react-bootstrap-table2/src/store/base.js

@@ -1,4 +1,4 @@
-import { sort } from './sort';
+import { sort, getSortOrderTable } from './sort';
 import Const from '../const';
 import _ from '../utils';
 
@@ -8,7 +8,7 @@ export default class Store {
     this.keyField = keyField;
     this.data = data ? data.slice() : [];
 
-    this.sortOrder = undefined;
+    this.sortOrderTable = getSortOrderTable(props);
     this.sortField = undefined;
     this.selected = [];
   }
@@ -18,13 +18,22 @@ export default class Store {
   }
 
   sortBy({ dataField, sortFunc }) {
-    if (dataField !== this.sortField) {
-      this.sortOrder = Const.SORT_DESC;
-    } else {
-      this.sortOrder = this.sortOrder === Const.SORT_DESC ? Const.SORT_ASC : Const.SORT_DESC;
+    let order;
+
+    switch (this.sortOrderTable[dataField]) {
+      case Const.SORT_UNSET:
+        order = Const.SORT_DESC;
+        break;
+      case Const.SORT_DESC:
+        order = Const.SORT_ASC;
+        break;
+      default:
+        order = Const.SORT_DESC;
+        break;
     }
 
-    this.data = sort(dataField, this.data, this.sortOrder, sortFunc);
+    this.sortOrderTable[dataField] = order;
+    this.data = sort(dataField, this.data, this.sortOrderTable[dataField], sortFunc);
     this.sortField = dataField;
   }
 

packages/react-bootstrap-table2/src/store/sort.js

@@ -37,4 +37,24 @@ const sort = (dataField, data, order, sortFunc) => {
   return _data;
 };
 
-export { sort };
+/**
+ *
+ * @param {Object} props - store props.
+ * @param {Object} props.columns - columns passing by user.
+ *
+ * @return {Object} - return table which contains initial sort order.
+ */
+const getSortOrderTable = ({ columns }) => {
+  const sortOrderTable = {};
+  const { SORT_UNSET, SORT_UNSORTABLE } = Const;
+
+  columns.forEach((column) => {
+    const { dataField, sort: sortable } = column;
+
+    sortOrderTable[dataField] = sortable ? SORT_UNSET : SORT_UNSORTABLE;
+  });
+
+  return sortOrderTable;
+};
+
+export { sort, getSortOrderTable };