fix react-bootstrap-table#1144

Author: AllenFang

docs/README.md

@@ -211,7 +211,15 @@ You can give `dataField` and `order` to specify the sorting state in table, For
 ```
 
 #### One-time sorting configuration
-**TBD**
+In earily version, we only can configure [`sortCaret`](./columns.md#sortCaret) and [`sortFunc` ](./columns.md#sortFunc) per column. But they are same in most of cases.   
+So here we give you a chance to just setup these prop in one time.
+
+```js
+<BootstrapTable sort={ {
+  sortCaret: ...
+  sortFunc: ...
+} }>
+```
 
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.

packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js

@@ -0,0 +1,98 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+class OnetimeSortConfiguration extends React.Component {
+  sortFunc = (a, b, order, dataField) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+
+  render() {
+    const sortOption = {
+      // No need to configure sortFunc per column
+      sortFunc: this.sortFunc,
+      // No need to configure sortCaret per column
+      sortCaret: (order, column) => {
+        if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+        else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+        else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+        return null;
+      }
+    };
+
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class OnetimeSortConfiguration extends React.Component {
+  sortFunc = (a, b, order, dataField) => {
+    if (order === 'asc') {
+      return b - a;
+    }
+    return a - b; // desc
+  }
+
+  render() {
+    const sortOption = {
+      sortFunc: this.sortFunc,
+      sortCaret: (order, column) => {
+        if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+        else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+        else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+        return null;
+      }
+    };
+
+    return (
+      <div>
+        <h3>Reverse Sorting Table</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/stories/index.js

@@ -107,6 +107,7 @@ import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
 import SortManagement from 'examples/sort/sort-management';
+import OneTimeSortConfiguration from 'examples/sort/one-time-sort-configuration';
 import CustomSortValue from 'examples/sort/custom-sort-value';
 import CustomSortTable from 'examples/sort/custom-sort-table';
 import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -367,6 +368,7 @@ storiesOf('Sort Table', module)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
   .add('Sort Management', () => <SortManagement />)
+  .add('One-time Sort Configuation', () => <OneTimeSortConfiguration />)
   .add('Custom Sort Value', () => <CustomSortValue />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Sort Caret', () => <CustomSortCaretTable />)

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

@@ -97,6 +97,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             sortField={ this.props.sortField }
             sortOrder={ this.props.sortOrder }
             onSort={ this.props.onSort }
+            globalSortCaret={ this.props.sort && this.props.sort.sortCaret }
             onFilter={ this.props.onFilter }
             currFilters={ this.props.currFilters }
             onExternalFilter={ this.props.onExternalFilter }
@@ -234,7 +235,9 @@ BootstrapTable.propTypes = {
   })),
   sort: PropTypes.shape({
     dataField: PropTypes.string,
-    order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+    order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
+    sortFunc: PropTypes.func,
+    sortCaret: PropTypes.func
   }),
   defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
   overlay: PropTypes.func,

packages/react-bootstrap-table2/src/contexts/sort-context.js

@@ -22,7 +22,8 @@ export default (
       })),
       sort: PropTypes.shape({
         dataField: PropTypes.string,
-        order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+        order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
+        sortFunc: PropTypes.func
       }),
       defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
     }
@@ -92,9 +93,11 @@ export default (
 
     render() {
       let { data } = this.props;
+      const { sort } = this.props;
       const { sortOrder, sortColumn } = this.state;
       if (!isRemoteSort() && sortColumn) {
-        data = dataOperator.sort(data, sortOrder, sortColumn);
+        const sortFunc = sortColumn.sortFunc ? sortColumn.sortFunc : (sort && sort.sortFunc);
+        data = dataOperator.sort(data, sortOrder, { ...sortColumn, sortFunc });
       }
 
       return (

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

@@ -22,7 +22,8 @@ class HeaderCell extends eventDelegater(React.Component) {
       onFilter,
       currFilters,
       filterPosition,
-      onExternalFilter
+      onExternalFilter,
+      globalSortCaret
     } = this.props;
 
     const {
@@ -42,6 +43,8 @@ class HeaderCell extends eventDelegater(React.Component) {
       headerSortingStyle
     } = column;
 
+    const sortCaretfunc = sortCaret || globalSortCaret;
+
     const delegateEvents = this.delegate(headerEvents);
 
     const customAttrs = _.isFunction(headerAttrs)
@@ -81,7 +84,9 @@ class HeaderCell extends eventDelegater(React.Component) {
       cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
       if (sorting) {
-        sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
+        sortSymbol = sortCaretfunc ?
+          sortCaretfunc(sortOrder, column) :
+          <SortCaret order={ sortOrder } />;
 
         // append customized classes or style if table was sorting based on the current column.
         cellClasses = cs(
@@ -98,7 +103,7 @@ class HeaderCell extends eventDelegater(React.Component) {
             : headerSortingStyle
         };
       } else {
-        sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
+        sortSymbol = sortCaretfunc ? sortCaretfunc(undefined, column) : <SortSymbol />;
       }
     }
 

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

@@ -21,7 +21,8 @@ const Header = (props) => {
     expandRow,
     currFilters,
     onExternalFilter,
-    filterPosition
+    filterPosition,
+    globalSortCaret
   } = props;
 
   let SelectionHeaderCellComp = () => null;
@@ -52,6 +53,7 @@ const Header = (props) => {
           onSort={ onSort }
           sorting={ currSort }
           sortOrder={ sortOrder }
+          globalSortCaret={ globalSortCaret }
           isLastSorting={ isLastSorting }
           onFilter={ onFilter }
           currFilters={ currFilters }
@@ -95,6 +97,7 @@ Header.propTypes = {
   selectRow: PropTypes.object,
   currFilters: PropTypes.object,
   onExternalFilter: PropTypes.func,
+  globalSortCaret: PropTypes.func,
   className: PropTypes.string,
   expandRow: PropTypes.object,
   filterPosition: PropTypes.oneOf([