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