Skip to content

Commit dd9e68c

Browse files
AllenFangAllenFang
committed
Merge branch 'dekelb-feature/enhance_expand_row'
2 parents a0a173c + a805dd4 commit dd9e68c

File tree

9 files changed

+308
-13
lines changed

9 files changed

+308
-13
lines changed

‎css/react-bootstrap-table.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,10 @@
230230
animation-duration: .3s;
231231
}
232232

233+
td.react-bs-table-expand-cell {
234+
cursor: pointer;
235+
}
236+
233237
@keyframes shake {
234238
from, to {
235239
transform: translate3d(0, 0, 0);

‎examples/js/expandRow/custom-expand-indicator.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
const products = [];
6+
7+
function addProducts(quantity) {
8+
const startId = products.length;
9+
for (let i = 0; i < quantity; i++) {
10+
const id = startId + i;
11+
if (i < 3) {
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i,
16+
expand: [ {
17+
fieldA: 'test1',
18+
fieldB: (i + 1) * 99,
19+
fieldC: (i + 1) * Math.random() * 100,
20+
fieldD: '123eedd' + i
21+
}, {
22+
fieldA: 'test2',
23+
fieldB: i * 99,
24+
fieldC: i * Math.random() * 100,
25+
fieldD: '123eedd' + i
26+
} ]
27+
});
28+
} else {
29+
products.push({
30+
id: id,
31+
name: 'Item name ' + id,
32+
price: 2100 + i
33+
});
34+
}
35+
}
36+
}
37+
addProducts(5);
38+
39+
class BSTable extends React.Component {
40+
render() {
41+
if (this.props.data) {
42+
return (
43+
<BootstrapTable data={ this.props.data }>
44+
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
45+
<TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
46+
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
47+
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
48+
</BootstrapTable>);
49+
} else {
50+
return (<p>?</p>);
51+
}
52+
}
53+
}
54+
55+
export default class ExpandRow extends React.Component {
56+
constructor(props) {
57+
super(props);
58+
}
59+
60+
isExpandableRow(row) {
61+
if (row.id < 3) return true;
62+
else return false;
63+
}
64+
65+
expandComponent(row) {
66+
return (
67+
<BSTable data={ row.expand } />
68+
);
69+
}
70+
71+
expandColumnComponent({ isExpandableRow, isExpanded }) {
72+
let content = '';
73+
74+
if (isExpandableRow) {
75+
content = (isExpanded ? '(-)' : '(+)' );
76+
} else {
77+
content = ' ';
78+
}
79+
return (
80+
<div> { content } </div>
81+
);
82+
}
83+
84+
render() {
85+
const options = {
86+
expandRowBgColor: 'rgb(242, 255, 163)'
87+
};
88+
return (
89+
<BootstrapTable data={ products }
90+
options={ options }
91+
expandableRow={ this.isExpandableRow }
92+
expandComponent={ this.expandComponent }
93+
expandColumnOptions={ {
94+
expandColumnVisible: true,
95+
expandColumnComponent: this.expandColumnComponent,
96+
columnWidth: 50
97+
} }
98+
search>
99+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
100+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
101+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
102+
</BootstrapTable>
103+
);
104+
}
105+
}

‎examples/js/expandRow/demo.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import ExpandByColumn from './expand-row-by-column';
55
import ManageExpandExternal from './manage-expanding';
66
import ExpandWithSelection from './expand-row-with-selection';
77
import ExpandWithCellEdit from './expand-row-with-cellEdit';
8+
import ExpandIndicator from './expand-indicator';
9+
import CustomExpandIndicator from './custom-expand-indicator';
810
import renderLinks from '../utils';
911

1012
import { Col, Panel } from 'react-bootstrap';
@@ -18,6 +20,14 @@ class Demo extends React.Component {
1820
<p>You can insert your customize component as a expand component</p>
1921
<ExpandRow/>
2022
</Panel>
23+
<Panel header={ 'Row Expand Indicator' }>
24+
{ renderLinks('expandRow/expand-indicator.js') }
25+
<ExpandIndicator/>
26+
</Panel>
27+
<Panel header={ 'Custom Row Expand Indicator' }>
28+
{ renderLinks('expandRow/custom-expand-indicator.js') }
29+
<CustomExpandIndicator/>
30+
</Panel>
2131
<Panel header={ 'Expand Row Trigger by Column instead of Row' }>
2232
{ renderLinks('expandRow/expand-row-by-column.js') }
2333
<span>You can trigger expand row by column or row, default is row,
@@ -28,7 +38,7 @@ class Demo extends React.Component {
2838
{ renderLinks('expandRow/expand-row-by-column.js') }
2939
<ManageExpandExternal/>
3040
</Panel>
31-
<Panel header={ 'Expand Row with Selection' }>
41+
<Panel header={ 'Expand Row with Selection - Keep select column first' }>
3242
<span>You can enable/disable the expanding if you click row to select,
3343
configure <code>clickToExpand</code> in <code>selectRow</code> props, default is false</span>
3444
{ renderLinks('expandRow/expand-row-with-selection.js') }

‎examples/js/expandRow/expand-indicator.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* eslint max-len: 0 */
2+
import React from 'react';
3+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
4+
5+
const products = [];
6+
7+
function addProducts(quantity) {
8+
const startId = products.length;
9+
for (let i = 0; i < quantity; i++) {
10+
const id = startId + i;
11+
if (i < 3) {
12+
products.push({
13+
id: id,
14+
name: 'Item name ' + id,
15+
price: 2100 + i,
16+
expand: [ {
17+
fieldA: 'test1',
18+
fieldB: (i + 1) * 99,
19+
fieldC: (i + 1) * Math.random() * 100,
20+
fieldD: '123eedd' + i
21+
}, {
22+
fieldA: 'test2',
23+
fieldB: i * 99,
24+
fieldC: i * Math.random() * 100,
25+
fieldD: '123eedd' + i
26+
} ]
27+
});
28+
} else {
29+
products.push({
30+
id: id,
31+
name: 'Item name ' + id,
32+
price: 2100 + i
33+
});
34+
}
35+
}
36+
}
37+
addProducts(5);
38+
39+
class BSTable extends React.Component {
40+
render() {
41+
if (this.props.data) {
42+
return (
43+
<BootstrapTable data={ this.props.data }>
44+
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
45+
<TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
46+
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
47+
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
48+
</BootstrapTable>);
49+
} else {
50+
return (<p>?</p>);
51+
}
52+
}
53+
}
54+
55+
export default class ExpandRow extends React.Component {
56+
constructor(props) {
57+
super(props);
58+
}
59+
60+
isExpandableRow(row) {
61+
if (row.id < 3) return true;
62+
else return false;
63+
}
64+
65+
expandComponent(row) {
66+
return (
67+
<BSTable data={ row.expand } />
68+
);
69+
}
70+
71+
render() {
72+
const options = {
73+
expandRowBgColor: 'rgb(242, 255, 163)'
74+
};
75+
return (
76+
<BootstrapTable data={ products }
77+
options={ options }
78+
expandableRow={ this.isExpandableRow }
79+
expandComponent={ this.expandComponent }
80+
expandColumnOptions={ { expandColumnVisible: true } }
81+
search>
82+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
83+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
84+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
85+
</BootstrapTable>
86+
);
87+
}
88+
}

‎examples/js/expandRow/expand-row-with-selection.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export default class ExpandRow extends React.Component {
8282
options={ options }
8383
expandableRow={ this.isExpandableRow }
8484
expandComponent={ this.expandComponent }
85+
expandColumnOptions={ { expandColumnVisible: true, expandColumnBeforeSelectColumn: false } }
8586
selectRow={ selectRow }>
8687
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
8788
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

‎src/BootstrapTable.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,11 @@ class BootstrapTable extends Component {
328328
const toolBar = this.renderToolBar();
329329
const tableFilter = this.renderTableFilter(columns);
330330
const isSelectAll = this.isSelectAll();
331-
const colGroups = Util.renderColGroup(columns, this.props.selectRow);
331+
const expandColumnOptions = this.props.expandColumnOptions;
332+
if (typeof expandColumnOptions.expandColumnBeforeSelectColumn === 'undefined') {
333+
expandColumnOptions.expandColumnBeforeSelectColumn = true;
334+
}
335+
const colGroups = Util.renderColGroup(columns, this.props.selectRow, expandColumnOptions);
332336
let sortIndicator = this.props.options.sortIndicator;
333337
if (typeof this.props.options.sortIndicator === 'undefined') sortIndicator = true;
334338
const { paginationPosition = Const.PAGINATION_POS_BOTTOM } = this.props.options;
@@ -362,7 +366,10 @@ class BootstrapTable extends Component {
362366
condensed={ this.props.condensed }
363367
isFiltered={ this.filter ? true : false }
364368
isSelectAll={ isSelectAll }
365-
reset={ this.state.reset }>
369+
reset={ this.state.reset }
370+
expandColumnVisible={ expandColumnOptions.expandColumnVisible }
371+
expandColumnComponent={ expandColumnOptions.expandColumnComponent }
372+
expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
366373
{ this.props.children }
367374
</TableHeader>
368375
<TableBody ref='body'
@@ -382,6 +389,7 @@ class BootstrapTable extends Component {
382389
keyField={ this.store.getKeyField() }
383390
condensed={ this.props.condensed }
384391
selectRow={ this.props.selectRow }
392+
expandColumnOptions={ this.props.expandColumnOptions }
385393
cellEdit={ this.props.cellEdit }
386394
selectedRowKeys={ this.state.selectedRowKeys }
387395
onRowClick={ this.handleRowClick }
@@ -1365,12 +1373,23 @@ BootstrapTable.propTypes = {
13651373
csvFileName: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
13661374
ignoreSinglePage: PropTypes.bool,
13671375
expandableRow: PropTypes.func,
1368-
expandComponent: PropTypes.func
1376+
expandComponent: PropTypes.func,
1377+
expandColumnOptions: PropTypes.shape({
1378+
columnWidth: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
1379+
expandColumnVisible: PropTypes.bool,
1380+
expandColumnComponent: PropTypes.func,
1381+
expandColumnBeforeSelectColumn: PropTypes.bool
1382+
})
13691383
};
13701384
BootstrapTable.defaultProps = {
13711385
scrollTop: undefined,
13721386
expandComponent: undefined,
13731387
expandableRow: undefined,
1388+
expandColumnOptions: {
1389+
expandColumnVisible: false,
1390+
expandColumnComponent: undefined,
1391+
expandColumnBeforeSelectColumn: true
1392+
},
13741393
height: '100%',
13751394
maxHeight: undefined,
13761395
striped: false,

0 commit comments

Comments
 (0)