0

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?

1 Answer 1

0

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
})
2
  • Hello and thank you for your answer. What I need is something like this apexhours.com/… but a bit different. What I mean by two level column sorting is that : when someone presses the first column to make it as descending to stay as descending and then go to the second column and make it descending as well. At the moment when someone presses the first column, it makes it descending but when it goes to the second column the first becomes ascending. Is it possible to provide a suggestion to this problem? May 18 at 7:52
  • @KostisKosmidis - Unfortunately, this is not possible in lightning-datatable. You will have to create custom table to allow multiple column sorting. I have added the logic on how to dynamically sort table on click. On click of table header/button you just need to update the 4 mentioned variables accordingly.
    – Sneh
    May 18 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.