Custom HTML data table with row action in LWC


In this post, we will see how to create Html data table in LWC with dynamic row actions.

ContactUtilities Apex class

public with sharing class ContactUtilities {
@AuraEnabled(Cacheable = false)
public static List<Contact> getContacts(Id sourceAccount){
return [SELECT Id,Name,Account.Name,LastName,FirstName,Email,Phone,MobilePhone
From Contact where AccountId =: sourceAccount];
}
}


<template>

<!--Loading Spinner-->
<div class="spinner">
<template if:true={isLoading}>
<lightning-spinner alternative-text="Loading" variant="brand" size="large">
</lightning-spinner>
</template>
</div>

<lightning-card class="" title="Contact List View">
<!-- New Contact Button-->
<div class="slds-media__body">
<div slot="actions" class="slds-float--right">
<lightning-button variant="neutral" label="New" title="New"
onclick={navigateToNewPage} class="slds-m-right_small ">
</lightning-button>
</div>
</div> <br/><br/>

<!--Contact List table starts-->

<template if:true={renderTable}>
<div class="tableDiv">
<div class={tableStyle}>
<table aria-describedby="conatact-list" class="slds-table slds-table_bordered ">

<!--Header of the table-->
<thead>
<tr class="slds-line-height_reset">
<th class="slds-size_1-of-6 " scope="col">
<div class="slds-truncate " title="First Name">First Name</div>
</th>
<th class="slds-size_1-of-6 " scope="col">
<div class="slds-truncate " title="Last Name">Last Name</div>
</th>
<th class="slds-size_1-of-6 " scope="col">
<div class="slds-truncate " title="Email">Email</div>
</th>
<th class="slds-size_1-of-6" scope="col">
<div class="slds-truncate " title="Phone">Phone
</div>
</th>
<th class="slds-size_1-of-6" scope="col">
<div class="slds-truncate " title="Mobile">Mobile
</div>
</th>
<th class="slds-size_1-of-6" scope="col">
<div class="slds-truncate " title=""></div>
</th>
</tr>
</thead>

<!--Body of the table-->
<tbody>
<template for:each={contactList} for:item="item" for:index="indexVar">
<tr key={item.Id} class="slds-hint-parent">
<td class="slds-size_1-of-6">
<div>
{item.FirstName}
</div>
</td>
<td class="slds-size_1-of-6">
<div>
{item.LastName}
</div>
</td>
<td class="slds-size_1-of-6">
<div>
{item.Email}
</div>
</td>
<td class="slds-size_1-of-6">
<div>
{item.Phone}
</div>
</td>
<td class="slds-size_1-of-6">
<div>
{item.MobilePhone}
</div>
</td>
<td class="slds-size_1-of-6">
<div class="buttonMenu">
<lightning-button-menu alternative-text="Toggle menu">
<P onclick={navigateToRecordEditPage} data-recid={item.Id}>
<lightning-menu-item label="Edit">
</lightning-menu-item>
</P>
<p onclick={deleteContact} data-recid={item.Id}>
<lightning-menu-item label="Delete">
</lightning-menu-item>
</p>
</lightning-button-menu>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>

</template>
</lightning-card>
</template>


import { LightningElement, api, track } from 'lwc';
import getContacts from '@salesforce/apex/ContactUtilities.getContacts';
import { NavigationMixin } from 'lightning/navigation';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';


export default class CustomDataTable extends NavigationMixin(LightningElement) {

@api recordId;
isloading;
@track contactList;
renderTable = false;

connectedCallback() {
this.isLoading = true;
getContacts({ sourceAccount: this.recordId })
.then(result => {
this.contactList = result;
if (this.contactList.length === 0) {
this.renderTable = false;
}
else {
this.renderTable = true;
}
})
this.isLoading = false;
}

//To navigate to record edit page for selected record
navigateToRecordEditPage(event) {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: event.currentTarget.dataset.recid,
objectApiName: 'Contact',
actionName: 'edit'
}
});
}

//To delete the selected contact
deleteContact(event) {
this.isLoading = true;
deleteRecord(event.currentTarget.dataset.recid)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Record Is Deleted',
variant: 'success',
}),
);
this.connectedCallback();
this.isLoading = false;
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: error.message,
variant: 'error',
}),
);
this.connectedCallback();
this.isLoading = false;
});
}

// To navigate to contact new functionality aura component
navigateToNewPage() {
const defaultValues = encodeDefaultFieldValues({
AccountId: this.recordId

});
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Contact',
actionName: 'new'
},
state: {
defaultFieldValues: defaultValues
}
});
}


}


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>True</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Account</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>

GitHub :

Demo




No comments:

Post a Comment