Skip to content

Commit dd0f04f

Browse files
committed
example for #1166
1 parent c4c1b7f commit dd0f04f

File tree

2 files changed

+93
-0
lines changed

2 files changed

+93
-0
lines changed

examples/js/expandRow/demo.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint max-len: 0 */
22
import React from 'react';
33
import ExpandRow from './expandRow';
4+
import SingleExpandRow from './single-expanding';
45
import ExpandByColumn from './expand-row-by-column';
56
import ManageExpandExternal from './manage-expanding';
67
import ExpandWithSelection from './expand-row-with-selection';
@@ -20,6 +21,10 @@ class Demo extends React.Component {
2021
<p>You can insert your customize component as a expand component</p>
2122
<ExpandRow/>
2223
</Panel>
24+
<Panel header={ 'Single Expanding' }>
25+
{ renderLinks('expandRow/single-expanding.js') }
26+
<SingleExpandRow/>
27+
</Panel>
2328
<Panel header={ 'Row Expand Indicator' }>
2429
{ renderLinks('expandRow/expand-indicator.js') }
2530
<ExpandIndicator/>
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 SingleExpandRow extends React.Component {
56+
constructor(props) {
57+
super(props);
58+
}
59+
60+
isExpandableRow(row) {
61+
if (row.id < 4) 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+
onlyOneExpanding: true
75+
};
76+
return (
77+
<BootstrapTable data={ products }
78+
options={ options }
79+
expandableRow={ this.isExpandableRow }
80+
expandComponent={ this.expandComponent }
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+
}

0 commit comments

Comments
 (0)