Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5cbeae7

Browse files
Fix #154
* headerFormatter should custom whole the header cell * add story for headerFormatter with filter and sort * patch docs for column.headerFormatter
1 parent 80b1ac3 commit 5cbeae7

File tree

6 files changed

+115
-12
lines changed

6 files changed

+115
-12
lines changed

‎docs/columns.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,19 @@ dataField: 'address.city'
8787
* [`formatExtraData`](#formatExtraData)
8888

8989
## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
90-
`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.
90+
`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.
9191

9292
* `column`: column object itself
9393
* `colIndex`
94+
* `components`: it's an object which contain all of other react element, like sort caret or filter etc.
95+
96+
The third argument: `components` have following specified properties:
97+
```js
98+
{
99+
sortElement, // sort caret element, it will not be undefined when you enable sort on this column
100+
filterElement // filter element, it will not be undefined when you enable column.filter on this column
101+
}
102+
```
94103

95104
## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
96105
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.
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* eslint no-unused-vars: 0 */
2+
/* eslint react/prefer-stateless-function: 0 */
3+
import React from 'react';
4+
5+
import BootstrapTable from 'react-bootstrap-table2';
6+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const products = productsGenerator();
11+
12+
function priceFormatter(column, colIndex, { sortElement, filterElement }) {
13+
return (
14+
<div style={ { display: 'flex', flexDirection: 'column' } }>
15+
{ filterElement }
16+
{ column.text }
17+
{ sortElement }
18+
</div>
19+
);
20+
}
21+
22+
const columns = [{
23+
dataField: 'id',
24+
text: 'Product ID',
25+
sort: true
26+
}, {
27+
dataField: 'name',
28+
text: 'Product Name',
29+
sort: true
30+
}, {
31+
dataField: 'price',
32+
text: 'Product Price',
33+
sort: true,
34+
filter: textFilter(),
35+
headerFormatter: priceFormatter
36+
}];
37+
38+
const defaultSorted = [{
39+
dataField: 'name',
40+
order: 'desc'
41+
}];
42+
43+
const sourceCode = `\
44+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
45+
// ...
46+
function priceFormatter(column, colIndex, { sortElement, filterElement }) {
47+
return (
48+
<div style={ { display: 'flex', flexDirection: 'column' } }>
49+
{ filterElement }
50+
{ column.text }
51+
{ sortElement }
52+
</div>
53+
);
54+
}
55+
56+
const columns = [
57+
// omit...
58+
{
59+
dataField: 'price',
60+
text: 'Product Price',
61+
sort: true,
62+
filter: textFilter(),
63+
headerFormatter: priceFormatter
64+
}];
65+
66+
<BootstrapTable
67+
keyField="id"
68+
data={ products }
69+
columns={ columns }
70+
filter={ filterFactory() }
71+
defaultSorted={ defaultSorted }
72+
/>
73+
`;
74+
75+
export default class DefaultSortTable extends React.PureComponent {
76+
render() {
77+
return (
78+
<div>
79+
<BootstrapTable
80+
keyField="id"
81+
data={ products }
82+
columns={ columns }
83+
filter={ filterFactory() }
84+
defaultSorted={ defaultSorted }
85+
/>
86+
<Code>{ sourceCode }</Code>
87+
</div>
88+
);
89+
}
90+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import ColumnAttrsTable from 'examples/columns/column-attrs-table';
2525

2626
// work on header columns
2727
import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
28+
import HeaderColumnFormatWithSortFilterTable from 'examples/header-columns/column-format-filter-sort-table.js';
2829
import HeaderColumnAlignTable from 'examples/header-columns/column-align-table';
2930
import HeaderColumnTitleTable from 'examples/header-columns/column-title-table';
3031
import HeaderColumnEventTable from 'examples/header-columns/column-event-table';
@@ -121,6 +122,7 @@ storiesOf('Work on Columns', module)
121122

122123
storiesOf('Work on Header Columns', module)
123124
.add('Column Formatter', () => <HeaderColumnFormatTable />)
125+
.add('Column Format with Filter and Sort', () => <HeaderColumnFormatWithSortFilterTable />)
124126
.add('Column Align', () => <HeaderColumnAlignTable />)
125127
.add('Column Title', () => <HeaderColumnTitleTable />)
126128
.add('Column Event', () => <HeaderColumnEventTable />)

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@ const HeaderCell = (props) => {
4040
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
4141
...headerEvents
4242
};
43-
// we are suppose to pass sortSymbol and filerElm
44-
// the headerFormatter is not only header text but also the all of header cell customization
45-
const children = headerFormatter ? headerFormatter(column, index) : text;
4643

4744
let sortSymbol;
4845
let filterElm;
@@ -101,11 +98,15 @@ const HeaderCell = (props) => {
10198
filterElm = <filter.Filter { ...filter.props } onFilter={ onFilter } column={ column } />;
10299
}
103100

104-
return (
105-
<th { ...cellAttrs }>
106-
{ children }{ sortSymbol }{ filterElm }
107-
</th>
108-
);
101+
const children = headerFormatter ?
102+
headerFormatter(column, index, { sortElement: sortSymbol, filterElement: filterElm }) :
103+
text;
104+
105+
if (headerFormatter) {
106+
return React.createElement('th', cellAttrs, children);
107+
}
108+
109+
return React.createElement('th', cellAttrs, children, sortSymbol, filterElm);
109110
};
110111

111112
HeaderCell.propTypes = {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
cursor: pointer;
99
}
1010

11-
th > .order > .dropdown > .caret {
11+
th .order > .dropdown > .caret {
1212
margin: 10px 0 10px 5px;
1313
color: #cccccc;
1414
}
1515

16-
th > .order > .dropup > .caret {
16+
th .order > .dropup > .caret {
1717
margin: 10px 0;
1818
color: #cccccc;
1919
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,8 @@ describe('HeaderCell', () => {
165165

166166
it('should call custom headerFormatter correctly', () => {
167167
expect(formatter.callCount).toBe(1);
168-
expect(formatter.calledWith(column, index)).toBe(true);
168+
expect(formatter.calledWith(
169+
column, index, { sortElement: undefined, filterElement: undefined })).toBe(true);
169170
});
170171
});
171172

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /