fix: update UncontrolledTable to use case insensitive sorting

Prior to this change columns were sorted giving priority to uppercase over lowercase. After this change, columns with string values will be sorted case insensitive.
appfolio · Oct 20, 2023 · c35bf3a · c35bf3a
1 parent 9685647
commit c35bf3a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 17 deletions.
diff --git 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
@@ -366,42 +366,75 @@ describe('<UncontrolledTable />', () => {
   });
 
   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(
       <UncontrolledTable
         columns={columns}
         rows={rows}
         sort={{ column: 'name', ascending: false }}
-        paginated
-        pageSize={4}
       />
     );
 
     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 },