Using the datatable component

The datatable component allows us to create a data table from an array of objects. The component sample code is shown as follows. The component creates a simple table, with the columns name ID, opportunity name, confidence, amount, email, and phone:

<aura:component>
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<Lightning:datatable data="{! v.mydata }" columns="{! v.mycolumns }" keyField="id" onrowselection="{! c.getSelectedName }"/>
</aura:component>

The controller code illustrates an example with some mock data, as follows:

({

init: function(cmp, event, helper) {

cmp.set('v.mycolumns',

[{
label: 'Opportunity name',
fieldName: 'opportunityName',
type: 'text'
},

{
label: 'Confidence',
fieldName: 'confidence',
type: 'percent',
cellAttributes: {
iconName: {
fieldName: 'trendIcon'
},
iconPosition: 'right'
}
},

{
label: 'Amount',
fieldName: 'amount',
type: 'currency',
typeAttributes: {
currencyCode: 'EUR'
}
}, {
label: 'Contact Email',
fieldName: 'contact',
type: 'email'
}, {
label: 'Contact Phone',
fieldName: 'phone',
type: 'phone'
}
]);
cmp.set('v.mydata', [{
id: 'a',
opportunityName: 'Cloudhub',
confidence: 0.2,
amount: 25000,
contact: '[email protected]',
phone: '2352235235',
trendIcon: 'utility:down'
}, {
id: 'b',
opportunityName: 'Quip',
confidence: 0.78,
amount: 740000,
contact: '[email protected]',
phone: '2352235235',
trendIcon: 'utility:up'
}]);
},
getSelectedName: function(cmp, event) {
var selectedRows = event.getParam('selectedRows'); // Display that fieldName of the selected rows
for (var i = 0; i < selectedRows.length; i++){
alert("You selected: " + selectedRows[i].opportunityName);
}
}
})

You can learn more about Lightning datatable at https://developer.Salesforce.com/docs/component-library/bundle/Lightning:datatable/example. The Lightning datatable allows you to lazily load data, take actions from the selected data rows (selected using inline checkboxes provided by the component), infinite list load, select data rows, and add static and dynamic actions.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.172.200