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 8b52053

Browse files
Add stories for bootstrap 4
* row-selction, sort and pagination
1 parent a0f32bd commit 8b52053

File tree

4 files changed

+182
-2
lines changed

4 files changed

+182
-2
lines changed
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* eslint react/prefer-stateless-function: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import paginationFactory from 'react-bootstrap-table2-paginator';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const products = productsGenerator(87);
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name'
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price'
20+
}];
21+
22+
const sourceCode = `\
23+
import BootstrapTable from 'react-bootstrap-table-next';
24+
import paginationFactory from 'react-bootstrap-table2-paginator';
25+
26+
const columns = [{
27+
dataField: 'id',
28+
text: 'Product ID'
29+
}, {
30+
dataField: 'name',
31+
text: 'Product Name'
32+
}, {
33+
dataField: 'price',
34+
text: 'Product Price'
35+
}];
36+
37+
<BootstrapTable bootstrap4 keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />
38+
`;
39+
40+
export default () => (
41+
<div>
42+
<BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } pagination={ paginationFactory() } />
43+
<Code>{ sourceCode }</Code>
44+
</div>
45+
);
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
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 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 selectRow = {
21+
mode: 'radio',
22+
clickToSelect: true
23+
};
24+
25+
const sourceCode = `\
26+
import BootstrapTable from 'react-bootstrap-table-next';
27+
28+
const columns = [{
29+
dataField: 'id',
30+
text: 'Product ID'
31+
}, {
32+
dataField: 'name',
33+
text: 'Product Name'
34+
}, {
35+
dataField: 'price',
36+
text: 'Product Price'
37+
}];
38+
39+
const selectRow = {
40+
mode: 'radio',
41+
clickToSelect: true
42+
};
43+
44+
<BootstrapTable
45+
bootstrap4
46+
keyField='id'
47+
data={ products }
48+
columns={ columns }
49+
selectRow={ selectRow }
50+
/>
51+
`;
52+
53+
export default () => (
54+
<div>
55+
<BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
56+
<Code>{ sourceCode }</Code>
57+
</div>
58+
);
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* eslint react/prefer-stateless-function: 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 { productsGenerator } from 'utils/common';
7+
8+
const products = productsGenerator();
9+
10+
const columns = [{
11+
dataField: 'id',
12+
text: 'Product ID',
13+
sort: true
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name',
17+
sort: true
18+
}, {
19+
dataField: 'price',
20+
text: 'Product Price',
21+
sort: true
22+
}];
23+
24+
const defaultSorted = [{
25+
dataField: 'name',
26+
order: 'desc'
27+
}];
28+
29+
const sourceCode = `\
30+
import BootstrapTable from 'react-bootstrap-table-next';
31+
32+
const columns = [{
33+
dataField: 'id',
34+
text: 'Product ID',
35+
sort: true
36+
}, {
37+
dataField: 'name',
38+
text: 'Product Name',
39+
sort: true
40+
}, {
41+
dataField: 'price',
42+
text: 'Product Price',
43+
sort: true
44+
}];
45+
46+
const defaultSorted = [{
47+
dataField: 'name',
48+
order: 'desc'
49+
}];
50+
51+
<BootstrapTable
52+
bootstrap4
53+
keyField="id"
54+
data={ products }
55+
columns={ columns }
56+
defaultSorted={ defaultSorted }
57+
/>
58+
`;
59+
60+
61+
export default class extends React.PureComponent {
62+
render() {
63+
return (
64+
<div>
65+
<BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } defaultSorted={ defaultSorted } />
66+
<Code>{ sourceCode }</Code>
67+
</div>
68+
);
69+
}
70+
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
44

55
// welcome
66
import Welcome from 'examples/welcome';
7+
78
// basic
89
import BasicTable from 'examples/basic';
910
import BorderlessTable from 'examples/basic/borderless-table';
@@ -13,6 +14,11 @@ import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
1314
import CaptionTable from 'examples/basic/caption-table';
1415
import LargeTable from 'examples/basic/large-table';
1516

17+
// bootstrap 4
18+
import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
19+
import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
20+
import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
21+
1622
// work on columns
1723
import NestedDataTable from 'examples/columns/nested-data-table';
1824
import ColumnFormatTable from 'examples/columns/column-format-table';
@@ -180,8 +186,9 @@ storiesOf('Basic Table', module)
180186

181187
storiesOf('Bootstrap 4', module)
182188
.addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
183-
.add('Basic Table', () => <BasicTable />)
184-
.add('Basic Pagination Table', () => <PaginationTable />);
189+
.add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
190+
.add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
191+
.add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />);
185192

186193
storiesOf('Work on Columns', module)
187194
.addDecorator(bootstrapStyle())

0 commit comments

Comments
(0)

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