<template> | |
<lightning-datatable | |
key-field="Id" | |
data={results} | |
columns={columns} | |
hide-checkbox-column ="false" | |
show-row-number-column="true" | |
onsort={updateColumnSorting} | |
sorted-by={sortBy} | |
sorted-direction={sortDirection} | |
row-number-offset ="0" > | |
</lightning-datatable> | |
</template> |
import { LightningElement,track,wire } from 'lwc'; | |
import fetchContact from '@salesforce/apex/ContactList.fetchContact'; | |
const dataTablecolumns = [{ | |
label: 'First Name', | |
fieldName: 'FirstName', | |
sortable : true, | |
type: 'text' | |
}, | |
{ | |
label : 'Last Name', | |
fieldName : 'LastName', | |
type : 'text', | |
sortable : true | |
}] | |
export default class ContactListServerSort extends LightningElement { | |
@track results=[]; | |
@track columns = dataTablecolumns; | |
@track sortBy='FirstName'; | |
@track sortDirection='asc'; | |
//since we have used the dynamic wiring, | |
//the list is automatically refreshed when the sort direction or order changes. | |
@wire(fetchContact,{field : '$sortBy',sortOrder : '$sortDirection'}) contactList({error, data}) { | |
if(data) | |
this.results=Object.assign([], data); | |
if(error) | |
console.log(error); | |
} | |
updateColumnSorting(event){ | |
let fieldName = event.detail.fieldName; | |
let sortDirection = event.detail.sortDirection; | |
//assign the values. This will trigger the wire method to reload. | |
this.sortBy = fieldName; | |
this.sortDirection = sortDirection; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment