Fix #154

* headerFormatter should custom whole the header cell

* add story for headerFormatter with filter and sort

* patch docs for column.headerFormatter

Author: AllenFang

docs/columns.md

@@ -87,10 +87,19 @@ dataField: 'address.city'
 * [`formatExtraData`](#formatExtraData)
 
 ## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
-`headerFormatter` allow you to customize the header column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+`headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
 
 * `column`: column object itself
 * `colIndex`
+* `components`: it's an object which contain all of other react element, like sort caret or filter etc.
+
+The third argument: `components` have following specified properties:
+```js
+{
+  sortElement, // sort caret element, it will not be undefined when you enable sort on this column
+  filterElement // filter element, it will not be undefined when you enable column.filter on this column
+}
+```
 
 ## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
 It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.

packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js

@@ -0,0 +1,90 @@
+/* eslint no-unused-vars: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+function priceFormatter(column, colIndex, { sortElement, filterElement }) {
+  return (
+    <div style={ { display: 'flex', flexDirection: 'column' } }>
+      { filterElement }
+      { column.text }
+      { sortElement }
+    </div>
+  );
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter(),
+  headerFormatter: priceFormatter
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+const sourceCode = `\
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+// ...
+function priceFormatter(column, colIndex, { sortElement, filterElement }) {
+  return (
+    <div style={ { display: 'flex', flexDirection: 'column' } }>
+      { filterElement }
+      { column.text }
+      { sortElement }
+    </div>
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter(),
+  headerFormatter: priceFormatter
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  defaultSorted={ defaultSorted }
+/>
+`;
+
+export default class DefaultSortTable extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          defaultSorted={ defaultSorted }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -25,6 +25,7 @@ import ColumnAttrsTable from 'examples/columns/column-attrs-table';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
+import HeaderColumnFormatWithSortFilterTable from 'examples/header-columns/column-format-filter-sort-table.js';
 import HeaderColumnAlignTable from 'examples/header-columns/column-align-table';
 import HeaderColumnTitleTable from 'examples/header-columns/column-title-table';
 import HeaderColumnEventTable from 'examples/header-columns/column-event-table';
@@ -121,6 +122,7 @@ storiesOf('Work on Columns', module)
 
 storiesOf('Work on Header Columns', module)
   .add('Column Formatter', () => <HeaderColumnFormatTable />)
+  .add('Column Format with Filter and Sort', () => <HeaderColumnFormatWithSortFilterTable />)
   .add('Column Align', () => <HeaderColumnAlignTable />)
   .add('Column Title', () => <HeaderColumnTitleTable />)
   .add('Column Event', () => <HeaderColumnEventTable />)

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

@@ -40,9 +40,6 @@ const HeaderCell = (props) => {
     ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
     ...headerEvents
   };
-  // we are suppose to pass sortSymbol and filerElm
-  // the headerFormatter is not only header text but also the all of header cell customization
-  const children = headerFormatter ? headerFormatter(column, index) : text;
 
   let sortSymbol;
   let filterElm;
@@ -101,11 +98,15 @@ const HeaderCell = (props) => {
     filterElm = <filter.Filter { ...filter.props } onFilter={ onFilter } column={ column } />;
   }
 
-  return (
-    <th { ...cellAttrs }>
-      { children }{ sortSymbol }{ filterElm }
-    </th>
-  );
+  const children = headerFormatter ?
+    headerFormatter(column, index, { sortElement: sortSymbol, filterElement: filterElm }) :
+    text;
+
+  if (headerFormatter) {
+    return React.createElement('th', cellAttrs, children);
+  }
+
+  return React.createElement('th', cellAttrs, children, sortSymbol, filterElm);
 };
 
 HeaderCell.propTypes = {

packages/react-bootstrap-table2/style/react-bootstrap-table.scss

@@ -8,12 +8,12 @@
     cursor: pointer;
   }
 
-  th > .order > .dropdown > .caret {
+  th .order > .dropdown > .caret {
     margin: 10px 0 10px 5px;
     color: #cccccc;
   }
 
-  th > .order > .dropup > .caret {
+  th .order > .dropup > .caret {
     margin: 10px 0;
     color: #cccccc;
   }

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

@@ -165,7 +165,8 @@ describe('HeaderCell', () => {
 
     it('should call custom headerFormatter correctly', () => {
       expect(formatter.callCount).toBe(1);
-      expect(formatter.calledWith(column, index)).toBe(true);
+      expect(formatter.calledWith(
+        column, index, { sortElement: undefined, filterElement: undefined })).toBe(true);
     });
   });