Development/sorted classes and style (#136)

* fix missing defaultSorted props for default sort sample

* implement customized classes for sorted header

* [test] test for sorted header classes

* implement customized style for sorted header

* [test] test for sorted header style

* update document

* add missing props check and fix typo

* seperate sorting style and header into two props

* [test] add test case if column.headerStyle and column.headerClasses were defined

* implement customized header style and classes in column level

* [test] test for customized header style and classes in column level

* [DOC] document for customized classes and styles

* sample for customized classes and styles

* typo fix for document

* tuning the wording for test and documents

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>
+);