From ec1f96cd1fbac3f08164f6dc922cb41272640e79 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 7 Sep 2019 15:56:13 +0800 Subject: [PATCH] fix #1082 --- docs/columns.md | 37 ++++++++- .../examples/sort/custom-sort-value.js | 78 +++++++++++++++++++ .../src/utils/common.js | 5 ++ .../stories/index.js | 2 + .../react-bootstrap-table2/src/store/sort.js | 11 ++- 5 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js diff --git a/docs/columns.md b/docs/columns.md index 525ec4d..723367b 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -13,6 +13,7 @@ Available properties in a column object: * [formatExtraData](#formatExtraData) * [type](#type) * [sort](#sort) +* [sortValue](#sortValue) * [sortFunc](#sortFunc) * [sortCaret](#sortCaret) * [onSort](#onSort) @@ -141,8 +142,42 @@ Specify the data type on column. Available value so far is `string`, `number`, ` ## column.sort - [Bool] Enable the column sort via a `true` value given. +## column.sortValue - [Function] +`column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting. + +For example, consider following data: + +```js +const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money']; +const data = [{id: 1, type: 2}, {id: 2, type: 1}, {id: 3, type:0}]; +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'type', + text: 'Job Type' + sort: true, + formatter: (cell, row) => types[cell] +}] +``` + +In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via [`column.formatter`](#formatter), which will lead confuse because we are sorting by type value instead of type name. So `sortValue` is a way for you to decide what kind of value should be adopted when sorting on a specify column: + +```js +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'type', + text: 'Job Type' + sort: true, + formatter: (cell, row) => types[cell], + sortValue: (cell, row) => types[cell] // we use type name to sort. +}] +``` + ## column.sortFunc - [Function] -`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments: +`column.sortFunc` only work when `column.sort` enabled. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments: ```js { diff --git a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js new file mode 100644 index 0000000..74e7f84 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js @@ -0,0 +1,78 @@ +/* eslint no-unused-vars: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; +import { jobsGenerator1 } from 'utils/common'; + +const jobs = jobsGenerator1(8); + +const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money']; + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + sort: true, + formatter: (cell, row) => types[cell], + sortValue: (cell, row) => types[cell] +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money']; + +const columns = [{ + dataField: 'id', + text: 'Job ID' +}, { + dataField: 'name', + text: 'Job Name' +}, { + dataField: 'owner', + text: 'Job Owner' +}, { + dataField: 'type', + text: 'Job Type', + sort: true, + formatter: (cell, row) => types[cell], + sortValue: (cell, row) => types[cell] +}]; + + +`; + +export default class Test extends React.Component { + constructor(props) { + super(props); + this.state = { data: jobs }; + } + + handleClick = () => { + this.setState(() => { + const newProducts = jobsGenerator1(21); + return { + data: newProducts + }; + }); + } + + render() { + return ( +
+ + + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js index f6baec2..5592779 100644 --- a/packages/react-bootstrap-table2-example/src/utils/common.js +++ b/packages/react-bootstrap-table2-example/src/utils/common.js @@ -29,6 +29,11 @@ export const withOnSale = rows => rows.map((row) => { return row; }); +export const withRandomPrice = rows => rows.map((row) => { + row.price = Math.floor((Math.random() * 10) + 2000); + return row; +}); + export const productsQualityGenerator = (quantity = 5, factor = 0) => Array.from({ length: quantity }, (value, index) => ({ id: index + factor, diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index c58f70a..5587d0b 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -104,6 +104,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 CustomSortValue from 'examples/sort/custom-sort-value'; import CustomSortTable from 'examples/sort/custom-sort-table'; import CustomSortCaretTable from 'examples/sort/custom-sort-caret'; import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes'; @@ -357,6 +358,7 @@ storiesOf('Sort Table', module) .add('Default Sort Table', () => ) .add('Default Sort Direction Table', () => ) .add('Sort Events', () => ) + .add('Custom Sort Value', () => ) .add('Custom Sort Fuction', () => ) .add('Custom Sort Caret', () => ) .add('Custom Classes on Sorting Header Column', () => ) diff --git a/packages/react-bootstrap-table2/src/store/sort.js b/packages/react-bootstrap-table2/src/store/sort.js index dd2fd21..1f349ac 100644 --- a/packages/react-bootstrap-table2/src/store/sort.js +++ b/packages/react-bootstrap-table2/src/store/sort.js @@ -14,14 +14,19 @@ function comparator(a, b) { return result; } -export const sort = (data, sortOrder, { dataField, sortFunc }) => { +export const sort = (data, sortOrder, { dataField, sortFunc, sortValue }) => { const _data = [...data]; _data.sort((a, b) => { let result; let valueA = _.get(a, dataField); let valueB = _.get(b, dataField); - valueA = _.isDefined(valueA) ? valueA : ''; - valueB = _.isDefined(valueB) ? valueB : ''; + if (sortValue) { + valueA = sortValue(valueA, a); + valueB = sortValue(valueB, b); + } else { + valueA = _.isDefined(valueA) ? valueA : ''; + valueB = _.isDefined(valueB) ? valueB : ''; + } if (sortFunc) { result = sortFunc(valueA, valueB, sortOrder, dataField, a, b);