diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js index 54c1afbe4..7d0b5bcb1 100644 --- a/src/components/Table/UncontrolledTable.js +++ b/src/components/Table/UncontrolledTable.js @@ -50,7 +50,12 @@ export default class UncontrolledTable extends React.Component { }; } - sortedData = (rows, column, ascending) => orderBy(rows, [column], [ascending ? 'asc' : 'desc']); + sortedData = (rows, column, ascending) => + orderBy( + rows, + (row) => (typeof row[column] === 'string' ? row[column].toLowerCase() : row[column]), + [ascending ? 'asc' : 'desc'] + ); sortBy = (column, ascending) => { let sort; diff --git a/src/components/Table/UncontrolledTable.spec.js b/src/components/Table/UncontrolledTable.spec.js index b29a9ee56..f99e6b652 100644 --- a/src/components/Table/UncontrolledTable.spec.js +++ b/src/components/Table/UncontrolledTable.spec.js @@ -366,42 +366,75 @@ describe('', () => { }); it('should show correct rows on sort change', () => { - const columns = [{ header: 'Name', key: 'name', cell: (row) => row }]; - const rows = [{ name: 'Alpha' }, { name: 'Bravo' }, { name: 'Charlie' }]; + const columns = [ + { header: 'Name', key: 'name', cell: (row) => row }, + { header: 'Age', key: 'age', cell: (row) => row }, + ]; + const rows = [ + { name: 'Alpha', age: 35 }, + { name: 'Bravo', age: 30 }, + { name: 'Charlie', age: 25 }, + { name: 'amanda', age: 50 }, + { name: '2 Chainz', age: 40 }, + ]; const wrapper = shallow( ); assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ - { name: 'Charlie' }, - { name: 'Bravo' }, - { name: 'Alpha' }, + { name: 'Charlie', age: 25 }, + { name: 'Bravo', age: 30 }, + { name: 'amanda', age: 50 }, + { name: 'Alpha', age: 35 }, + { name: '2 Chainz', age: 40 }, ]); - wrapper.find(SortableTable).prop('columns')[0].onSort(true); // Simulate sort by ascending order + wrapper.find(SortableTable).prop('columns')[0].onSort(true); // Simulate sort by ascending order by name (string) wrapper.update(); assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ - { name: 'Alpha' }, - { name: 'Bravo' }, - { name: 'Charlie' }, + { name: '2 Chainz', age: 40 }, + { name: 'Alpha', age: 35 }, + { name: 'amanda', age: 50 }, + { name: 'Bravo', age: 30 }, + { name: 'Charlie', age: 25 }, ]); - wrapper.find(SortableTable).prop('columns')[0].onSort(false); // Simulate sort by descending order + wrapper.find(SortableTable).prop('columns')[0].onSort(false); // Simulate sort by descending order by name (string) wrapper.update(); assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ - { name: 'Charlie' }, - { name: 'Bravo' }, - { name: 'Alpha' }, + { name: 'Charlie', age: 25 }, + { name: 'Bravo', age: 30 }, + { name: 'amanda', age: 50 }, + { name: 'Alpha', age: 35 }, + { name: '2 Chainz', age: 40 }, + ]); + + wrapper.find(SortableTable).prop('columns')[1].onSort(true); // Simulate sort by ascending order by age (integer) + wrapper.update(); + assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ + { name: 'Charlie', age: 25 }, + { name: 'Bravo', age: 30 }, + { name: 'Alpha', age: 35 }, + { name: '2 Chainz', age: 40 }, + { name: 'amanda', age: 50 }, + ]); + + wrapper.find(SortableTable).prop('columns')[1].onSort(false); // Simulate sort by descending order by age (integer) + wrapper.update(); + assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ + { name: 'amanda', age: 50 }, + { name: '2 Chainz', age: 40 }, + { name: 'Alpha', age: 35 }, + { name: 'Bravo', age: 30 }, + { name: 'Charlie', age: 25 }, ]); }); - it('should show correct rows on sort change', () => { + it('should call onSort with correct props on sort change', () => { const columns = [ { header: 'Name', key: 'name', cell: (row) => row }, { header: 'Age', key: 'age', cell: (row) => row },