Skip to content

Commit 7b593a7

Browse files
AllenFangAllenFang
committed
1 parent 7162728 commit 7b593a7

File tree

6 files changed

+25
-6
lines changed

6 files changed

+25
-6
lines changed

‎docs/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
* [classes](#classes)
2222
* [wrapperClasses](#wrapperClasses)
2323
* [headerClasses](#headerClasses)
24+
* [headerWrapperClasses](#headerWrapperClasses)
2425
* [cellEdit](#cellEdit)
2526
* [selectRow](#selectRow)
2627
* [expandRow](#expandRow)
@@ -137,6 +138,9 @@ Customize class on the outer element which wrap up the `table` element.
137138
### <a name='headerClasses'>headerClasses - [String]</a>
138139
Customize class on the header row(`tr`).
139140

141+
### <a name='headerWrapperClasses'>headerWrapperClasses - [String]</a>
142+
Customize class on the `thead`.
143+
140144
### <a name='cellEdit'>cellEdit - [Object]</a>
141145
Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
142146

‎packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const columns = [{
3333
3434
<BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
3535
<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
36+
<BootstrapTable headerWrapperClasses="foo" keyField="id" data={ products } columns={ columns } />
37+
<BootstrapTable bodyClasses="foo" keyField="id" data={ products } columns={ columns } />
3638
<BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
3739
`;
3840

@@ -44,6 +46,12 @@ export default () => (
4446
<h4> Customized table className </h4>
4547
<BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
4648

49+
<h4> Customized thead className </h4>
50+
<BootstrapTable headerWrapperClasses="foo" keyField="id" data={ products } columns={ columns } />
51+
52+
<h4> Customized tbody className </h4>
53+
<BootstrapTable bodyClasses="foo" keyField="id" data={ products } columns={ columns } />
54+
4755
<h4> Customized wrapper className </h4>
4856
<BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
4957

‎packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
table.foo {
1+
.foo {
22
background-color: $grey-500;
33
}
44

‎packages/react-bootstrap-table2/src/body.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ class Body extends React.Component {
6060
rowStyle,
6161
rowClasses,
6262
rowEvents,
63-
expandRow
63+
expandRow,
64+
className
6465
} = this.props;
6566

6667
let content;
@@ -110,7 +111,7 @@ class Body extends React.Component {
110111
}
111112

112113
return (
113-
<tbody>{ content }</tbody>
114+
<tbody className={ className }>{ content }</tbody>
114115
);
115116
}
116117
}

‎packages/react-bootstrap-table2/src/bootstrap-table.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
9494
<Header
9595
columns={ columns }
9696
className={ this.props.headerClasses }
97+
wrapperClasses={ this.props.headerWrapperClasses }
9798
sortField={ this.props.sortField }
9899
sortOrder={ this.props.sortOrder }
99100
onSort={ this.props.onSort }
@@ -119,6 +120,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
119120
/>
120121
)}
121122
<Body
123+
className={ this.props.bodyClasses }
122124
data={ this.getData() }
123125
keyField={ keyField }
124126
tabIndexCell={ tabIndexCell }
@@ -163,7 +165,10 @@ BootstrapTable.propTypes = {
163165
tabIndexCell: PropTypes.bool,
164166
id: PropTypes.string,
165167
classes: PropTypes.string,
168+
headerClasses: PropTypes.string,
169+
bodyClasses: PropTypes.string,
166170
wrapperClasses: PropTypes.string,
171+
headerWrapperClasses: PropTypes.string,
167172
condensed: PropTypes.bool,
168173
caption: PropTypes.oneOfType([
169174
PropTypes.node,
@@ -221,7 +226,6 @@ BootstrapTable.propTypes = {
221226
rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
222227
rowEvents: PropTypes.object,
223228
rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
224-
headerClasses: PropTypes.string,
225229
filtersClasses: PropTypes.string,
226230
filterPosition: PropTypes.oneOf([
227231
Const.FILTERS_POSITION_TOP,

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ const Header = (props) => {
2222
currFilters,
2323
onExternalFilter,
2424
filterPosition,
25-
globalSortCaret
25+
globalSortCaret,
26+
wrapperClasses
2627
} = props;
2728

2829
let SelectionHeaderCellComp = () => null;
@@ -80,7 +81,7 @@ const Header = (props) => {
8081
}
8182

8283
return (
83-
<thead>
84+
<thead className={ wrapperClasses }>
8485
<tr className={ className }>
8586
{ childrens }
8687
</tr>
@@ -99,6 +100,7 @@ Header.propTypes = {
99100
onExternalFilter: PropTypes.func,
100101
globalSortCaret: PropTypes.func,
101102
className: PropTypes.string,
103+
wrapperClasses: PropTypes.string,
102104
expandRow: PropTypes.object,
103105
filterPosition: PropTypes.oneOf([
104106
Const.FILTERS_POSITION_TOP,

0 commit comments

Comments
 (0)