Skip to content

Commit 2068f51

Browse files
AllenFangAllenFang
committed
fix #1180 
1 parent 47d6eb0 commit 2068f51

File tree

6 files changed

+173
-10
lines changed

6 files changed

+173
-10
lines changed

‎docs/README.md‎

Lines changed: 14 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,19 @@ 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+
**TBD**
215+
202216
### <a name='defaultSorted'>defaultSorted - [Array]</a>
203217
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
204218

‎packages/react-bootstrap-table2-example/examples/sort/sort-management.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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 { productsGenerator } from 'utils/common';
7+
8+
const products = productsGenerator();
9+
10+
const sourceCode = `\
11+
import BootstrapTable from 'react-bootstrap-table-next';
12+
13+
class SortManagement extends React.Component {
14+
state = {
15+
field: null,
16+
order: null
17+
}
18+
19+
handleSort = (field, order) => {
20+
this.setState({
21+
field,
22+
order
23+
});
24+
}
25+
26+
handleSortById = () => {
27+
this.setState({
28+
field: 'id',
29+
order: 'desc'
30+
});
31+
}
32+
33+
render() {
34+
const columns = [{
35+
dataField: 'id',
36+
text: 'Product ID',
37+
sort: true,
38+
onSort: this.handleSort
39+
}, {
40+
dataField: 'name',
41+
text: 'Product Name',
42+
sort: true,
43+
onSort: this.handleSort
44+
}, {
45+
dataField: 'price',
46+
text: 'Product Price'
47+
}];
48+
return (
49+
<div>
50+
<button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
51+
<BootstrapTable
52+
keyField="id"
53+
data={ products }
54+
columns={ columns }
55+
sort={ {
56+
dataField: this.state.field,
57+
order: this.state.order
58+
} }
59+
/>
60+
<Code>{ sourceCode }</Code>
61+
</div>
62+
);
63+
}
64+
}
65+
`;
66+
67+
export default class SortManagement extends React.Component {
68+
state = {
69+
field: null,
70+
order: null
71+
}
72+
73+
handleSort = (field, order) => {
74+
this.setState({
75+
field,
76+
order
77+
});
78+
}
79+
80+
handleSortById = () => {
81+
this.setState({
82+
field: 'id',
83+
order: 'desc'
84+
});
85+
}
86+
87+
render() {
88+
const columns = [{
89+
dataField: 'id',
90+
text: 'Product ID',
91+
sort: true,
92+
onSort: this.handleSort
93+
}, {
94+
dataField: 'name',
95+
text: 'Product Name',
96+
sort: true,
97+
onSort: this.handleSort
98+
}, {
99+
dataField: 'price',
100+
text: 'Product Price'
101+
}];
102+
return (
103+
<div>
104+
<button className="btn btn-danger" onClick={ this.handleSortById }>Sort By ID</button>
105+
<BootstrapTable
106+
keyField="id"
107+
data={ products }
108+
columns={ columns }
109+
sort={ {
110+
dataField: this.state.field,
111+
order: this.state.order
112+
} }
113+
/>
114+
<Code>{ sourceCode }</Code>
115+
</div>
116+
);
117+
}
118+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
106106
import DefaultSortTable from 'examples/sort/default-sort-table';
107107
import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
108108
import SortEvents from 'examples/sort/sort-events';
109+
import SortManagement from 'examples/sort/sort-management';
109110
import CustomSortValue from 'examples/sort/custom-sort-value';
110111
import CustomSortTable from 'examples/sort/custom-sort-table';
111112
import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -365,6 +366,7 @@ storiesOf('Sort Table', module)
365366
.add('Default Sort Table', () => <DefaultSortTable />)
366367
.add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
367368
.add('Sort Events', () => <SortEvents />)
369+
.add('Sort Management', () => <SortManagement />)
368370
.add('Custom Sort Value', () => <CustomSortValue />)
369371
.add('Custom Sort Fuction', () => <CustomSortTable />)
370372
.add('Custom Sort Caret', () => <CustomSortCaretTable />)

‎packages/react-bootstrap-table2/src/bootstrap-table.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,10 @@ BootstrapTable.propTypes = {
232232
dataField: PropTypes.string.isRequired,
233233
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
234234
})),
235+
sort: PropTypes.shape({
236+
dataField: PropTypes.string,
237+
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
238+
}),
235239
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
236240
overlay: PropTypes.func,
237241
onTableChange: PropTypes.func,

‎packages/react-bootstrap-table2/src/contexts/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@ const withContext = Base =>
247247
ref={ n => this.sortContext = n }
248248
defaultSorted={ this.props.defaultSorted }
249249
defaultSortDirection={ this.props.defaultSortDirection }
250+
sort={ this.props.sort }
250251
data={ rootProps.getData(filterProps, searchProps) }
251252
>
252253
<this.SortContext.Consumer>

‎packages/react-bootstrap-table2/src/contexts/sort-context.js‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint camelcase: 0 */
12
/* eslint react/require-default-props: 0 */
23
import React from 'react';
34
import PropTypes from 'prop-types';
@@ -19,26 +20,25 @@ export default (
1920
dataField: PropTypes.string.isRequired,
2021
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
2122
})),
23+
sort: PropTypes.shape({
24+
dataField: PropTypes.string,
25+
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
26+
}),
2227
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
2328
}
2429

2530
constructor(props) {
2631
super(props);
2732
let sortOrder;
2833
let sortColumn;
29-
const { columns, defaultSorted, defaultSortDirection } = props;
34+
const { defaultSorted, defaultSortDirection, sort } = props;
3035

3136
if (defaultSorted && defaultSorted.length > 0) {
32-
const sortField = defaultSorted[0].dataField;
3337
sortOrder = defaultSorted[0].order || defaultSortDirection;
34-
const sortColumns = columns.filter(col => col.dataField === sortField);
35-
if (sortColumns.length > 0) {
36-
sortColumn = sortColumns[0];
37-
38-
if (sortColumn.onSort) {
39-
sortColumn.onSort(sortField, sortOrder);
40-
}
41-
}
38+
sortColumn = this.initSort(defaultSorted[0].dataField, sortOrder);
39+
} else if (sort && sort.dataField && sort.order) {
40+
sortOrder = sort.order;
41+
sortColumn = this.initSort(sort.dataField, sortOrder);
4242
}
4343
this.state = { sortOrder, sortColumn };
4444
}
@@ -50,6 +50,30 @@ export default (
5050
}
5151
}
5252

53+
UNSAFE_componentWillReceiveProps(nextProps) {
54+
const { sort, columns } = nextProps;
55+
if (sort && sort.dataField && sort.order) {
56+
this.setState({
57+
sortOrder: sort.order,
58+
sortColumn: columns.find(col => col.dataField === sort.dataField)
59+
});
60+
}
61+
}
62+
63+
initSort(sortField, sortOrder) {
64+
let sortColumn;
65+
const { columns } = this.props;
66+
const sortColumns = columns.filter(col => col.dataField === sortField);
67+
if (sortColumns.length > 0) {
68+
sortColumn = sortColumns[0];
69+
70+
if (sortColumn.onSort) {
71+
sortColumn.onSort(sortField, sortOrder);
72+
}
73+
}
74+
return sortColumn;
75+
}
76+
5377
handleSort = (column) => {
5478
const sortOrder = dataOperator.nextOrder(column, this.state, this.props.defaultSortDirection);
5579

0 commit comments

Comments
 (0)