Skip to content

Commit 31724fe

Browse files
AllenFangAllenFang
committed
add story for #979 
1 parent 4cf6e65 commit 31724fe

File tree

2 files changed

+191
-1
lines changed

2 files changed

+191
-1
lines changed

‎packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
/* eslint no-param-reassign: 0 */
2+
import React from 'react';
3+
import BootstrapTable from 'react-bootstrap-table-next';
4+
import Code from 'components/common/code-block';
5+
import { productsGenerator } from 'utils/common';
6+
7+
const products = productsGenerator();
8+
9+
const sourceCode = `\
10+
import BootstrapTable from 'react-bootstrap-table-next';
11+
12+
class DummyColumnWithRowExpand extends React.Component {
13+
constructor(props) {
14+
super(props);
15+
16+
this.state = {
17+
hoverIdx: null
18+
};
19+
}
20+
21+
expandRow = {
22+
renderer: () => (
23+
<div style={ { width: '100%', height: '20px' } }>Content</div>
24+
),
25+
showExpandColumn: true,
26+
expandByColumnOnly: true
27+
};
28+
29+
actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
30+
if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
31+
return (
32+
<div
33+
style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
34+
/>
35+
);
36+
}
37+
return (
38+
<div
39+
style={ { width: '20px', height: '20px' } }
40+
/>
41+
);
42+
}
43+
44+
rowEvents = {
45+
onMouseEnter: (e, row, rowIndex) => {
46+
this.setState({ hoverIdx: rowIndex });
47+
},
48+
onMouseLeave: () => {
49+
this.setState({ hoverIdx: null });
50+
}
51+
}
52+
53+
rowStyle = (row, rowIndex) => {
54+
row.index = rowIndex;
55+
const style = {};
56+
if (rowIndex % 2 === 0) {
57+
style.backgroundColor = 'transparent';
58+
} else {
59+
style.backgroundColor = 'rgba(54, 163, 173, .10)';
60+
}
61+
style.borderTop = 'none';
62+
63+
return style;
64+
}
65+
66+
render() {
67+
const columns = [{
68+
dataField: 'id',
69+
text: 'Product ID'
70+
}, {
71+
dataField: 'name',
72+
text: 'Product Name'
73+
}, {
74+
dataField: 'price',
75+
text: 'Product Price'
76+
}, {
77+
text: '',
78+
isDummyField: true,
79+
formatter: this.actionFormater,
80+
formatExtraData: { hoverIdx: this.state.hoverIdx },
81+
headerStyle: { width: '50px' },
82+
style: { height: '30px' }
83+
}];
84+
return (
85+
<div>
86+
<BootstrapTable
87+
keyField="id"
88+
data={ products }
89+
columns={ columns }
90+
noDataIndication="There is no data"
91+
classes="table"
92+
rowStyle={ this.rowStyle }
93+
rowEvents={ this.rowEvents }
94+
expandRow={ this.expandRow }
95+
/>
96+
</div>
97+
);
98+
}
99+
}
100+
`;
101+
102+
export default class DummyColumnWithRowExpand extends React.Component {
103+
constructor(props) {
104+
super(props);
105+
106+
this.state = {
107+
hoverIdx: null
108+
};
109+
}
110+
111+
expandRow = {
112+
renderer: () => (
113+
<div style={ { width: '100%', height: '20px' } }>Content</div>
114+
),
115+
showExpandColumn: true,
116+
expandByColumnOnly: true
117+
};
118+
119+
actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
120+
if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
121+
return (
122+
<div
123+
style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
124+
/>
125+
);
126+
}
127+
return (
128+
<div
129+
style={ { width: '20px', height: '20px' } }
130+
/>
131+
);
132+
}
133+
134+
rowEvents = {
135+
onMouseEnter: (e, row, rowIndex) => {
136+
this.setState({ hoverIdx: rowIndex });
137+
},
138+
onMouseLeave: () => {
139+
this.setState({ hoverIdx: null });
140+
}
141+
}
142+
143+
rowStyle = (row, rowIndex) => {
144+
row.index = rowIndex;
145+
const style = {};
146+
if (rowIndex % 2 === 0) {
147+
style.backgroundColor = 'transparent';
148+
} else {
149+
style.backgroundColor = 'rgba(54, 163, 173, .10)';
150+
}
151+
style.borderTop = 'none';
152+
153+
return style;
154+
}
155+
156+
render() {
157+
const columns = [{
158+
dataField: 'id',
159+
text: 'Product ID'
160+
}, {
161+
dataField: 'name',
162+
text: 'Product Name'
163+
}, {
164+
dataField: 'price',
165+
text: 'Product Price'
166+
}, {
167+
isDummyField: true,
168+
text: '',
169+
formatter: this.actionFormater,
170+
formatExtraData: { hoverIdx: this.state.hoverIdx },
171+
headerStyle: { width: '50px' },
172+
style: { height: '30px' }
173+
}];
174+
return (
175+
<div>
176+
<BootstrapTable
177+
keyField="id"
178+
data={ products }
179+
columns={ columns }
180+
rowStyle={ this.rowStyle }
181+
rowEvents={ this.rowEvents }
182+
expandRow={ this.expandRow }
183+
/>
184+
<Code>{ sourceCode }</Code>
185+
</div>
186+
);
187+
}
188+
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import ColumnEventTable from 'examples/columns/column-event-table';
3535
import ColumnHiddenTable from 'examples/columns/column-hidden-table';
3636
import ColumnAttrsTable from 'examples/columns/column-attrs-table';
3737
import DummyColumnTable from 'examples/columns/dummy-column-table';
38+
import RowExpandWithFormattedDummyColumn from 'examples/columns/row-expand-with-formatted-dummy-column.js';
3839

3940
// work on header columns
4041
import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -273,7 +274,8 @@ storiesOf('Work on Columns', module)
273274
.add('Customize Column Class', () => <ColumnClassTable />)
274275
.add('Customize Column Style', () => <ColumnStyleTable />)
275276
.add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
276-
.add('Dummy Column', () => <DummyColumnTable />);
277+
.add('Dummy Column', () => <DummyColumnTable />)
278+
.add('Row Expand with Dummy Column Formatter', () => <RowExpandWithFormattedDummyColumn />);
277279

278280
storiesOf('Work on Header Columns', module)
279281
.addDecorator(bootstrapStyle())

0 commit comments

Comments
 (0)