Sample Code:
HTML:
<template>
<div class="slds-box slds-theme--default">
<div class="slds-text-color_inverse slds-text-heading_large" style="padding:0.5rem;background:#16325c">
Accounts
</div>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0" onclick={sortRecs} name="Name">
Account Name
<lightning-icon icon-name="utility:arrowup" size="x-small" if:true={nameUpBool}></lightning-icon>
<lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={nameDWBool}></lightning-icon>
</a>
</th>
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0" onclick={sortRecs} name="AccountNumber">
Account Number
<lightning-icon icon-name="utility:arrowup" size="x-small" if:true={noUpBool}></lightning-icon>
<lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={noDWBool}></lightning-icon>
</a>
</th>
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0" onclick={sortRecs} name="Industry">
Industry
<lightning-icon icon-name="utility:arrowup" size="x-small" if:true={indUpBool}></lightning-icon>
<lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={indDWBool}></lightning-icon>
</a>
</th>
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0" onclick={sortRecs} name="Rating">
Rating
<lightning-icon icon-name="utility:arrowup" size="x-small" if:true={rateUpBool}></lightning-icon>
<lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={rateDWBool}></lightning-icon>
</a>
</th>
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0" onclick={sortRecs} name="Type">
Type
<lightning-icon icon-name="utility:arrowup" size="x-small" if:true={typeUpBool}></lightning-icon>
<lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={typeDWBool}></lightning-icon>
</a>
</th>
<th class="" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0" onclick={sortRecs} name="Phone">
Phone
<lightning-icon icon-name="utility:arrowup" size="x-small" if:true={phoneUpBool}></lightning-icon>
<lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={phoneDWBool}></lightning-icon>
</a>
</th>
</tr>
</thead>
<tbody>
<template iterator:it={records}>
<tr class="slds-hint-parent" key = {it.value.Id}>
<td data-label="Account Name">
<div class="slds-cell-wrap">{it.value.Name}</div>
</td>
<td data-label="Account Number">
<div class="slds-cell-wrap">{it.value.AccountNumber}</div>
</td>
<td data-label="Industry">
<div class="slds-cell-wrap">{it.value.Industry}</div>
</td>
<td data-label="Rating">
<div class="slds-cell-wrap">{it.value.Rating}</div>
</td>
<td data-label="Type">
<div class="slds-cell-wrap">{it.value.Type}</div>
</td>
<td data-label="Phone">
<div class="slds-cell-wrap">{it.value.Phone}</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>JavaScript:
import { LightningElement, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
export default class Sample extends LightningElement {
records;
sortedColumn;
sortedDirection;
nameUpBool;
nameDWBool;
noUpBool;
noDWBool;
indUpBool;
indDWBool;
rateUpBool;
rateDWBool;
typeUpBool;
typeDWBool;
phoneUpBool;
phoneDWBool;
@wire( fetchAccounts )
wiredAccount( { error, data } ) {
if (data) {
this.records = data;
this.initialRecords = data;
this.error = undefined;
this.sortedColumn = "Name";
this.sortRecs();
} else if ( error ) {
this.error = error;
this.initialRecords = undefined;
this.records = undefined;
}
}
sortRecs( event ) {
this.nameUpBool = false;
this.nameDWBool = false;
this.noUpBool = false;
this.noDWBool = false;
this.indUpBool = false;
this.indDWBool = false;
this.rateUpBool = false;
this.rateDWBool = false;
this.typeUpBool = false;
this.typeDWBool = false;
this.phoneUpBool = false;
this.phoneDWBool = false;
let colName = event ? event.target.name : undefined;
console.log( 'Column Name is ' + colName );
if ( this.sortedColumn === colName )
this.sortedDirection = ( this.sortedDirection === 'asc' ? 'desc' : 'asc' );
else
this.sortedDirection = 'asc';
let isReverse = this.sortedDirection === 'asc' ? 1 : -1;
if ( colName )
this.sortedColumn = colName;
else
colName = this.sortedColumn;
switch ( colName ) {
case "Name":
if ( this.sortedDirection == 'asc' )
this.nameUpBool = true;
else
this.nameDWBool = true;
break;
case "AccountNumber":
if ( this.sortedDirection == 'asc' )
this.noUpBool = true;
else
this.noDWBool = true;
break;
case "Industry":
if ( this.sortedDirection == 'asc' )
this.indUpBool = true;
else
this.indDWBool = true;
break;
case "Rating":
if ( this.sortedDirection == 'asc' )
this.rateUpBool = true;
else
this.rateDWBool = true;
break;
case "Type":
if ( this.sortedDirection == 'asc' )
this.typeUpBool = true;
else
this.typeDWBool = true;
break;
case "Phone":
if ( this.sortedDirection == 'asc' )
this.phoneUpBool = true;
else
this.phoneDWBool = true;
break;
}
this.records = JSON.parse( JSON.stringify( this.records ) ).sort( ( a, b ) => {
a = a[ colName ] ? a[ colName ].toLowerCase() : 'z';
b = b[ colName ] ? b[ colName ].toLowerCase() : 'z';
return a > b ? 1 * isReverse : -1 * isReverse;
});
}
}Apex Class:
public with sharing class AccountController {
@AuraEnabled( cacheable = true )
public static List< Account > fetchAccounts() {
return [ SELECT Id, Name, Industry, AccountNumber, Rating, Type, Phone
FROM Account
LIMIT 10 ];
}
}Output:
