In this blog post, I am going to explain how to use salesforce lightning:datatable component. A lightning:datatable component displays tabular data where each column can be displayed based on the data type. lightning:datatable also supports inline editing. lightning:datatable is not supported on mobile devices
Basic Lightning Data Table
<aura:component Controller="accountRecord" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="data" type = "List" />
<aura:attribute name="columns" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:datatable
keyField="id"
data="{! v.data }"
columns="{! v.columns }"
hideCheckboxColumn="false"}"/>
</aura:component>
({
doInit: function(cmp,event,helper){
cmp.set('v.columns', [
{label: 'Id', fieldName: 'Id', type: 'Id'},
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'text'},
]);
var action = cmp.get("c.getAccountRecord");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
cmp.set("v.data", response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
public class accountRecord {
@AuraEnabled
public static list<Account> getAccountRecord(){
return [Select id,Name,Phone FROM Account];
}
}
Output
Lightning Data Table With Action View
<aura:component Controller="accountRecord" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="Name" type = "String" />
<aura:attribute name="Phone" type = "String" />
<aura:attribute name="data" type = "List" />
<aura:attribute name="columns" type="List"/>
<aura:attribute name="RecordId" type="String" default="" access="global" />
<aura:attribute name="hidedatatable" type="Boolean" default="true"/>
<aura:attribute name="isModalOpen" type="Boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:if isTrue="{!v.hidedatatable}">
<lightning:datatable
keyField="id"
data="{! v.data }"
columns="{! v.columns }"
hideCheckboxColumn="false"
onrowaction="{!c.viewRecord}"/>
</aura:if>
<aura:if isTrue="{!v.isModalOpen}">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{! c.closeModel }"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning:recordViewForm recordId={!v.RecordId} objectApiName="Account">
<div class="slds-box">
<lightning:outputField fieldName="Id" />
<lightning:outputField fieldName="Name" />
<lightning:outputField fieldName="Phone" />
</div>
</lightning:recordViewForm>
</div>
<footer class="slds-modal__footer">
<lightning:button variant="neutral"
label="Cancel"
title="Cancel"
onclick="{! c.closeModel }"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</aura:component>
({
doInit: function(cmp,event,helper){
cmp.set('v.columns', [
{label: 'Id', fieldName: 'Id', type: 'Id'},
{label: 'Account Name', fieldName: 'Name', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'text'},
{label: 'Action',type: "button", typeAttributes: {
label: 'View',
name: 'View',
title: 'View',
disabled: false,
value: 'view',
iconPosition: 'left'
}},
]);
var action = cmp.get("c.getAccountRecord");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
cmp.set("v.data", response.getReturnValue());
}
});
$A.enqueueAction(action);
},
viewRecord: function(cmp, event, helper) {
cmp.set("v.isModalOpen", true);
cmp.set("v.hidedatatable", true);
var recId = event.getParam('row').Id;
var recname = event.getParam('row').Name;
var recphone = event.getParam('row').Phone;
cmp.set("v.RecordId",recId);
},
closeModel: function(cmp, event, helper) {
cmp.set("v.isModalOpen", false);
cmp.set("v.hidedatatable", true);
},
})
Output
