<template>
    <lightning-card title='First Time Campaign Memebers' icon-name="standard:contact">
        <div class="slds-p-around_medium lgc-bg" style="height: 300px;">
        <lightning-datatable
                key-field="Id"
                data={contacts}
                columns={columns} 
                sorted-direction={sortedDirection} 
                sorted-by={sortedBy}
                onsort={updateColumnSorting}
                >
        </lightning-datatable>
        </div>
    </lightning-card>
</template>

public with sharing class NewToLiftController {
   
     @AuraEnabled(cacheable=true)
     public static List<Contact> getRecords() {
        
        List<Contact> lc = [select Id, FirstName,LastName from Contact where firstname != null and lastname != null LIMIT 10];
        system.debug('getRecords contact:' + lc.size());
        return lc;
    }
}

import {
    LightningElement,
    track,
    wire
} from 'lwc';


import getRecords from '@salesforce/apex/NewToLiftController.getRecords';

const columns_init = [{
        label: 'First Name',
        fieldName: 'FirstName',
        type: "text",
        sortable: true
    },
    {
        label: 'Last Name',
        fieldName: 'LastName',
        type: "text",
        sortable: true
    }
];

const contacts_init = [{
        'Id': '1',
        'FirstName': 'toto',
        'LastName': 'titi'
    },
    {
        'Id': '2',
        'FirstName': 'lulu',
        'LastName': 'lili'
    }
];

export default class DatatableBasic extends LightningElement {

    @track contacts = contacts_init;
    @track columns = columns_init;

    @track sortedBy = 'FirstName';
    @track sortedDirection = 'asc';

    @track error = null;

    @wire(getRecords)
    wiredContacts({
        error,
        data
    }) {
        if (data) {
            this.contacts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

     // The method onsort event handler
     updateColumnSorting(event) {
        let fieldName = event.detail.fieldName;
        let sortDirection = event.detail.sortDirection;
        // assign the latest attribute with the sorted column fieldName and sorted direction
        this.sortedBy = fieldName;
        this.sortedDirection = sortDirection;
        console.log('sort fieldName:' + fieldName);
        console.log('sort direction:' + sortDirection);
        let reverse = sortDirection !== 'asc';
        let data_clone = JSON.parse(JSON.stringify(this.contacts));
        this.contacts = data_clone.sort(this.sortBy(fieldName, reverse));
     }

     sortBy(field, reverse, primer){

        var key = primer ? 
            function(x) {return primer(x[field])} : 
            function(x) {return x[field]};
     
        reverse = !reverse ? 1 : -1;
     
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        } 
     }

}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="NewToLift">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>