diff --git a/examples/js/sort/custom-sort-with-extra-data-table.js b/examples/js/sort/custom-sort-with-extra-data-table.js new file mode 100644 index 000000000..6b2c50d33 --- /dev/null +++ b/examples/js/sort/custom-sort-with-extra-data-table.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; + +const products = []; + +const qualityType = { + 0: 'good', + 1: 'bad', + 2: 'unknown' +}; + +function addProducts(quantity) { + const startId = products.length; + for (let i = 0; i < quantity; i++) { + const id = startId + i; + products.push({ + id: id, + name: 'Item name ' + id, + quality: i % 3 + }); + } +} + +addProducts(5); + +function enumFormatter(cell, row, enumObject) { + return enumObject[cell]; +} + +function sortByName(a, b, order, field, enumObject) { + if (order === 'desc') { + if (enumObject[a[field]] > enumObject[b[field]]) { + return -1; + } else if (enumObject[a[field]] < enumObject[b[field]]) { + return 1; + } + return 0; + } + if (enumObject[a[field]] < enumObject[b[field]]) { + return -1; + } else if (enumObject[a[field]] > enumObject[b[field]]) { + return 1; + } + return 0; +} + +export default class CustomSortWithExtraDataTable extends React.Component { + render() { + return ( + + Product ID + Product Name + + Product Quality + + ); + } +} diff --git a/examples/js/sort/demo.js b/examples/js/sort/demo.js index ae1f0c878..1e4ca73ec 100755 --- a/examples/js/sort/demo.js +++ b/examples/js/sort/demo.js @@ -3,6 +3,7 @@ import React from 'react'; import SortTable from './sort-table'; import DefaultSortTable from './default-sort-table'; import CustomSortTable from './custom-sort-table'; +import CustomSortWithExtraDataTable from './custom-sort-with-extra-data-table'; import ReusableCustomSortTable from './reusable-custom-sort-table'; import SortHookTable from './sort-hook-table'; import DisableSortIndicatorTable from './disable-sort-indicator-table'; @@ -38,6 +39,15 @@ class Demo extends React.Component { +
+
+
Customize Table Sort With Extra Data Example
+
+
Source in /examples/js/sort/custom-sort-with-extra-data-table.js
+ +
+
+
Reusable Customize Table Sort Example
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js index bcd0453c9..db6cc537e 100644 --- a/src/BootstrapTable.js +++ b/src/BootstrapTable.js @@ -126,6 +126,7 @@ class BootstrapTable extends Component { width: column.props.width, text: column.props.children, sortFunc: column.props.sortFunc, + sortFuncExtraData: column.props.sortFuncExtraData, index: i }; }); diff --git a/src/TableHeaderColumn.js b/src/TableHeaderColumn.js index f8f83643f..594887766 100644 --- a/src/TableHeaderColumn.js +++ b/src/TableHeaderColumn.js @@ -123,6 +123,7 @@ TableHeaderColumn.propTypes = { className: PropTypes.string, width: PropTypes.string, sortFunc: PropTypes.func, + sortFuncExtraData: PropTypes.any, columnClassName: PropTypes.any, filterFormatted: PropTypes.bool, sort: PropTypes.string, @@ -159,6 +160,7 @@ TableHeaderColumn.defaultProps = { filterFormatted: false, sort: undefined, formatExtraData: undefined, + sortFuncExtraData: undefined, filter: undefined, sortIndicator: true }; diff --git a/src/store/TableDataStore.js b/src/store/TableDataStore.js index ca79e9ced..dbdbef45a 100644 --- a/src/store/TableDataStore.js +++ b/src/store/TableDataStore.js @@ -4,11 +4,11 @@ /* eslint eqeqeq: 0 */ import Const from '../Const'; -function _sort(arr, sortField, order, sortFunc) { +function _sort(arr, sortField, order, sortFunc, sortFuncExtraData) { order = order.toLowerCase(); arr.sort((a, b) => { if (sortFunc) { - return sortFunc(a, b, order, sortField); + return sortFunc(a, b, order, sortField, sortFuncExtraData); } else { if (order === Const.SORT_DESC) { return a[sortField] > b[sortField] ? -1 : ((a[sortField] < b[sortField]) ? 1 : 0); @@ -93,8 +93,8 @@ export class TableDataStore { let currentDisplayData = this.getCurrentDisplayData(); if (!this.colInfos[sortField]) return this; - const { sortFunc } = this.colInfos[sortField]; - currentDisplayData = _sort(currentDisplayData, sortField, order, sortFunc); + const { sortFunc, sortFuncExtraData } = this.colInfos[sortField]; + currentDisplayData = _sort(currentDisplayData, sortField, order, sortFunc, sortFuncExtraData); return this; }