Lightning Grid Custom Datatable
Custom Datatable to display list of accounts and contacts in Lightning Grid form
Html
<template>
<lightning-card variant="Narrow" title="Lightning Grid Custom Datatable LWC" icon-name="standard:account">
<div class="slds-p-horizontal_small">
<div class="tableHeight slds-scrollable_y">
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-no-row-hover">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Industry</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Phone</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={accounts} for:item="obj">
<tr key={obj.Id}>
<th scope="col">
<div> <lightning-button-icon icon-name="utility:chevronright" data-record-id={obj.Id} size="small" onclick={toggleRow} class="btn"> </lightning-button-icon>
<span class="slds-m-left_small">{obj.Name}</span> </div>
</th>
<th scope="col">
<div>{obj.Industry}</div>
</th>
<th scope="col">
<div>{obj.Phone}</div>
</th>
</tr>
<tr key={obj.Id}>
<td colspan="8">
<template if:true={obj.showContacts}>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="First Name">First Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Last Name">Last Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={obj.Contacts} for:item="con">
<tr key={con.Id}>
<th scope="col">
<div>{con.FirstName}</div>
</th>
<th scope="col">
<div>{con.LastName}</div>
</th>
<th scope="col">
<div>
<lightning-formatted-phone value={con.Phone}></lightning-formatted-phone>
</div>
</th>
<th scope="col">
<div>
<lightning-formatted-email value={con.Email}></lightning-formatted-email>
</div>
</th>
</tr>
</template>
</tbody>
</table>
</template>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</lightning-card>
</template>
JS
import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccountsContactRecords';
import deleteAccounts from '@salesforce/apex/AccountController.DeleteAccountsRecords';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CustomLightningGrid extends LightningElement {
data = [];
error;
@track accounts;
connectedCallback() {
this.handleLoad();
}
handleLoad() {
getAccounts()
.then(result => {
let temp_data = [];
temp_data = result.map(iterateAccounts => {return {...iterateAccounts}});
temp_data.forEach(iterateAccounts => {
iterateAccounts.showContacts=false;
})
this.accounts = temp_data;
console.log('this Accounts'+JSON.stringify(this.accounts));
})
.catch(error => {
this.error = error;
});
}
toggleRow(event){
let temp_data = [];
temp_data = this.accounts.map(accInfo => {return {...accInfo}});
temp_data.forEach(accInfo => {
if(accInfo.Id == event.target.dataset.recordId) {
accInfo.showContacts = !accInfo.showContacts;
}
});
this.accounts= temp_data;
console.log(JSON.stringify(this.accounts));
}
}
Apex:
@AuraEnabled
public static List<Account> getAccountsContactRecords(){
return [Select Id,Name,Industry,phone,(SELECT Id, FirstName, LastName
FROM Contacts) from Account where Id IN
(SELECT AccountId FROM Contact WHERE AccountId!= Null)
limit 10];
}
Output:
Comments
Post a Comment