Development/sorted classes and style

docs/columns.md

@@ -25,6 +25,8 @@ Available properties in a column object:
 * [headerEvents](#headerEvents)
 * [headerAlign](#headerAlign)
 * [headerAttrs](#headerAttrs)
+* [headerSortingClasses](#headerSortingClasses)
+* [headerSortingStyle](#headerSortingStyle)
 * [editable](#editable)
 * [validator](#validator)
 * [editCellStyle](#editCellStyle)
@@ -419,6 +421,35 @@ A new `Object` will be the result of element headerAttrs.
 > Same as [column.attrs](#attrs), it has lower priority and will be
 > overwrited when other props related to HTML attributes were given.
 
+### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
+
+`headerSortingClasses` allows to customize `class` for header cell when this column is sorting.
+
+```js
+const headerSortingClasses = 'demo-sorting';
+```
+
+Furthermore, it also accepts a callback which takes **4** arguments and `String` is expected to return:
+
+```js
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { ... }
+```
+
+* `column`: The value of current column.
+* `sortOrder`: The order of current sorting
+* `isLastSorting`: Is the last one of sorted columns.
+* `colIndex`: The index of the current column being processed in BootstrapTable.
+
+### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
+
+It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
+
+```js
+const sortingHeaderStyle = {
+  backgroundColor: 'red'
+};
+```
+
 ## <a name='editable'>column.editable - [Bool | Function]</a>
 `column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
 

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

@@ -41,7 +41,17 @@ const columns = [{
   sort: true
 }];
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } />
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  defaultSorted={ defaultSorted } 
+/>
 `;
 
 

packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js

@@ -0,0 +1,61 @@
+/* eslint
+  no-unused-vars: 0
+  arrow-body-style: 0
+*/
+
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
+  sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
+);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true,
+  headerSortingClasses
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  headerSortingClasses
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
+  sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
+);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true,
+  headerSortingClasses
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  headerSortingClasses
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js

@@ -0,0 +1,54 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const headerSortingStyle = { backgroundColor: '#c8e6c9' };
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true,
+  headerSortingStyle
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  headerSortingStyle
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+
+const sourceCode = `\
+const headerSortingStyle = { backgroundColor: '#c8e6c9' };
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true,
+  headerSortingStyle
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  headerSortingStyle
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -41,6 +41,8 @@ import RowEventTable from 'examples/rows/row-event';
 import EnableSortTable from 'examples/sort/enable-sort-table';
 import DefaultSortTable from 'examples/sort/default-sort-table';
 import CustomSortTable from 'examples/sort/custom-sort-table';
+import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
+import HeaderSortingStyleTable from 'examples/sort/header-sorting-style';
 
 // cell editing
 import ClickToEditTable from 'examples/cell-edit/click-to-edit-table';
@@ -127,7 +129,9 @@ storiesOf('Work on Rows', module)
 storiesOf('Sort Table', module)
   .add('Enable Sort', () => <EnableSortTable />)
   .add('Default Sort Table', () => <DefaultSortTable />)
-  .add('Custom Sort Fuction', () => <CustomSortTable />);
+  .add('Custom Sort Fuction', () => <CustomSortTable />)
+  .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
+  .add('Custom Style on Sorting Header Column', () => <HeaderSortingStyleTable />);
 
 storiesOf('Cell Editing', module)
   .add('Click to Edit', () => <ClickToEditTable />)

packages/react-bootstrap-table2-example/stories/stylesheet/base/_base.scss

@@ -10,4 +10,5 @@ $grey-900: #212121;
 $pink-500: #E91E63;
 $green-lighten-2: #81c784;
 $green-lighten-4: #c8e6c9;
+$light-blue: #00BFFF;
 $markdown-color: #f6f8fa;

packages/react-bootstrap-table2-example/stories/stylesheet/sort/_index.scss

@@ -0,0 +1,8 @@
+.demo-sorting,
+.demo-sorting-asc {
+  background-color: $green-lighten-2;
+}
+
+.demo-sorting-desc {
+  background-color: $light-blue;
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -8,4 +8,5 @@
 @import "cell-edit/index";
 @import "row-selection/index";
 @import "rows/index";
-@import "loading-overlay/index";
+@import "sort/index";
+@import "loading-overlay/index";

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

@@ -15,8 +15,10 @@ const HeaderCell = (props) => {
     index,
     onSort,
     sorting,
-    sortOrder
+    sortOrder,
+    isLastSorting
   } = props;
+
   const {
     text,
     sort,
@@ -27,18 +29,20 @@ const HeaderCell = (props) => {
     headerEvents,
     headerClasses,
     headerStyle,
-    headerAttrs
+    headerAttrs,
+    headerSortingClasses,
+    headerSortingStyle
   } = column;
 
   const cellAttrs = {
     ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
     ...headerEvents
   };
   const children = headerFormatter ? headerFormatter(column, index) : text;
-  const cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
 
   let cellStyle = {};
   let sortSymbol;
+  let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
 
   if (headerStyle) {
     cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
@@ -56,10 +60,6 @@ const HeaderCell = (props) => {
     cellStyle.display = 'none';
   }
 
-  if (cellClasses) cellAttrs.className = cellClasses;
-
-  if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
-
   if (sort) {
     const customClick = cellAttrs.onClick;
     cellAttrs.onClick = (e) => {
@@ -70,11 +70,30 @@ const HeaderCell = (props) => {
 
     if (sorting) {
       sortSymbol = <SortCaret order={ sortOrder } />;
+
+      // append customized classes or style if table was sorting based on the current column.
+      cellClasses = cs(
+        cellClasses,
+        _.isFunction(headerSortingClasses)
+          ? headerSortingClasses(column, sortOrder, isLastSorting, index)
+          : headerSortingClasses
+      );
+
+      cellStyle = {
+        ...cellStyle,
+        ..._.isFunction(headerSortingStyle)
+          ? headerSortingStyle(column, sortOrder, isLastSorting, index)
+          : headerSortingStyle
+      };
     } else {
       sortSymbol = <SortSymbol />;
     }
   }
 
+  if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
+
+  if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+
   return (
     <th { ...cellAttrs }>
       { children }{ sortSymbol }
@@ -112,7 +131,8 @@ 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_ASC, Const.SORT_DESC]),
+  isLastSorting: PropTypes.bool
 };
 
 export default HeaderCell;

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

@@ -27,6 +27,8 @@ const Header = (props) => {
         {
           columns.map((column, i) => {
             const currSort = column.dataField === sortField;
+            const isLastSorting = column.dataField === sortField;
+
             return (
               <HeaderCell
                 index={ i }
@@ -35,6 +37,7 @@ const Header = (props) => {
                 onSort={ onSort }
                 sorting={ currSort }
                 sortOrder={ sortOrder }
+                isLastSorting={ isLastSorting }
               />);
           })
         }