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 0e7c145

Browse files
Merge pull request #1195 from react-bootstrap-table/develop
20191207 release
2 parents 3d37a31 + a07b2da commit 0e7c145

File tree

17 files changed

+493
-27
lines changed

17 files changed

+493
-27
lines changed

‎docs/README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
* [rowClasses](#rowClasses)
2929
* [rowEvents](#rowEvents)
3030
* [hiddenRows](#hiddenRows)
31+
* [sort](#sort)
3132
* [defaultSorted](#defaultSorted)
3233
* [defaultSortDirection](#defaultSortDirection)
3334
* [pagination](#pagination)
@@ -199,6 +200,27 @@ const hiddenRows = [1, 4];
199200
<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
200201
```
201202

203+
### <a name='sort'>sort - [Object]</a>
204+
Two cases you probably need to configure `sort` prop:
205+
206+
#### Manage sorting state
207+
You can give `dataField` and `order` to specify the sorting state in table, For example
208+
209+
```js
210+
<BootstrapTable sort={ { dataField: 'price', order: 'asc' } }>
211+
```
212+
213+
#### One-time sorting configuration
214+
In earily version, we only can configure [`sortCaret`](./columns.md#sortCaret) and [`sortFunc` ](./columns.md#sortFunc) per column. But they are same in most of cases.
215+
So here we give you a chance to just setup these prop in one time.
216+
217+
```js
218+
<BootstrapTable sort={ {
219+
sortCaret: ...
220+
sortFunc: ...
221+
} }>
222+
```
223+
202224
### <a name='defaultSorted'>defaultSorted - [Array]</a>
203225
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
204226

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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 sourceCode = `\
21+
import BootstrapTable from 'react-bootstrap-table-next';
22+
23+
const columns = [{
24+
dataField: 'id',
25+
text: 'Product ID'
26+
}, {
27+
dataField: 'name',
28+
text: 'Product Name'
29+
}, {
30+
dataField: 'price',
31+
text: 'Product Price'
32+
}];
33+
34+
const CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
35+
36+
<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
37+
38+
<BootstrapTable bootstrap4 keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
39+
`;
40+
41+
const Caption = () => <h3 style={ { borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' } }>Component as Header</h3>;
42+
43+
export default () => (
44+
<div>
45+
<BootstrapTable bootstrap4 keyField="id" data={ products } caption="Plain text header" columns={ columns } />
46+
<BootstrapTable bootstrap4 keyField="id" data={ products } caption={ <Caption /> } columns={ columns } />
47+
<Code>{ sourceCode }</Code>
48+
</div>
49+
);

‎packages/react-bootstrap-table2-example/examples/csv/custom-csv.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,13 @@ const columns = [{
4040
keyField="id"
4141
data={ products }
4242
columns={ columns }
43-
exportCSV
43+
exportCSV={ {
44+
fileName: 'custom.csv',
45+
separator: '|',
46+
ignoreHeader: true,
47+
noAutoBOM: false,
48+
blobType: 'text/csv;charset=ansi'
49+
} }
4450
>
4551
{
4652
props => (
@@ -64,7 +70,8 @@ export default () => (
6470
fileName: 'custom.csv',
6571
separator: '|',
6672
ignoreHeader: true,
67-
noAutoBOM: false
73+
noAutoBOM: false,
74+
blobType: 'text/csv;charset=ansi'
6875
} }
6976
>
7077
{
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const { ExportCSVButton } = CSVExport;
10+
const products = productsGenerator();
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID',
15+
footer: 'Footer 1'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name',
19+
footer: '',
20+
footerFormatter: column => column.text
21+
}, {
22+
dataField: 'price',
23+
text: 'Product Price',
24+
footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
25+
}];
26+
27+
const sourceCode = `\
28+
import BootstrapTable from 'react-bootstrap-table-next';
29+
import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
30+
31+
const { ExportCSVButton } = CSVExport;
32+
const columns = [{
33+
dataField: 'id',
34+
text: 'Product ID',
35+
footer: 'Footer 1'
36+
}, {
37+
dataField: 'name',
38+
text: 'Product Name',
39+
footer: 'Footer 2'
40+
}, {
41+
dataField: 'price',
42+
text: 'Product Price',
43+
footer: 'Footer 3'
44+
}];
45+
46+
<ToolkitProvider
47+
keyField="id"
48+
data={ products }
49+
columns={ columns }
50+
exportCSV={ {
51+
fileName: 'custom.csv',
52+
separator: '|',
53+
ignoreHeader: true,
54+
noAutoBOM: false,
55+
blobType: 'text/csv;charset=ansi'
56+
} }
57+
>
58+
{
59+
props => (
60+
<div>
61+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
62+
<hr />
63+
<BootstrapTable { ...props.baseProps } />
64+
</div>
65+
)
66+
}
67+
</ToolkitProvider>
68+
`;
69+
70+
export default () => (
71+
<div>
72+
<ToolkitProvider
73+
keyField="id"
74+
data={ products }
75+
columns={ columns }
76+
exportCSV={ {
77+
ignoreFooter: false
78+
} }
79+
>
80+
{
81+
props => (
82+
<div>
83+
<ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
84+
<hr />
85+
<BootstrapTable { ...props.baseProps } />
86+
</div>
87+
)
88+
}
89+
</ToolkitProvider>
90+
<Code>{ sourceCode }</Code>
91+
</div>
92+
);
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/* eslint no-unused-vars: 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+
}];
22+
23+
const sourceCode = `\
24+
import BootstrapTable from 'react-bootstrap-table-next';
25+
26+
const columns = [{
27+
dataField: 'id',
28+
text: 'Product ID',
29+
sort: true
30+
}, {
31+
dataField: 'name',
32+
text: 'Product Name',
33+
sort: true
34+
}, {
35+
dataField: 'price',
36+
text: 'Product Price'
37+
}];
38+
39+
class OnetimeSortConfiguration extends React.Component {
40+
sortFunc = (a, b, order, dataField) => {
41+
if (order === 'asc') {
42+
return b - a;
43+
}
44+
return a - b; // desc
45+
}
46+
47+
render() {
48+
const sortOption = {
49+
// No need to configure sortFunc per column
50+
sortFunc: this.sortFunc,
51+
// No need to configure sortCaret per column
52+
sortCaret: (order, column) => {
53+
if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
54+
else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
55+
else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
56+
return null;
57+
}
58+
};
59+
60+
return (
61+
<div>
62+
<button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
63+
<BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
64+
<Code>{ sourceCode }</Code>
65+
</div>
66+
);
67+
}
68+
}
69+
`;
70+
71+
export default class OnetimeSortConfiguration extends React.Component {
72+
sortFunc = (a, b, order, dataField) => {
73+
if (order === 'asc') {
74+
return b - a;
75+
}
76+
return a - b; // desc
77+
}
78+
79+
render() {
80+
const sortOption = {
81+
sortFunc: this.sortFunc,
82+
sortCaret: (order, column) => {
83+
if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
84+
else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
85+
else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
86+
return null;
87+
}
88+
};
89+
90+
return (
91+
<div>
92+
<h3>Reverse Sorting Table</h3>
93+
<BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
94+
<Code>{ sourceCode }</Code>
95+
</div>
96+
);
97+
}
98+
}

0 commit comments

Comments
(0)

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