mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
fix #1144
This commit is contained in:
parent
2068f518f6
commit
a07b2da00a
@ -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
|
||||
<BootstrapTable sort={ {
|
||||
sortCaret: ...
|
||||
sortFunc: ...
|
||||
} }>
|
||||
```
|
||||
|
||||
### <a name='defaultSorted'>defaultSorted - [Array]</a>
|
||||
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
|
||||
|
||||
98
packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js
vendored
Normal file
98
packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js
vendored
Normal file
@ -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 (<span> Desc/Asc</span>);
|
||||
else if (order === 'asc') return (<span> Desc/<font color="red">Asc</font></span>);
|
||||
else if (order === 'desc') return (<span> <font color="red">Desc</font>/Asc</span>);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
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 (<span> Desc/Asc</span>);
|
||||
else if (order === 'asc') return (<span> Desc/<font color="red">Asc</font></span>);
|
||||
else if (order === 'desc') return (<span> <font color="red">Desc</font>/Asc</span>);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>Reverse Sorting Table</h3>
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } sort={ sortOption } />
|
||||
<Code>{ sourceCode }</Code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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', () => <DefaultSortDirectionTable />)
|
||||
.add('Sort Events', () => <SortEvents />)
|
||||
.add('Sort Management', () => <SortManagement />)
|
||||
.add('One-time Sort Configuation', () => <OneTimeSortConfiguration />)
|
||||
.add('Custom Sort Value', () => <CustomSortValue />)
|
||||
.add('Custom Sort Fuction', () => <CustomSortTable />)
|
||||
.add('Custom Sort Caret', () => <CustomSortCaretTable />)
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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) : <SortCaret order={ sortOrder } />;
|
||||
sortSymbol = sortCaretfunc ?
|
||||
sortCaretfunc(sortOrder, column) :
|
||||
<SortCaret order={ sortOrder } />;
|
||||
|
||||
// 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 />;
|
||||
sortSymbol = sortCaretfunc ? sortCaretfunc(undefined, column) : <SortSymbol />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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([
|
||||
|
||||
Loading…
Reference in New Issue
Block a user