Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4d44f6f

Browse files
add stories for expand indicator
1 parent 5e9c584 commit 4d44f6f

File tree

5 files changed

+286
-2
lines changed

5 files changed

+286
-2
lines changed
Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import Code from 'components/common/code-block';
6+
import { productsExpandRowsGenerator } from 'utils/common';
7+
8+
const products = productsExpandRowsGenerator();
9+
10+
const columns = [{
11+
dataField: 'id',
12+
text: 'Product ID'
13+
}, {
14+
dataField: 'name',
15+
text: 'Product Name'
16+
}, {
17+
dataField: 'price',
18+
text: 'Product Price'
19+
}];
20+
21+
const expandRow = {
22+
renderer: row => (
23+
<div>
24+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
25+
<p>You can render anything here, also you can add additional data on every row object</p>
26+
<p>expandRow.renderer callback will pass the origin row object to you</p>
27+
</div>
28+
),
29+
showExpandColumn: true,
30+
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
31+
if (isAnyExpands) {
32+
return <b>-</b>;
33+
}
34+
return <b>+</b>;
35+
},
36+
expandColumnRenderer: ({ expanded }) => {
37+
if (expanded) {
38+
return (
39+
<b>-</b>
40+
);
41+
}
42+
return (
43+
<b>...</b>
44+
);
45+
}
46+
};
47+
48+
const sourceCode = `\
49+
import BootstrapTable from 'react-bootstrap-table-next';
50+
51+
const columns = [{
52+
dataField: 'id',
53+
text: 'Product ID'
54+
}, {
55+
dataField: 'name',
56+
text: 'Product Name'
57+
}, {
58+
dataField: 'price',
59+
text: 'Product Price'
60+
}];
61+
62+
const expandRow = {
63+
renderer: row => (
64+
<div>
65+
<p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
66+
<p>You can render anything here, also you can add additional data on every row object</p>
67+
<p>expandRow.renderer callback will pass the origin row object to you</p>
68+
</div>
69+
),
70+
showExpandColumn: true,
71+
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
72+
if (isAnyExpands) {
73+
return <b>-</b>;
74+
}
75+
return <b>+</b>;
76+
},
77+
expandColumnRenderer: ({ expanded }) => {
78+
if (expanded) {
79+
return (
80+
<b>-</b>
81+
);
82+
}
83+
return (
84+
<b>...</b>
85+
);
86+
}
87+
};
88+
89+
<BootstrapTable
90+
keyField='id'
91+
data={ products }
92+
columns={ columns }
93+
expandRow={ expandRow }
94+
/>
95+
`;
96+
97+
export default () => (
98+
<div>
99+
<BootstrapTable
100+
keyField="id"
101+
data={ products }
102+
columns={ columns }
103+
expandRow={ expandRow }
104+
/>
105+
<Code>{ sourceCode }</Code>
106+
</div>
107+
);
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
3+
import BootstrapTable from 'react-bootstrap-table-next';
4+
import Code from 'components/common/code-block';
5+
import { productsExpandRowsGenerator } from 'utils/common';
6+
7+
const products = productsExpandRowsGenerator();
8+
9+
const columns = [{
10+
dataField: 'id',
11+
text: 'Product ID'
12+
}, {
13+
dataField: 'name',
14+
text: 'Product Name'
15+
}, {
16+
dataField: 'price',
17+
text: 'Product Price'
18+
}];
19+
20+
const expandRow = {
21+
renderer: row => (
22+
<div>
23+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
24+
<p>You can render anything here, also you can add additional data on every row object</p>
25+
<p>expandRow.renderer callback will pass the origin row object to you</p>
26+
</div>
27+
),
28+
showExpandColumn: true
29+
};
30+
31+
const sourceCode = `\
32+
import BootstrapTable from 'react-bootstrap-table-next';
33+
34+
const columns = [{
35+
dataField: 'id',
36+
text: 'Product ID'
37+
}, {
38+
dataField: 'name',
39+
text: 'Product Name'
40+
}, {
41+
dataField: 'price',
42+
text: 'Product Price'
43+
}];
44+
45+
const expandRow = {
46+
renderer: row => (
47+
<div>
48+
<p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
49+
<p>You can render anything here, also you can add additional data on every row object</p>
50+
<p>expandRow.renderer callback will pass the origin row object to you</p>
51+
</div>
52+
),
53+
showExpandColumn: true
54+
};
55+
56+
<BootstrapTable
57+
keyField='id'
58+
data={ products }
59+
columns={ columns }
60+
expandRow={ expandRow }
61+
/>
62+
`;
63+
64+
export default () => (
65+
<div>
66+
<BootstrapTable
67+
keyField="id"
68+
data={ products }
69+
columns={ columns }
70+
expandRow={ expandRow }
71+
/>
72+
<Code>{ sourceCode }</Code>
73+
</div>
74+
);
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/* eslint no-console: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import Code from 'components/common/code-block';
6+
import { productsExpandRowsGenerator } from 'utils/common';
7+
8+
const products = productsExpandRowsGenerator();
9+
10+
const columns = [{
11+
dataField: 'id',
12+
text: 'Product ID'
13+
}, {
14+
dataField: 'name',
15+
text: 'Product Name'
16+
}, {
17+
dataField: 'price',
18+
text: 'Product Price'
19+
}];
20+
21+
const expandRow = {
22+
renderer: row => (
23+
<div>
24+
<p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
25+
<p>You can render anything here, also you can add additional data on every row object</p>
26+
<p>expandRow.renderer callback will pass the origin row object to you</p>
27+
</div>
28+
),
29+
showExpandColumn: true,
30+
onExpand: (row, isExpand, rowIndex, e) => {
31+
console.log(row.id);
32+
console.log(isExpand);
33+
console.log(rowIndex);
34+
console.log(e);
35+
},
36+
onExpandAll: (isExpandAll, rows, e) => {
37+
console.log(isExpandAll);
38+
console.log(rows);
39+
console.log(e);
40+
}
41+
};
42+
43+
const sourceCode = `\
44+
import BootstrapTable from 'react-bootstrap-table-next';
45+
46+
const columns = [{
47+
dataField: 'id',
48+
text: 'Product ID'
49+
}, {
50+
dataField: 'name',
51+
text: 'Product Name'
52+
}, {
53+
dataField: 'price',
54+
text: 'Product Price'
55+
}];
56+
57+
const expandRow = {
58+
renderer: row => (
59+
<div>
60+
<p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
61+
<p>You can render anything here, also you can add additional data on every row object</p>
62+
<p>expandRow.renderer callback will pass the origin row object to you</p>
63+
</div>
64+
),
65+
showExpandColumn: true,
66+
onExpand: (row, isExpand, rowIndex, e) => {
67+
console.log(row.id);
68+
console.log(isExpand);
69+
console.log(rowIndex);
70+
console.log(e);
71+
},
72+
onExpandAll: (isExpandAll, rows, e) => {
73+
console.log(isExpandAll);
74+
console.log(rows);
75+
console.log(e);
76+
}
77+
};
78+
79+
<BootstrapTable
80+
keyField='id'
81+
data={ products }
82+
columns={ columns }
83+
expandRow={ expandRow }
84+
/>
85+
`;
86+
87+
export default () => (
88+
<div>
89+
<BootstrapTable
90+
keyField="id"
91+
data={ products }
92+
columns={ columns }
93+
expandRow={ expandRow }
94+
/>
95+
<Code>{ sourceCode }</Code>
96+
</div>
97+
);

‎packages/react-bootstrap-table2-example/src/utils/common.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,4 @@ export const productsExpandRowsGenerator = (quantity = 5, callback) => {
8181
expand: productsQualityGenerator(index)
8282
}))
8383
);
84-
};
84+
};

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,9 @@ import HideSelectionColumnTable from 'examples/row-selection/hide-selection-colu
112112
import BasicRowExpand from 'examples/row-expand';
113113
import RowExpandManagement from 'examples/row-expand/expand-management';
114114
import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
115+
import ExpandColumn from 'examples/row-expand/expand-column';
116+
import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
117+
import ExpandHooks from 'examples/row-expand/expand-hooks';
115118

116119
// pagination
117120
import PaginationTable from 'examples/pagination';
@@ -259,7 +262,10 @@ storiesOf('Row Selection', module)
259262
storiesOf('Row Expand', module)
260263
.add('Basic Row Expand', () => <BasicRowExpand />)
261264
.add('Expand Management', () => <RowExpandManagement />)
262-
.add('Non Expandabled Rows', () => <NonExpandableRows />);
265+
.add('Non Expandabled Rows', () => <NonExpandableRows />)
266+
.add('Expand Indicator', () => <ExpandColumn />)
267+
.add('Custom Expand Indicator', () => <CustomExpandColumn />)
268+
.add('Expand Hooks', () => <ExpandHooks />);
263269

264270
storiesOf('Pagination', module)
265271
.add('Basic Pagination Table', () => <PaginationTable />)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /