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 },