lightning:datatable in Salesforce

Lightning datatable is a table that displays columns of data, formatted according to type.
Important attributes includes data, columns, and keyField attributes.The keyField attribute is required for correct table behavior. It associates each row with a unique identifier.

Note: lightning:datatable is not supported on mobile devices.

Let us see a simple example:

COMPONENT:

<aura:component controller="ContactController">
    <aura:attribute name="mydata" type="Contact[]"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.doinit }"/>
    <lightning:datatable data="{! v.mydata }"
        columns="{! v.mycolumns }"
        keyField="id"
        />
</aura:component>

CLIENT SIDE CONTROLLER:

({
    doinit: function (component, event, helper) {
        component.set("v.mycolumns", [
         
            {label: 'Contact Name', fieldName: 'Name', type: 'text'},
            {label: 'Contact title', fieldName: 'Title', type: 'text'},
            {label: 'Contact department', fieldName: 'Department', type: 'text'}
         
         
        ]);
        var action=component.get('c.fetchContact');
     
        action.setCallback(this,function(response){       
            var state=response.getState();
            if(state==="SUCCESS")
            {alert('Inside success');
                component.set("v.mydata",response.getReturnValue());
            }
         
        });
        $A.enqueueAction(action);


    }
});


SERVER SIDE CONTROLLER:

public class ContactController {
    @AuraEnabled
    public static List<Contact> fetchContact() {
        List<Contact> contacts =
                [SELECT Id, name, title,Department FROM Contact limit 10];
     
        return contacts;
    }
}

APPLICATION:

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

OUTPUT:

By default we have Checkbox column available and if we want to hide it we can use
hideCheckboxColumn="true".

Example:


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


If we want to handle selected records we can use onrowselection="{!c.someAction}" with lightning datatable.

Let us see a simple example to display selected record using lightning card.

COMPONENT:

<aura:component controller="ContactController">
    <aura:attribute name="mydata" type="Contact[]"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="conSelect" type="boolean"/>
    <aura:attribute name="selectedContacts" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.doinit }"/>
    <lightning:datatable data="{! v.mydata }"
        columns="{! v.mycolumns }"
        keyField="id"
        onrowselection="{!c.findSelected}"           
        />
    <aura:if isTrue="{!v.conSelect}">
        <b>Selected Contact</b>
    <aura:iteration items="{!v.selectedContacts}" var="con">
        <lightning:card title="Selected Contact"  >
        {!con.Name}
        </lightning:card>
     
    </aura:iteration>
    </aura:if>
</aura:component>

CLIENT SIDE CONTROLLER:


({
    doinit: function (component, event, helper) {
        component.set("v.mycolumns", [
         
            {label: 'Contact Name', fieldName: 'Name', type: 'text'},
            {label: 'Contact title', fieldName: 'Title', type: 'text'},
            {label: 'Contact department', fieldName: 'Department', type: 'text'}
         
         
        ]);
        var action=component.get('c.fetchContact');
     
        action.setCallback(this,function(response){       
            var state=response.getState();
            if(state==="SUCCESS")
            {alert('Inside success');
                component.set("v.mydata",response.getReturnValue());
            }
         
        });
        $A.enqueueAction(action);


    },
 
    findSelected:  function (component, event, helper) {
       var selectedrows=event.getParam('selectedRows');
       var selectedArrayOfRecord=[];
        for(var i=0; i<selectedrows.length; i++)
            {
             
             selectedArrayOfRecord.push(selectedrows[i]);
            }
        component.set("v.selectedContacts",selectedArrayOfRecord);
        component.set("v.conSelect",true);
     
    }
});

SERVER SIDE CONTROLLER:

public class ContactController {
    @AuraEnabled
    public static List<Contact> fetchContact() {
        List<Contact> contacts =
                [SELECT Id, name, title,Department FROM Contact limit 10];
     
        return contacts;
    }
}

OUTPUT: