fix #281

docs/README.md

@@ -23,6 +23,7 @@
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
 * [defaultSorted](#defaultSorted)
+* [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
 * [onTableChange](#onTableChange)
@@ -168,6 +169,9 @@ const defaultSorted = [{
 }];
 ```
 
+### <a name='defaultSortDirection'>defaultSortDirection - [String]</a>
+Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
+
 ### <a name='pagination'>pagination - [Object]</a>
 `pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally.
 

packages/react-bootstrap-table2-example/examples/sort/default-sort-direction.js

@@ -0,0 +1,67 @@
+/* eslint react/prefer-stateless-function: 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',
+  sort: true
+}];
+
+
+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',
+  sort: true
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  defaultSortDirection="asc"
+/>
+`;
+
+
+class DefaultSortDirectionTable extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } defaultSortDirection="asc" />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+
+export default DefaultSortDirectionTable;

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

@@ -57,6 +57,7 @@ import RowEventTable from 'examples/rows/row-event';
 // table sort
 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 CustomSortTable from 'examples/sort/custom-sort-table';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
@@ -175,6 +176,7 @@ storiesOf('Work on Rows', module)
 storiesOf('Sort Table', module)
   .add('Enable Sort', () => <EnableSortTable />)
   .add('Default Sort Table', () => <DefaultSortTable />)
+  .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)

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

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

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

@@ -15,7 +15,7 @@ export default Base =>
     }
 
     componentWillMount() {
-      const { columns, defaultSorted, store } = this.props;
+      const { columns, defaultSorted, defaultSortDirection, store } = this.props;
       // defaultSorted is an array, it's ready to use as multi / single sort
       // when we start to support multi sort, please update following code to use array.forEach
       if (defaultSorted && defaultSorted.length > 0) {
@@ -23,7 +23,7 @@ export default Base =>
         const order = defaultSorted[0].order;
         const column = columns.filter(col => col.dataField === dataField);
         if (column.length > 0) {
-          store.setSort(column[0], order);
+          store.setSort(column[0], order, defaultSortDirection);
 
           if (column[0].onSort) {
             column[0].onSort(store.sortField, store.sortOrder);
@@ -53,7 +53,7 @@ export default Base =>
 
     handleSort(column) {
       const { store } = this.props;
-      store.setSort(column);
+      store.setSort(column, undefined, this.props.defaultSortDirection);
 
       if (column.onSort) {
         column.onSort(store.sortField, store.sortOrder);

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

@@ -21,8 +21,8 @@ export default class Store {
     if (row) _.set(row, dataField, newValue);
   }
 
-  setSort({ dataField }, order) {
-    this.sortOrder = nextOrder(this)(dataField, order);
+  setSort({ dataField }, order, defaultOrder) {
+    this.sortOrder = nextOrder(this)(dataField, order, defaultOrder);
     this.sortField = dataField;
   }
 

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

@@ -37,11 +37,11 @@ export const sort = ({ data, sortOrder, sortField }) => (sortFunc) => {
   return _data;
 };
 
-export const nextOrder = store => (field, order) => {
+export const nextOrder = store => (field, order, defaultOrder = Const.SORT_DESC) => {
   if (order) return order;
 
   if (field !== store.sortField) {
-    return Const.SORT_DESC;
+    return defaultOrder;
   }
   return store.sortOrder === Const.SORT_DESC ? Const.SORT_ASC : Const.SORT_DESC;
 };

packages/react-bootstrap-table2/test/store/index.test.js

@@ -56,10 +56,15 @@ describe('Store Base', () => {
       expect(store.sortOrder).toEqual(Const.SORT_DESC);
     });
 
-    it('should force assign sortOrder correctly if second argument is passed', () => {
+    it('should force assign sortOrder correctly if second argument is given', () => {
       store.setSort({ dataField }, Const.SORT_DESC);
       expect(store.sortOrder).toEqual(Const.SORT_DESC);
     });
+
+    it('should force assign sortOrder correctly if third argument is given', () => {
+      store.setSort({ dataField }, undefined, Const.SORT_ASC);
+      expect(store.sortOrder).toEqual(Const.SORT_ASC);
+    });
   });
 
   describe('sortBy', () => {

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

@@ -63,6 +63,10 @@ describe('Sort Function', () => {
       expect(nextOrder(store)('name')).toBe(Const.SORT_DESC);
     });
 
+    it('should return correcly order when store.sortField is not eq next sort field and default sort direction is given', () => {
+      expect(nextOrder(store)('name', undefined, Const.SORT_ASC)).toBe(Const.SORT_ASC);
+    });
+
     it('should return correcly order when store.sortField is eq next sort field', () => {
       store.sortField = 'name';
       store.sortOrder = Const.SORT_DESC;