diff --git a/src/components/UncontrolledTable.js b/src/components/UncontrolledTable.js
index c05035763..a156bab8b 100644
--- a/src/components/UncontrolledTable.js
+++ b/src/components/UncontrolledTable.js
@@ -18,7 +18,8 @@ export default class UncontrolledTable extends React.Component {
column: PropTypes.string,
ascending: PropTypes.bool
}),
- onSelect: PropTypes.func
+ onSelect: PropTypes.func,
+ onSort: PropTypes.func
};
static defaultProps = {
@@ -31,7 +32,8 @@ export default class UncontrolledTable extends React.Component {
sort: {
ascending: true
},
- onSelect: () => {}
+ onSelect: () => {},
+ onSort: () => {}
};
state = {
@@ -48,21 +50,19 @@ export default class UncontrolledTable extends React.Component {
);
sortBy = (column, ascending) => {
+ let sort;
if (this.state.sort.column === column) {
- this.setState({
- sort: {
- column,
- ascending
- }
- });
+ sort = {
+ column,
+ ascending
+ };
} else {
- this.setState({
- sort: {
- column,
- ascending: true
- }
- });
+ sort = {
+ column,
+ ascending: true
+ };
}
+ this.setState({ sort }, () => this.props.onSort(sort));
};
get someSelected() {
diff --git a/stories/Table.js b/stories/Table.js
index 9134e9281..ab5ac1172 100644
--- a/stories/Table.js
+++ b/stories/Table.js
@@ -149,6 +149,7 @@ storiesOf('Table', module)
paginated={boolean('paginated', false)}
pageSize={number('pageSize', 10)}
onSelect={action('onSelect')}
+ onSort={action('onSort')}
/>
))
diff --git a/test/components/UncontrolledTable.spec.js b/test/components/UncontrolledTable.spec.js
index dfe83d926..ee44f0ab0 100644
--- a/test/components/UncontrolledTable.spec.js
+++ b/test/components/UncontrolledTable.spec.js
@@ -397,6 +397,33 @@ describe('', () => {
assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [{ name: 'Charlie' }, { name: 'Bravo' }, { name: 'Alpha' }]);
});
+ it('should show correct rows on sort change', () => {
+ const columns = [{ header: 'Name', key: 'name', cell: row => row }, { header: 'Age', key: 'age', cell: row => row }];
+ const rows = [{ name: 'Alpha', age: 1 }, { name: 'Bravo', age: 5 }, { name: 'Charlie', age: 3 }];
+ const onSort = sinon.stub();
+
+ const wrapper = shallow(
+
+ );
+
+ wrapper.find(SortableTable).prop('columns')[0].onSort(true); // Simulate sort by ascending order
+ sinon.assert.calledWith(onSort, { column: 'name', ascending: true });
+ wrapper.update();
+
+ wrapper.find(SortableTable).prop('columns')[0].onSort(false); // Simulate sort by descending order
+ sinon.assert.calledWith(onSort, { column: 'name', ascending: false });
+ wrapper.update();
+
+ wrapper.find(SortableTable).prop('columns')[1].onSort(false);
+ sinon.assert.calledWith(onSort, { column: 'age', ascending: true });
+ wrapper.update();
+ });
+
it('should hide columns when hidden', () => {
const columns = [
{ header: 'Name', cell: row => row },