Skip to content

Commit 16128e7

Browse files
AllenFangAllenFang
committed
fix #1077 
1 parent ec1f96c commit 16128e7

File tree

4 files changed

+111
-106
lines changed

4 files changed

+111
-106
lines changed

‎docs/columns.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ If the events is not listed above, the callback function will only pass the `eve
456456
{
457457
// omit...
458458
headerEvents: {
459-
onClick: e => { ... }
459+
onClick: (e, column, columnIndex) => { ... }
460460
}
461461
}
462462
```

‎packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const columns = [{
1212
dataField: 'id',
1313
text: 'Product ID',
1414
headerEvents: {
15-
onClick: () => alert('Click on Product ID header column')
15+
onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
1616
}
1717
}, {
1818
dataField: 'name',
@@ -29,7 +29,7 @@ const columns = [{
2929
dataField: 'id',
3030
text: 'Product ID',
3131
headerEvents: {
32-
onClick: () => alert('Click on Product ID header column')
32+
onClick: (e, column, columnIndex) => alert('Click on Product ID header column')
3333
}
3434
}, {
3535
dataField: 'name',

‎packages/react-bootstrap-table2/src/cell-event-delegater.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export default ExtendBase =>
1717

1818
createDefaultEventHandler(cb) {
1919
return (e) => {
20-
const { column, columnIndex } = this.props;
21-
cb(e, column, columnIndex);
20+
const { column, columnIndex, index } = this.props;
21+
cb(e, column, typeof columnIndex !== 'undefined' ? columnIndex : index);
2222
};
2323
}
2424

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

Lines changed: 106 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -7,119 +7,124 @@ import Const from './const';
77
import SortSymbol from './sort/symbol';
88
import SortCaret from './sort/caret';
99
import _ from './utils';
10+
import eventDelegater from './cell-event-delegater';
11+
12+
13+
class HeaderCell extends eventDelegater(React.Component) {
14+
render() {
15+
const {
16+
column,
17+
index,
18+
onSort,
19+
sorting,
20+
sortOrder,
21+
isLastSorting,
22+
onFilter,
23+
currFilters,
24+
onExternalFilter
25+
} = this.props;
26+
27+
const {
28+
text,
29+
sort,
30+
sortCaret,
31+
filter,
32+
filterRenderer,
33+
headerTitle,
34+
headerAlign,
35+
headerFormatter,
36+
headerEvents,
37+
headerClasses,
38+
headerStyle,
39+
headerAttrs,
40+
headerSortingClasses,
41+
headerSortingStyle
42+
} = column;
43+
44+
const delegateEvents = this.delegate(headerEvents);
45+
46+
const cellAttrs = {
47+
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
48+
...delegateEvents,
49+
tabIndex: 0
50+
};
1051

52+
let sortSymbol;
53+
let filterElm;
54+
let cellStyle = {};
55+
let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
1156

12-
const HeaderCell = (props) => {
13-
const {
14-
column,
15-
index,
16-
onSort,
17-
sorting,
18-
sortOrder,
19-
isLastSorting,
20-
onFilter,
21-
currFilters,
22-
onExternalFilter
23-
} = props;
24-
25-
const {
26-
text,
27-
sort,
28-
sortCaret,
29-
filter,
30-
filterRenderer,
31-
headerTitle,
32-
headerAlign,
33-
headerFormatter,
34-
headerEvents,
35-
headerClasses,
36-
headerStyle,
37-
headerAttrs,
38-
headerSortingClasses,
39-
headerSortingStyle
40-
} = column;
41-
42-
const cellAttrs = {
43-
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
44-
...headerEvents,
45-
tabIndex: 0
46-
};
47-
48-
let sortSymbol;
49-
let filterElm;
50-
let cellStyle = {};
51-
let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
52-
53-
if (headerStyle) {
54-
cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
55-
cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
56-
}
57-
58-
if (headerTitle) {
59-
cellAttrs.title = _.isFunction(headerTitle) ? headerTitle(column, index) : text;
60-
}
57+
if (headerStyle) {
58+
cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
59+
cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
60+
}
6161

62-
if (headerAlign) {
63-
cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
64-
}
62+
if (headerTitle) {
63+
cellAttrs.title = _.isFunction(headerTitle) ? headerTitle(column, index) : text;
64+
}
6565

66-
if (sort) {
67-
const customClick = cellAttrs.onClick;
68-
cellAttrs.onClick = (e) => {
69-
onSort(column);
70-
if (_.isFunction(customClick)) customClick(e);
71-
};
72-
cellAttrs.className = cs(cellAttrs.className, 'sortable');
66+
if (headerAlign) {
67+
cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
68+
}
7369

74-
if (sorting) {
75-
sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
70+
if (sort) {
71+
const customClick = cellAttrs.onClick;
72+
cellAttrs.onClick = (e) => {
73+
onSort(column);
74+
if (_.isFunction(customClick)) customClick(e);
75+
};
76+
cellAttrs.className = cs(cellAttrs.className, 'sortable');
77+
78+
if (sorting) {
79+
sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
80+
81+
// append customized classes or style if table was sorting based on the current column.
82+
cellClasses = cs(
83+
cellClasses,
84+
_.isFunction(headerSortingClasses)
85+
? headerSortingClasses(column, sortOrder, isLastSorting, index)
86+
: headerSortingClasses
87+
);
88+
89+
cellStyle = {
90+
...cellStyle,
91+
..._.isFunction(headerSortingStyle)
92+
? headerSortingStyle(column, sortOrder, isLastSorting, index)
93+
: headerSortingStyle
94+
};
95+
} else {
96+
sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
97+
}
98+
}
7699

77-
// append customized classes or style if table was sorting based on the current column.
78-
cellClasses = cs(
79-
cellClasses,
80-
_.isFunction(headerSortingClasses)
81-
? headerSortingClasses(column, sortOrder, isLastSorting, index)
82-
: headerSortingClasses
100+
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
101+
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
102+
103+
if (filterRenderer) {
104+
const onCustomFilter = onExternalFilter(column, filter.props.type);
105+
filterElm = filterRenderer(onCustomFilter, column);
106+
} else if (filter) {
107+
filterElm = (
108+
<filter.Filter
109+
{ ...filter.props }
110+
filterState={ currFilters[column.dataField] }
111+
onFilter={ onFilter }
112+
column={ column }
113+
/>
83114
);
84-
85-
cellStyle = {
86-
...cellStyle,
87-
..._.isFunction(headerSortingStyle)
88-
? headerSortingStyle(column, sortOrder, isLastSorting, index)
89-
: headerSortingStyle
90-
};
91-
} else {
92-
sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
93115
}
94-
}
95116

96-
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
97-
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
98-
99-
if (filterRenderer) {
100-
const onCustomFilter = onExternalFilter(column, filter.props.type);
101-
filterElm = filterRenderer(onCustomFilter, column);
102-
} else if (filter) {
103-
filterElm = (
104-
<filter.Filter
105-
{ ...filter.props }
106-
filterState={ currFilters[column.dataField] }
107-
onFilter={ onFilter }
108-
column={ column }
109-
/>
110-
);
111-
}
117+
const children = headerFormatter ?
118+
headerFormatter(column, index, { sortElement: sortSymbol, filterElement: filterElm }) :
119+
text;
112120

113-
const children = headerFormatter ?
114-
headerFormatter(column, index, { sortElement: sortSymbol, filterElement: filterElm }) :
115-
text;
121+
if (headerFormatter) {
122+
return React.createElement('th', cellAttrs, children);
123+
}
116124

117-
if (headerFormatter) {
118-
return React.createElement('th', cellAttrs, children);
125+
return React.createElement('th', cellAttrs, children, sortSymbol, filterElm);
119126
}
120-
121-
return React.createElement('th', cellAttrs, children, sortSymbol, filterElm);
122-
};
127+
}
123128

124129
HeaderCell.propTypes = {
125130
column: PropTypes.shape({

0 commit comments

Comments
 (0)