I have an array of object, which is actually getting fetched from backend, now I'm mapping data and want to sort it in ascending and descending order on click of a button, so I made a onSort function, but it is not working as I expected, as, uppercase and lowercase problem is there, even being alphabetically in between, lowercase are getting shown at the end, numbers are not getting sorted, and there is another column which shows the amount like '$100', but due to that dollar sign, function takes it as a string and sort it.
this is like
$110, $12, $24000, $2500, $3
it should be like
$3, $12, $110, $2500, $24000
for column with upper and lowercase elements its like, in ascending order -
Apple Banana, Dog, ant, candy
where is should be like -
ant, Apple, Banana, candy, Dog
In case of numbers its like - 112,12,141,21,32,345,35;
where it should be like - 12,21,32,35,112,141,345;
here the code snippets I used,
const [sort, setSort] = usestate("asc")
const onSort = (obj: string) => {
if (sort === "asc") {
const tableEl= [...tstate.tableItem].sort((a: any, b: any) => {
if (a[obj].split('/').reverse().join() > b[obj].split('/').reverse().join()) return 1;
else if (b[obj].split('/').reverse().join() > a[obj].split('/').reverse().join()) return -1;
else return 0;
// return a[obj] > b[obj] ? 1 : -1;
});
setTableState({
...tstate,
tableItem: tableEl,
});
setSort("dsc")
}
if (sort === "dsc") {
const tableEl= [...tstate.tableItem].sort((a: any, b: any) => {
if (b[obj].split('/').reverse().join() > a[obj].split('/').reverse().join()) return 1;
else if (a[obj].split('/').reverse().join() > b[obj].split('/').reverse().join()) return -1;
else return 0;
// return b[obj] > a[obj] ? 1 : -1;
});
setTableState({
...tstate,
tableItem: tableEl,
});
setSort("asc")
}
};
Use localCompare method to check for case sensitivity. Since you want to check for the numbers use isNaN method.
function compare(a, b) {
if ( isNaN(Number(a) || isNaN(Number(b) )) {
return b.localeCompare(a)
} else {
if (Number(a)>Number(b)) return 1
else if (Number(a)<Number(b)) return -1
else return 0
}
}
Now use this function in the sort method
[...tstate.tableItem].sort(compare)
When sorting an array of string values, you can use a custom compareFn argument for array.sort().
In the code sample below I give an example of using the return value of string.localeCompare() with custom options (which are detailed at the reference page for the Intl.Collator() constructor).
function intuitiveSort (a: string, b: string): number {
// leaving this `undefined` uses the default locale
const locale: Parameters<string['localeCompare']>[1] = undefined;
const options: Parameters<string['localeCompare']>[2] = {
numeric: true,
sensitivity: 'base',
};
return a.localeCompare(b, locale, options);
}
let arr: string[] = ['Apple', 'Banana', 'Dog', 'ant', 'candy'];
arr.sort(intuitiveSort);
console.log(arr); // ["ant", "Apple", "Banana", "candy", "Dog"]
arr = ['112', '12', '141', '21', '32', '345', '35'];
arr.sort(intuitiveSort);
console.log(arr); // ["12", "21", "32", "35", "112", "141", "345"]
Compiled JS from the TS Playground link above:
"use strict";
function intuitiveSort(a, b) {
// leaving this `undefined` uses the default locale
const locale = undefined;
const options = {
numeric: true,
sensitivity: 'base',
};
return a.localeCompare(b, locale, options);
}
let arr = ['Apple', 'Banana', 'Dog', 'ant', 'candy'];
arr.sort(intuitiveSort);
console.log(arr); // ["ant", "Apple", "Banana", "candy", "Dog"]
arr = ['112', '12', '141', '21', '32', '345', '35'];
arr.sort(intuitiveSort);
console.log(arr); // ["12", "21", "32", "35", "112", "141", "345"]