+```
+
+#### One-time sorting configuration
+**TBD**
+
### defaultSorted - [Array]
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
diff --git a/packages/react-bootstrap-table2-example/examples/sort/sort-management.js b/packages/react-bootstrap-table2-example/examples/sort/sort-management.js
new file mode 100644
index 0000000..32a5e01
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/sort-management.js
@@ -0,0 +1,118 @@
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class SortManagement extends React.Component {
+ state = {
+ field: null,
+ order: null
+ }
+
+ handleSort = (field, order) => {
+ this.setState({
+ field,
+ order
+ });
+ }
+
+ handleSortById = () => {
+ this.setState({
+ field: 'id',
+ order: 'desc'
+ });
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }];
+ return (
+
+
+
+ { sourceCode }
+
+ );
+ }
+}
+`;
+
+export default class SortManagement extends React.Component {
+ state = {
+ field: null,
+ order: null
+ }
+
+ handleSort = (field, order) => {
+ this.setState({
+ field,
+ order
+ });
+ }
+
+ handleSortById = () => {
+ this.setState({
+ field: 'id',
+ order: 'desc'
+ });
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }];
+ return (
+
+
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 829a358..be5a76b 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -106,6 +106,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
import DefaultSortTable from 'examples/sort/default-sort-table';
import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
import SortEvents from 'examples/sort/sort-events';
+import SortManagement from 'examples/sort/sort-management';
import CustomSortValue from 'examples/sort/custom-sort-value';
import CustomSortTable from 'examples/sort/custom-sort-table';
import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -365,6 +366,7 @@ storiesOf('Sort Table', module)
.add('Default Sort Table', () => )
.add('Default Sort Direction Table', () => )
.add('Sort Events', () => )
+ .add('Sort Management', () => )
.add('Custom Sort Value', () => )
.add('Custom Sort Fuction', () => )
.add('Custom Sort Caret', () => )
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 9c2c791..d51a2f3 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -232,6 +232,10 @@ BootstrapTable.propTypes = {
dataField: PropTypes.string.isRequired,
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
})),
+ sort: PropTypes.shape({
+ dataField: PropTypes.string,
+ order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+ }),
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
overlay: PropTypes.func,
onTableChange: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 7b58734..6f18b72 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -247,6 +247,7 @@ const withContext = Base =>
ref={ n => this.sortContext = n }
defaultSorted={ this.props.defaultSorted }
defaultSortDirection={ this.props.defaultSortDirection }
+ sort={ this.props.sort }
data={ rootProps.getData(filterProps, searchProps) }
>
diff --git a/packages/react-bootstrap-table2/src/contexts/sort-context.js b/packages/react-bootstrap-table2/src/contexts/sort-context.js
index 033d99a..e419093 100644
--- a/packages/react-bootstrap-table2/src/contexts/sort-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/sort-context.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
/* eslint react/require-default-props: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -19,6 +20,10 @@ export default (
dataField: PropTypes.string.isRequired,
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
})),
+ sort: PropTypes.shape({
+ dataField: PropTypes.string,
+ order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+ }),
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
}
@@ -26,19 +31,14 @@ export default (
super(props);
let sortOrder;
let sortColumn;
- const { columns, defaultSorted, defaultSortDirection } = props;
+ const { defaultSorted, defaultSortDirection, sort } = props;
if (defaultSorted && defaultSorted.length > 0) {
- const sortField = defaultSorted[0].dataField;
sortOrder = defaultSorted[0].order || defaultSortDirection;
- const sortColumns = columns.filter(col => col.dataField === sortField);
- if (sortColumns.length > 0) {
- sortColumn = sortColumns[0];
-
- if (sortColumn.onSort) {
- sortColumn.onSort(sortField, sortOrder);
- }
- }
+ sortColumn = this.initSort(defaultSorted[0].dataField, sortOrder);
+ } else if (sort && sort.dataField && sort.order) {
+ sortOrder = sort.order;
+ sortColumn = this.initSort(sort.dataField, sortOrder);
}
this.state = { sortOrder, sortColumn };
}
@@ -50,6 +50,30 @@ export default (
}
}
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ const { sort, columns } = nextProps;
+ if (sort && sort.dataField && sort.order) {
+ this.setState({
+ sortOrder: sort.order,
+ sortColumn: columns.find(col => col.dataField === sort.dataField)
+ });
+ }
+ }
+
+ initSort(sortField, sortOrder) {
+ let sortColumn;
+ const { columns } = this.props;
+ const sortColumns = columns.filter(col => col.dataField === sortField);
+ if (sortColumns.length > 0) {
+ sortColumn = sortColumns[0];
+
+ if (sortColumn.onSort) {
+ sortColumn.onSort(sortField, sortOrder);
+ }
+ }
+ return sortColumn;
+ }
+
handleSort = (column) => {
const sortOrder = dataOperator.nextOrder(column, this.state, this.props.defaultSortDirection);