Multi column sorting in lightning web components

Question

I am a new developer in salesforce and I would like to ask: Is there a way to have multi column sorting in lightning web components? I mean 2 level of sort active at the same time? i.e first name as asc and last name as desc or the opposite or both to be desc order?. Can you provide an example please?

Answer 1

Suppose you have an Array of Users with properties firstName and lastName.

let userArray = [
    {
        firstName: "Shaun",
        lastName: "Hall"
    },
    {
        firstName: "Karan",
        lastName: "Singh"
    },
    {
        firstName: "Kevin",
        lastName: "Mead"
    },
    {
        firstName: "Shaun",
        lastName: "Hill"
    },
    {
        firstName: "Karan",
        lastName: "Shaw"
    },
];

---

You can sort the array by firstName in ascending order and then by lastName in ascending order.

let sortedUsers = userArray.sort((a, b) => {
  return a.firstName.localeCompare(b.firstName) !== 0
    ? a.firstName.localeCompare(b.firstName)
    : a.lastName.localeCompare(b.lastName);
});

---

You can sort the array by firstName in ascending order and then by lastName in descending order.

let sortedUsers = userArray.sort((a, b) => {
  return a.firstName.localeCompare(b.firstName) !== 0
    ? a.firstName.localeCompare(b.firstName)
    : b.lastName.localeCompare(a.lastName);
});

---

To dynamically sort on table header/button click you can use below logic. On click update the fieldName1, fieldName1Order and fieldName2, fieldName2Order. Based on these 4 values the table will be sorted.

let fieldName1 = 'firstName'
let fieldName1Order = 1 //1 for 'asc' -1 for 'desc'
let fieldName2 = 'lastName'
let fieldName2Order = 1 //1 for 'asc' -1 for 'desc'

let keyValue1 = (a) => {
    return a[fieldName1];
};
let keyValue2 = (a) => {
    return a[fieldName2];
};

let sortedArray = userArray.sort((x, y) => {
    let keyvalue1X = keyValue1(x) ? keyValue1(x) : '';
    let keyvalue1Y = keyValue1(y) ? keyValue1(y) : '';

    let keyvalue2X = keyValue2(x) ? keyValue2(x) : '';
    let keyvalue2Y = keyValue2(y) ? keyValue2(y) : '';

    return keyvalue1X.localeCompare(keyvalue1Y) !== 0
    ? keyvalue1X.localeCompare(keyvalue1Y) * fieldName1Order
    : keyvalue2X.localeCompare(keyvalue2Y) * fieldName2Order
})