Lightning Datatable example salesforce

Lightning Datatable example salesforce

Lightning Datatable example salesforce

In this blog post, I am going to explain how to use salesforce lightning:datatable component and its features. 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.

Lightning Datatable Main Features

• Displaying and formatting of columns with appropriate data types
• Infinite scrolling of rows
• Inline editing for some data types
• Header-level actions
• Row-level actions
• Resizing of columns
• Selecting of rows
• Sorting of columns by ascending and descending order
• Text wrapping and clipping
• Row numbering column
• Cell content alignment

Tables can be populated during initialization using the data, columns, and keyField attributes. The keyField attribute is required for correct table behavior. It will associate each row with a unique identifier. The below code shows how to use the lightning: datatable to initialize the data and columns which are passed by using attributes.

Lightning Datatable Example

In this example, we will simply display list of account using lightning:datatable.

Apex class AccountController

public class AccountController{
    @AuraEnabled
    public static List <Account> fetchAccounts() {
        //Qyery 10 accounts
        List<Account> accList = [SELECT Id, Name, BillingState, 
                                    Website, Phone, Industry, Type from Account LIMIT 10];
        //return list of accounts
        return accList;
    }
}

Lightning Component LightningDatatableExample

<aura:component controller="AccountController">
     
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute name="mycolumns" type="List"/>
     
    <aura:handler name="init" value="{!this}" action="{!c.fetchAcc}"/>
     
    <lightning:datatable data="{! v.acctList }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"/>
     
</aura:component>

Lightning Component LightningDatatableExample Controller

({
    fetchAcc : function(component, event, helper) {
        helper.fetchAccHelper(component, event, helper);
    }
})

Lightning Component LightningDatatableExample Helper

({
	fetchAccHelper : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'text'},
                {label: 'Industry', fieldName: 'Industry', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'Phone'},
                {label: 'Website', fieldName: 'Website', type: 'url '}
            ]);
        var action = component.get("c.fetchAccounts");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.acctList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Lightning Application LightningDatatableExample

<aura:application extends="force:slds">
    <c:LightningDatatableExample/>
</aura:application>

Lightning Datatable example Output

Lightning Datatable example salesforce output

Lightning Datatable Column Properties

Use the following column properties to customize the behavior and visual aspects of your columns.

For more details please refer below official link lightning datatable

Happy Coding 🙂