diff --git a/package.json b/package.json index 2efce82a8..3d44e392e 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "imask": "^6.2.2", "invariant": "^2.2.4", "lodash.flow": "^3.5.0", + "lodash.get": "^4.4.2", "lodash.includes": "^4.3.0", "lodash.isequal": "^4.5.0", "lodash.noop": "^3.0.1", diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js index 7d0b5bcb1..b143e09fa 100644 --- a/src/components/Table/UncontrolledTable.js +++ b/src/components/Table/UncontrolledTable.js @@ -1,3 +1,4 @@ +import get from 'lodash.get'; import isEqual from 'lodash.isequal'; import orderBy from 'lodash.orderby'; import some from 'lodash.some'; @@ -53,7 +54,10 @@ export default class UncontrolledTable extends React.Component { sortedData = (rows, column, ascending) => orderBy( rows, - (row) => (typeof row[column] === 'string' ? row[column].toLowerCase() : row[column]), + (row) => { + const value = get(row, column); + return typeof value === 'string' ? value.toLowerCase() : value; + }, [ascending ? 'asc' : 'desc'] ); diff --git a/src/components/Table/UncontrolledTable.spec.js b/src/components/Table/UncontrolledTable.spec.js index f99e6b652..e9362058e 100644 --- a/src/components/Table/UncontrolledTable.spec.js +++ b/src/components/Table/UncontrolledTable.spec.js @@ -369,13 +369,14 @@ describe('<UncontrolledTable />', () => { const columns = [ { header: 'Name', key: 'name', cell: (row) => row }, { header: 'Age', key: 'age', cell: (row) => row }, + { header: 'Pet Name', key: 'pet.name', call: (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 }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, ]; const wrapper = shallow( <UncontrolledTable @@ -386,51 +387,61 @@ describe('<UncontrolledTable />', () => { ); assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ - { name: 'Charlie', age: 25 }, - { name: 'Bravo', age: 30 }, - { name: 'amanda', age: 50 }, - { name: 'Alpha', age: 35 }, - { name: '2 Chainz', age: 40 }, + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, ]); 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: '2 Chainz', age: 40 }, - { name: 'Alpha', age: 35 }, - { name: 'amanda', age: 50 }, - { name: 'Bravo', age: 30 }, - { name: 'Charlie', age: 25 }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, ]); 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', age: 25 }, - { name: 'Bravo', age: 30 }, - { name: 'amanda', age: 50 }, - { name: 'Alpha', age: 35 }, - { name: '2 Chainz', age: 40 }, + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, ]); 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 }, + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, ]); 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 }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, + ]); + + wrapper.find(SortableTable).prop('columns')[2].onSort(true); // Simulate sort by ascending order by pet.name (dot notation) + wrapper.update(); + assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [ + { name: 'Charlie', age: 25, pet: { name: 'Doggy' } }, + { name: 'amanda', age: 50, pet: { name: 'fido' } }, + { name: 'Bravo', age: 30, pet: { name: 'Fluffy' } }, + { name: '2 Chainz', age: 40, pet: { name: 'Garfield' } }, + { name: 'Alpha', age: 35, pet: { name: 'Kitty' } }, ]); }); diff --git a/yarn.lock b/yarn.lock index b1dca7fbc..1fcb43979 100644 --- a/yarn.lock +++ b/yarn.lock @@ -124,6 +124,7 @@ __metadata: jsdom: ^11.12.0 jsdom-global: ^3.0.2 lodash.flow: ^3.5.0 + lodash.get: ^4.4.2 lodash.includes: ^4.3.0 lodash.isequal: ^4.5.0 lodash.noop: ^3.0.1