Sorting column data on lightning-datatable by ascending and descending order

Question

I currently have two lightning-datatables that receive different sets of data. When I click on the column header to sort the columns, I am only able to sort by desc order. If I click on the same column to sort again, nothing changes. How would I be able to click on the column header continuously to sort by both asc and desc order?

datatable.html

<template>
    <lightning-card title="Tables">
        <p>Table 1</p>
        <lightning-datatable
                key-field="id"
                data={dataOne}
                columns={nameColumns}
                sorted-by={sortByDataOne}
                sorted-direction={sortDirectionDataOne}
                onsort={handleSortDataOne}
                default-sort-direction={defaultSortOne}>
        </lightning-datatable> 

        <p>Table 2</p>
        <lightning-datatable
                key-field="id"
                data={dataTwo}
                columns={nameColumns}
                sorted-by={sortByDataTwo}
                sorted-direction={sortDirectionDataTwo}
                onsort={handleSortDataTwo}
                default-sort-direction={defaultSortTwo}>
        </lightning-datatable> 
    </lightning-card>
</template>

datatable.js

import { LightningElement, track } from 'lwc';

const nameColumns = [
    { label: 'First Name', fieldName: 'firstName', sortable: 'true'},
    { label: 'Last Name', fieldName: 'lastName', sortable: 'true'},
];

const dataOne = [
    { firstName: 'John', lastName: 'Doe'}, 
    { firstName: 'Carl', lastName: 'Smith'}
];

const dataTwo = [
    { firstName: 'John', lastName: 'Doe'}, 
    { firstName: 'Carl', lastName: 'Smith'},
    { firstName: 'Smith', lastName: 'Rowe'}, 
    { firstName: 'Kyle', lastName: 'Johnson'},

];

export default class Datatable extends LightningElement {

    @track sortByDataOne;
    @track sortByDataTwo;
    @track sortDirectionDataOne;
    @track sortDirectionDataTwo;
    @track nameColumns = nameColumns;
    @track dataOne = dataOne; 
    @track dataTwo = dataTwo; 
    defaultSortOne = 'asc';
    defaultSortTwo = 'asc';

    handleSortDataOne(event) {
        this.sortByDataOne = event.detail.fieldName;
        this.sortDirectionDataOne = event.detail.sortDirectionDataOne;
        this.sortDataOne(event.detail.fieldName, event.detail.sortDirectionDataOne);
    };

    sortDataOne() {
        let fieldName = this.sortByDataOne;
        let sortDirectionDataOne = this.sortDirectionDataOne;
        let parseData = JSON.parse(JSON.stringify(this.dataOne));

        let keyValue = (a) => {
            return a[fieldName];
        };

        let isReverse = sortDirectionDataOne === 'asc' ? 1: -1;

        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; 
            y = keyValue(y) ? keyValue(y) : '';
            return isReverse * ((x > y) - (y > x));
        });

        this.dataOne = parseData;
    };

    handleSortDataTwo(event) {
        this.sortByDataTwo = event.detail.fieldName;
        this.sortDirectionDataTwo = event.detail.sortDirectionDataTwo;
        this.sortDataTwo(event.detail.fieldName, event.detail.sortDirectionDataTwo);
    };

    sortDataTwo() {
        let fieldName = this.sortByDataTwo;
        let sortDirectionDataTwo = this.sortDirectionDataTwo;
        let parseData = JSON.parse(JSON.stringify(this.dataTwo));

        let keyValue = (a) => {
            return a[fieldName];
        };

        let isReverse = sortDirectionDataTwo === 'asc' ? 1: -1;

        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; 
            y = keyValue(y) ? keyValue(y) : '';
            return isReverse * ((x > y) - (y > x));
        });

        this.dataTwo = parseData;
    };
}

Answer 1

You had sortDirectionDataOne/sortDirectionDataTwo from event.detail, which was incorrect. Your methods should read:

handleSortDataTwo(event) {
    this.sortByDataTwo = event.detail.fieldName;
    this.sortDirectionDataTwo = event.detail.sortDirection;
    this.sortDataTwo(event.detail.fieldName, event.detail.sortDirection);
};

Note that you could collapse your sort methods to something like:

sortData(data, field, direction) {
    let fieldName = field;
    let dataToSort = [...data];

    let keyValue = (a) => {
        return a[fieldName];
    };

    let isReverse = direction === 'asc' ? 1: -1;

    dataToSort.sort((x, y) => {
        x = keyValue(x) ? keyValue(x) : ''; 
        y = keyValue(y) ? keyValue(y) : '';
        return isReverse * ((x > y) - (y > x));
    });
    return dataToSort;
}

---

Which you then just use as normal:

this.sortDirectionDataTwo = this.sortData(this.sortDirectionDataTwo, event.detail.fieldName, event.detail.sortDirection);