Skip to content

Commit 0e7c145

Browse files
AllenFangAllenFang
authored
Merge pull request react-bootstrap-table#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

‎packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js‎

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
{

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

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+
);

‎packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js‎

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)