From 5a0536b1b2e4f3eacfbfbccafd9312ad8d3b2908 Mon Sep 17 00:00:00 2001 From: Jeremy Kirchhoff Date: Tue, 24 Oct 2023 11:44:04 -0700 Subject: [PATCH] fix: fix column sorting for keys that use dot notation This commit f599fd25fa57272e166a42b15de4895687a50ad7 made a change to column sorting to make sorting case insenstive. However, this change introduced a bug where column keys that used dot notation didn't work correctly for sorting anymore. --- src/components/Table/UncontrolledTable.js | 6 +- .../Table/UncontrolledTable.spec.js | 71 +++++++++++-------- 2 files changed, 46 insertions(+), 31 deletions(-) diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js index 7d0b5bcb1..67fd0bb37 100644 --- a/src/components/Table/UncontrolledTable.js +++ b/src/components/Table/UncontrolledTable.js @@ -1,5 +1,6 @@ import isEqual from 'lodash.isequal'; import orderBy from 'lodash.orderby'; +import get from 'lodash.get'; import some from 'lodash.some'; import PropTypes from 'prop-types'; import React from 'react'; @@ -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('', () => { 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( ', () => { ); 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' } }, ]); });