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