diff --git a/docs/columns.md b/docs/columns.md
index cf546a8..b80c48a 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -12,6 +12,7 @@ Available properties in a column object:
* [formatExtraData](#formatExtraData)
* [sort](#sort)
* [sortFunc](#sortFunc)
+* [onSort](#onSort)
* [classes](#classes)
* [style](#style)
* [title](#title)
@@ -122,6 +123,19 @@ Enable the column sort via a `true` value given.
```
> The possible value of `order` argument is **`asc`** and **`desc`**.
+## column.onSort - [Function]
+`column.onSort` is an event listener for sort change event:
+
+```js
+{
+ // omit...
+ sort: true,
+ onSort: (field, order) => {
+ // ....
+ }
+}
+```
+
## column.classes - [String | Function]
It's availabe to have custom class on table column:
diff --git a/docs/migration.md b/docs/migration.md
index 65d1040..ae009e4 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -60,6 +60,7 @@ Please see [Work with table sort](https://react-bootstrap-table.github.io/react-
- [x] Default Sort
- [x] Remote mode
- [x] Custom the sorting header
+- [x] Sort event listener
- [ ] Custom the sort caret
- [ ] Sort management
- [ ] Multi sort
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index d5dd47b..b6af21e 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -131,6 +131,7 @@ HeaderCell.propTypes = {
attrs: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
sort: PropTypes.bool,
sortFunc: PropTypes.func,
+ onSort: PropTypes.func,
editable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
editCellStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
editCellClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
diff --git a/packages/react-bootstrap-table2/src/sort/wrapper.js b/packages/react-bootstrap-table2/src/sort/wrapper.js
index 45414e3..90a9bb9 100644
--- a/packages/react-bootstrap-table2/src/sort/wrapper.js
+++ b/packages/react-bootstrap-table2/src/sort/wrapper.js
@@ -25,6 +25,10 @@ export default Base =>
if (column.length > 0) {
store.setSort(column[0], order);
+ if (column[0].onSort) {
+ column[0].onSort(store.sortField, store.sortOrder);
+ }
+
if (this.isRemoteSort() || this.isRemotePagination()) {
this.handleSortChange();
} else {
@@ -48,6 +52,10 @@ export default Base =>
const { store } = this.props;
store.setSort(column);
+ if (column.onSort) {
+ column.onSort(store.sortField, store.sortOrder);
+ }
+
if (this.isRemoteSort() || this.isRemotePagination()) {
this.handleSortChange();
} else {
diff --git a/packages/react-bootstrap-table2/test/sort/wrapper.test.js b/packages/react-bootstrap-table2/test/sort/wrapper.test.js
index d8a3ce7..1c28b8c 100644
--- a/packages/react-bootstrap-table2/test/sort/wrapper.test.js
+++ b/packages/react-bootstrap-table2/test/sort/wrapper.test.js
@@ -10,16 +10,7 @@ import wrapperFactory from '../../src/sort/wrapper';
describe('SortWrapper', () => {
let wrapper;
-
- const columns = [{
- dataField: 'id',
- text: 'ID',
- sort: true
- }, {
- dataField: 'name',
- text: 'Name',
- sort: true
- }];
+ let columns;
const data = [{
id: 1,
@@ -37,6 +28,15 @@ describe('SortWrapper', () => {
const SortWrapper = wrapperFactory(BootstrapTable);
beforeEach(() => {
+ columns = [{
+ dataField: 'id',
+ text: 'ID',
+ sort: true
+ }, {
+ dataField: 'name',
+ text: 'Name',
+ sort: true
+ }];
wrapper = shallow(
{
describe('call handleSort function', () => {
let sortBySpy;
- const sortColumn = columns[0];
+ let sortColumn;
beforeEach(() => {
+ sortColumn = columns[0];
store = new Store(keyField);
store.data = data;
sortBySpy = sinon.spy(store, 'sortBy');
@@ -130,6 +131,32 @@ describe('SortWrapper', () => {
expect(onTableChangeCB.calledOnce).toBeTruthy();
});
});
+
+ describe('when column.onSort prop is defined', () => {
+ const onSortCB = jest.fn();
+
+ beforeEach(() => {
+ columns[0].onSort = onSortCB;
+ wrapper = shallow(
+
+ );
+ wrapper.instance().handleSort(sortColumn);
+ });
+
+ it('should calling column.onSort function correctly', () => {
+ expect(onSortCB).toHaveBeenCalledTimes(1);
+ expect(onSortCB).toHaveBeenCalledWith(columns[0].dataField, Const.SORT_DESC);
+
+ wrapper.instance().handleSort(sortColumn);
+ expect(onSortCB).toHaveBeenCalledTimes(2);
+ expect(onSortCB).toHaveBeenCalledWith(columns[0].dataField, Const.SORT_ASC);
+ });
+ });
});
describe('when defaultSorted prop is defined', () => {
@@ -161,6 +188,28 @@ describe('SortWrapper', () => {
it('should update store.sortOrder correctly', () => {
expect(store.sortOrder).toEqual(defaultSorted[0].order);
});
+
+ describe('when column.onSort prop is defined', () => {
+ const onSortCB = jest.fn();
+
+ beforeEach(() => {
+ columns[1].onSort = onSortCB;
+ wrapper = shallow(
+
+ );
+ });
+
+ it('should calling column.onSort function correctly', () => {
+ expect(onSortCB).toHaveBeenCalledTimes(1);
+ expect(onSortCB).toHaveBeenCalledWith(defaultSorted[0].dataField, defaultSorted[0].order);
+ });
+ });
});
describe('componentWillReceiveProps', () => {