fix #1180

Author: AllenFang

docs/README.md

@@ -28,6 +28,7 @@
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
 * [hiddenRows](#hiddenRows)
+* [sort](#sort)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
@@ -199,6 +200,19 @@ const hiddenRows = [1, 4];
 <BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
 ```
 
+### <a name='sort'>sort - [Object]</a>
+Two cases you probably need to configure `sort` prop:
+
+#### Manage sorting state
+You can give `dataField` and `order` to specify the sorting state in table, For example
+
+```js
+<BootstrapTable sort={ { dataField: 'price', order: 'asc' } }>
+```
+
+#### One-time sorting configuration
+**TBD**
+
 ### <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/sort-management.js

@@ -0,0 +1,118 @@
+/* eslint no-console: 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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class SortManagement extends React.Component {
+  state = {
+    field: null,
+    order: null
+  }
+
+  handleSort = (field, order) => {
+    this.setState({
+      field,
+      order
+    });
+  }
+
+  handleSortById = () => {
+    this.setState({
+      field: 'id',
+      order: 'desc'
+    });
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+    return (
+      <div>
+        <button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          sort={ {
+            dataField: this.state.field,
+            order: this.state.order
+          } }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class SortManagement extends React.Component {
+  state = {
+    field: null,
+    order: null
+  }
+
+  handleSort = (field, order) => {
+    this.setState({
+      field,
+      order
+    });
+  }
+
+  handleSortById = () => {
+    this.setState({
+      field: 'id',
+      order: 'desc'
+    });
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      sort: true,
+      onSort: this.handleSort
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }];
+    return (
+      <div>
+        <button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          sort={ {
+            dataField: this.state.field,
+            order: this.state.order
+          } }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -106,6 +106,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
 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 CustomSortValue from 'examples/sort/custom-sort-value';
 import CustomSortTable from 'examples/sort/custom-sort-table';
 import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -365,6 +366,7 @@ storiesOf('Sort Table', module)
   .add('Default Sort Table', () => <DefaultSortTable />)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
+  .add('Sort Management', () => <SortManagement />)
   .add('Custom Sort Value', () => <CustomSortValue />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Sort Caret', () => <CustomSortCaretTable />)

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

@@ -232,6 +232,10 @@ BootstrapTable.propTypes = {
     dataField: PropTypes.string.isRequired,
     order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
   })),
+  sort: PropTypes.shape({
+    dataField: PropTypes.string,
+    order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+  }),
   defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
   overlay: PropTypes.func,
   onTableChange: PropTypes.func,

packages/react-bootstrap-table2/src/contexts/index.js

@@ -247,6 +247,7 @@ const withContext = Base =>
           ref={ n => this.sortContext = n }
           defaultSorted={ this.props.defaultSorted }
           defaultSortDirection={ this.props.defaultSortDirection }
+          sort={ this.props.sort }
           data={ rootProps.getData(filterProps, searchProps) }
         >
           <this.SortContext.Consumer>

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

@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
 /* eslint react/require-default-props: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -19,26 +20,25 @@ export default (
         dataField: PropTypes.string.isRequired,
         order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
       })),
+      sort: PropTypes.shape({
+        dataField: PropTypes.string,
+        order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+      }),
       defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
     }
 
     constructor(props) {
       super(props);
       let sortOrder;
       let sortColumn;
-      const { columns, defaultSorted, defaultSortDirection } = props;
+      const { defaultSorted, defaultSortDirection, sort } = props;
 
       if (defaultSorted && defaultSorted.length > 0) {
-        const sortField = defaultSorted[0].dataField;
         sortOrder = defaultSorted[0].order || defaultSortDirection;
-        const sortColumns = columns.filter(col => col.dataField === sortField);
-        if (sortColumns.length > 0) {
-          sortColumn = sortColumns[0];
-
-          if (sortColumn.onSort) {
-            sortColumn.onSort(sortField, sortOrder);
-          }
-        }
+        sortColumn = this.initSort(defaultSorted[0].dataField, sortOrder);
+      } else if (sort && sort.dataField && sort.order) {
+        sortOrder = sort.order;
+        sortColumn = this.initSort(sort.dataField, sortOrder);
       }
       this.state = { sortOrder, sortColumn };
     }
@@ -50,6 +50,30 @@ export default (
       }
     }
 
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const { sort, columns } = nextProps;
+      if (sort && sort.dataField && sort.order) {
+        this.setState({
+          sortOrder: sort.order,
+          sortColumn: columns.find(col => col.dataField === sort.dataField)
+        });
+      }
+    }
+
+    initSort(sortField, sortOrder) {
+      let sortColumn;
+      const { columns } = this.props;
+      const sortColumns = columns.filter(col => col.dataField === sortField);
+      if (sortColumns.length > 0) {
+        sortColumn = sortColumns[0];
+
+        if (sortColumn.onSort) {
+          sortColumn.onSort(sortField, sortOrder);
+        }
+      }
+      return sortColumn;
+    }
+
     handleSort = (column) => {
       const sortOrder = dataOperator.nextOrder(column, this.state, this.props.defaultSortDirection);