diff --git a/docs/README.md b/docs/README.md index 319d9fc..1637a6b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -211,7 +211,15 @@ You can give `dataField` and `order` to specify the sorting state in table, For ``` #### One-time sorting configuration -**TBD** +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. +So here we give you a chance to just setup these prop in one time. + +```js + +``` ### 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/one-time-sort-configuration.js b/packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js new file mode 100644 index 0000000..93e012e --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js @@ -0,0 +1,98 @@ +/* eslint no-unused-vars: 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 columns = [{ + dataField: 'id', + text: 'Product ID', + sort: true +}, { + dataField: 'name', + text: 'Product Name', + sort: true +}, { + dataField: 'price', + text: 'Product Price' +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = [{ + dataField: 'id', + text: 'Product ID', + sort: true +}, { + dataField: 'name', + text: 'Product Name', + sort: true +}, { + dataField: 'price', + text: 'Product Price' +}]; + +class OnetimeSortConfiguration extends React.Component { + sortFunc = (a, b, order, dataField) => { + if (order === 'asc') { + return b - a; + } + return a - b; // desc + } + + render() { + const sortOption = { + // No need to configure sortFunc per column + sortFunc: this.sortFunc, + // No need to configure sortCaret per column + sortCaret: (order, column) => { + if (!order) return (  Desc/Asc); + else if (order === 'asc') return (  Desc/Asc); + else if (order === 'desc') return (  Desc/Asc); + return null; + } + }; + + return ( +
+ + + { sourceCode } +
+ ); + } +} +`; + +export default class OnetimeSortConfiguration extends React.Component { + sortFunc = (a, b, order, dataField) => { + if (order === 'asc') { + return b - a; + } + return a - b; // desc + } + + render() { + const sortOption = { + sortFunc: this.sortFunc, + sortCaret: (order, column) => { + if (!order) return (  Desc/Asc); + else if (order === 'asc') return (  Desc/Asc); + else if (order === 'desc') return (  Desc/Asc); + return null; + } + }; + + return ( +
+

Reverse Sorting Table

+ + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index be5a76b..9bca826 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -107,6 +107,7 @@ 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 OneTimeSortConfiguration from 'examples/sort/one-time-sort-configuration'; import CustomSortValue from 'examples/sort/custom-sort-value'; import CustomSortTable from 'examples/sort/custom-sort-table'; import CustomSortCaretTable from 'examples/sort/custom-sort-caret'; @@ -367,6 +368,7 @@ storiesOf('Sort Table', module) .add('Default Sort Direction Table', () => ) .add('Sort Events', () => ) .add('Sort Management', () => ) + .add('One-time Sort Configuation', () => ) .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 d51a2f3..fd0d817 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -97,6 +97,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { sortField={ this.props.sortField } sortOrder={ this.props.sortOrder } onSort={ this.props.onSort } + globalSortCaret={ this.props.sort && this.props.sort.sortCaret } onFilter={ this.props.onFilter } currFilters={ this.props.currFilters } onExternalFilter={ this.props.onExternalFilter } @@ -234,7 +235,9 @@ BootstrapTable.propTypes = { })), sort: PropTypes.shape({ dataField: PropTypes.string, - order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]) + order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]), + sortFunc: PropTypes.func, + sortCaret: PropTypes.func }), defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]), overlay: PropTypes.func, diff --git a/packages/react-bootstrap-table2/src/contexts/sort-context.js b/packages/react-bootstrap-table2/src/contexts/sort-context.js index e419093..7e7bed2 100644 --- a/packages/react-bootstrap-table2/src/contexts/sort-context.js +++ b/packages/react-bootstrap-table2/src/contexts/sort-context.js @@ -22,7 +22,8 @@ export default ( })), sort: PropTypes.shape({ dataField: PropTypes.string, - order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]) + order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]), + sortFunc: PropTypes.func }), defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]) } @@ -92,9 +93,11 @@ export default ( render() { let { data } = this.props; + const { sort } = this.props; const { sortOrder, sortColumn } = this.state; if (!isRemoteSort() && sortColumn) { - data = dataOperator.sort(data, sortOrder, sortColumn); + const sortFunc = sortColumn.sortFunc ? sortColumn.sortFunc : (sort && sort.sortFunc); + data = dataOperator.sort(data, sortOrder, { ...sortColumn, sortFunc }); } return ( diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index 8552c53..51729be 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -22,7 +22,8 @@ class HeaderCell extends eventDelegater(React.Component) { onFilter, currFilters, filterPosition, - onExternalFilter + onExternalFilter, + globalSortCaret } = this.props; const { @@ -42,6 +43,8 @@ class HeaderCell extends eventDelegater(React.Component) { headerSortingStyle } = column; + const sortCaretfunc = sortCaret || globalSortCaret; + const delegateEvents = this.delegate(headerEvents); const customAttrs = _.isFunction(headerAttrs) @@ -81,7 +84,9 @@ class HeaderCell extends eventDelegater(React.Component) { cellAttrs.className = cs(cellAttrs.className, 'sortable'); if (sorting) { - sortSymbol = sortCaret ? sortCaret(sortOrder, column) : ; + sortSymbol = sortCaretfunc ? + sortCaretfunc(sortOrder, column) : + ; // append customized classes or style if table was sorting based on the current column. cellClasses = cs( @@ -98,7 +103,7 @@ class HeaderCell extends eventDelegater(React.Component) { : headerSortingStyle }; } else { - sortSymbol = sortCaret ? sortCaret(undefined, column) : ; + sortSymbol = sortCaretfunc ? sortCaretfunc(undefined, column) : ; } } diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index 3d62051..c81fd55 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/packages/react-bootstrap-table2/src/header.js @@ -21,7 +21,8 @@ const Header = (props) => { expandRow, currFilters, onExternalFilter, - filterPosition + filterPosition, + globalSortCaret } = props; let SelectionHeaderCellComp = () => null; @@ -52,6 +53,7 @@ const Header = (props) => { onSort={ onSort } sorting={ currSort } sortOrder={ sortOrder } + globalSortCaret={ globalSortCaret } isLastSorting={ isLastSorting } onFilter={ onFilter } currFilters={ currFilters } @@ -95,6 +97,7 @@ Header.propTypes = { selectRow: PropTypes.object, currFilters: PropTypes.object, onExternalFilter: PropTypes.func, + globalSortCaret: PropTypes.func, className: PropTypes.string, expandRow: PropTypes.object, filterPosition: PropTypes.oneOf([