Skip to content

Commit

Permalink
fix: issue with sorting by multiple columns in a table (#19920)
Browse files Browse the repository at this point in the history
Recent commit to sort alphanumeric columns via case insensitive
comparison broke the multi-column sort option. React-table only sorts
by the second (or third...) column if the first column matches.
Since the alphanumeric sort only returned -1 or 1, it never would move
to the subsequent columns when the earlier column values matched.
  • Loading branch information
stevetracvc authored Jun 23, 2022
1 parent f5cb23e commit a45d011
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,5 @@ export const sortAlphanumericCaseInsensitive = <D extends {}>(
if (!valueB || typeof valueB !== 'string') {
return 1;
}
return valueA.localeCompare(valueB) > 0 ? 1 : -1;
return valueA.localeCompare(valueB);
};
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,13 @@
* under the License.
*/

import { defaultOrderByFn, Row } from 'react-table';
import { sortAlphanumericCaseInsensitive } from '../src/DataTable/utils/sortAlphanumericCaseInsensitive';

type RecursivePartial<T> = {
[P in keyof T]?: T[P] | RecursivePartial<T[P]>;
};

const testData = [
{
values: {
Expand Down Expand Up @@ -133,3 +138,106 @@ describe('sortAlphanumericCaseInsensitive', () => {
]);
});
});

const testDataMulti: Array<RecursivePartial<Row<object>>> = [
{
values: {
colA: 'group 1',
colB: '10',
},
},
{
values: {
colA: 'group 1',
colB: '15',
},
},
{
values: {
colA: 'group 1',
colB: '20',
},
},
{
values: {
colA: 'group 2',
colB: '10',
},
},
{
values: {
colA: 'group 3',
colB: '10',
},
},
{
values: {
colA: 'group 3',
colB: '15',
},
},
{
values: {
colA: 'group 3',
colB: '10',
},
},
];

describe('sortAlphanumericCaseInsensitiveMulti', () => {
it('Sort rows', () => {
const sorted = defaultOrderByFn(
[...testDataMulti] as Array<Row<object>>,
[
(a, b) => sortAlphanumericCaseInsensitive(a, b, 'colA'),
(a, b) => sortAlphanumericCaseInsensitive(a, b, 'colB'),
],
[true, false],
);

expect(sorted).toEqual([
{
values: {
colA: 'group 1',
colB: '20',
},
},
{
values: {
colA: 'group 1',
colB: '15',
},
},
{
values: {
colA: 'group 1',
colB: '10',
},
},
{
values: {
colA: 'group 2',
colB: '10',
},
},
{
values: {
colA: 'group 3',
colB: '15',
},
},
{
values: {
colA: 'group 3',
colB: '10',
},
},
{
values: {
colA: 'group 3',
colB: '10',
},
},
]);
});
});

0 comments on commit a45d011

Please sign in to comment.