You can install via npm or yarn.
npm install --save sort-by-typescript
yarn add sort-by-typescript
You can import using ES6 imports. If you are using typescript this package includes a typings file.
import { sortBy } from 'sort-by-typescript';
In all examples this array of customers will be used.
const customers = [
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
];
To sort by name in ascending order:
customers.sort(sortBy('name'));
/* Result
[
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
]
*/
To sort by age in descending order:
customers.sort(sortBy('-age'));
/* Result
[
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
]
*/
To sort by name then age ascending order:
customers.sort(sortBy('name', 'age'));
/* Result
[
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
]
*/
To sort by name descending order then age ascending order:
customers.sort(sortBy('-name', 'age'));
/* Result
[
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
]
*/
To sort by nested prop: (Note: uppercase letters will be sorted before lowercase letters)
customers.sort(sortBy('contactDetails.email'));
/* Result
[
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
]
*/
As we saw above, sorting the email addresses did not necessarily return the result we expected, because uppercase letters are sorted before lowecase letters. To combat this we can add a ^
to the end of our prop.
customers.sort(sortBy('contactDetails.email^'));
/* Result
[
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
]
*/
You can also pass in functions to modify our sort values before sorting. In this example we pass in our own function to do a case insensitive sort;
customers.sort(
sortBy('contactDetails.email', (_key, value) => {
if (typeof value === 'string') {
return value.toLowerCase();
} else {
return value;
}
})
);
/* Result
[
{
id: 1,
name: 'Alex',
age: 45,
contactDetails: {
email: 'alex@gmail.com',
},
},
{
id: 2,
name: 'Alex',
age: 20,
contactDetails: {
email: 'Alex@gmail.com',
},
},
{
id: 0,
name: 'Bob',
age: 33,
contactDetails: {
email: 'Bob@gmail.com',
},
},
]
*/
You can also sort an array of strings case insensitively by providing no properties to the sortBy function
const strings: string[] = ['Orange', 'duck', 'Car', 'angle'];
strings.sort(sortBy());
/* Result
['angle', 'Car', 'duck', 'Orange']
*/
You can also sort an array of strings case insensitively in reverse order by providing just the -
modifier to the sortBy function
const strings: string[] = ['Orange', 'duck', 'Car', 'angle'];
strings.sort(sortBy('-'));
/* Result
['Orange', 'duck', 'Car', 'angle']
*/