DateTime datatype in lightning datatable

Sample Code:

Component:

  1. <aura:component implements="force:appHostable"    
  2.                 controller="AccountListController">    
  3.         
  4.     <aura:attribute type="Account[]" name="acctList"/>    
  5.     <aura:attribute name="mycolumns" type="List"/>    
  6.         
  7.     <aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>    
  8.         
  9.     <lightning:datatable data="{! v.acctList }"     
  10.                          columns="{! v.mycolumns }"     
  11.                          keyField="id"    
  12.                          hideCheckboxColumn="true"/>    
  13.         
  14. </aura:component>  

Component Controller:

  1. ({    
  2.         
  3.     fetchAccounts : function(component, event, helper) {    
  4.             
  5.         component.set('v.mycolumns', [    
  6.             {label: 'Account Name', fieldName: 'Name', type: 'text'},    
  7.             {label: 'Industry', fieldName: 'Industry', type: 'text'},    
  8.             {label: 'Created Date', fieldName: 'CreatedDate', type: 'date', typeAttributes: {  
  9.                                                                             day: 'numeric',  
  10.                                                                             month: 'short',  
  11.                                                                             year: 'numeric',  
  12.                                                                             hour: '2-digit',  
  13.                                                                             minute: '2-digit',  
  14.                                                                             second: '2-digit',  
  15.                                                                             hour12: true}},    
  16.             {label: 'Type', fieldName: 'Type', type: 'Text'}    
  17.         ]);    
  18.         var action = component.get("c.fetchAccts");    
  19.         action.setParams({    
  20.         });    
  21.         action.setCallback(this, function(response) {    
  22.                 
  23.             var state = response.getState();    
  24.             if (state === "SUCCESS")     
  25.                 component.set("v.acctList", response.getReturnValue());                
  26.                 
  27.         });    
  28.         $A.enqueueAction(action);    
  29.             
  30.     }    
  31.         
  32. })  

Apex Class:


  1. public class AccountListController {  
  2.       
  3.     @AuraEnabled  
  4.     public static List < Account > fetchAccts() {  
  5.           
  6.         return [ SELECT Id, Name, Industry, Type, CreatedDate FROM Account LIMIT 10 ];  
  7.           
  8.     }  
  9.       
  10. }  

Output:



No comments:

Post a Comment