diff --git a/docs/README.md b/docs/README.md index 0ec8442..319d9fc 100644 --- a/docs/README.md +++ b/docs/README.md @@ -28,6 +28,7 @@ * [rowClasses](#rowClasses) * [rowEvents](#rowEvents) * [hiddenRows](#hiddenRows) +* [sort](#sort) * [defaultSorted](#defaultSorted) * [defaultSortDirection](#defaultSortDirection) * [pagination](#pagination) @@ -199,6 +200,19 @@ const hiddenRows = [1, 4]; ``` +### sort - [Object] +Two cases you probably need to configure `sort` prop: + +#### Manage sorting state +You can give `dataField` and `order` to specify the sorting state in table, For example + +```js + +``` + +#### 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);