Lightning DataTable

Lightning DataTable in Salesforce | The Developer Guide

A lightning-datatable part shows even information where every segment can be shown depending on the information type. For instance, an email address is shown as a hyperlink with the mailto: URL plot by indicating the email type. The default type is text. 

This segment acquires styling from information tables in the Lightning Design System.

lightning-datatable isn't upheld on cell phones. Upheld highlights include: 

Showing and organizing of sections with fitting information types :

  • Endless looking of columns 
  • Inline altering for some information types 
  • Header activities 
  • Column level activities 
  • Resizing of segments 
  • Choosing of columns 
  • Arranging of segments by climbing and plummeting request 
  • Text wrapping and cutting 
  • Line numbering segment 
  • Cell content arrangement

Tables can be populated during instatement utilizing the information, segments, and key-field ascribes. The key-field characteristic is needed for the right table conduct. It connects each line with a special identifier. 

This model makes a table whose first section shows a checkbox for line choice. The checkbox section is shown as a matter of course, and you can shroud it by adding a cover-up checkbox-segment in your markup. Choosing the checkbox chooses the whole line of information and triggers the onrowselection occasion controller.


dont miss out iconDon't forget to check out: Displaying Field According to Its Datatype In Salesforce Lightning Component

Here's the JavaScript that makes selectable lines and the segments object to their comparing section information. The Confidence section shows rates with a symbol that means the expanding or diminishing certainty pattern. 

This model characterizes five segments by setting properties and characteristics for the segments object. The Confidence segment shows rates and a symbol that means the expanding or diminishing certainty pattern. The symbol is determined with the cellAttributes property. See Working with Column Properties for more data about the properties for sections. 

The JavaScript additionally stacks two columns of information in the table. The id for each table column is utilized as the key-field.

import { LightningElement } from 'lwc';
const columns = [
    {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'},
const data = [{
    id: 'a',
    opportunityName: 'Cloudhub',
    confidence: 0.3,
    amount: 35000,
    contact: '[email protected]',
    phone: '78352235235',
    trendIcon: 'utility:down'
    id: 'b',
    opportunityName: 'Quip',
    confidence: 0.78,
    amount: 740000,
    contact: '[email protected]',
    phone: '6552235235',
    trendIcon: 'utility:up'
export default class DatatableExample extends LightningElement {
    data = data;
    columns = columns;
    getSelectedByName(event) {
        const selectedRows = event.detail.selectedRows;
        // Display that fieldName of the selected rows
        for (let i = 0; i < selectedRows.length; i++){
            alert("You selected: " + selectedRows[i].opportunityName);

At the point when the information table is delivered, each line shows a checkbox in the primary segment. The principal line shows segments with the accompanying information: Cloudhub, 30%, $35,000.00, [email protected], and (785) 223-5235. The last two segments are shown as hyperlinks to speak to an email address and phone number.

DataType Formatting in Lightning Component

The information table organizations the information cells of a segment dependent on the sort you indicate for the section. To get the right design, indicate a sort that coordinates the field type you pass into a segment. 

The default information type for a section is text. Article esteems passed into a book type segment are shown as a vacant string. 

For number and string esteems like percent, money, date, email, and telephone numbers, the content sort segment shows the unformatted estimation of the string. For instance, indicate type: 'date' in the section definition in case you're passing in date to the segment. The date is then designed by the client's Salesforce region. In the event that you don't determine the date type, the recovered date string is arranged as text. 

dont miss out iconCheck out another amazing blog by Aditya here: All About Record Locking in Salesforce

Moreover, determine type: 'boolean' in case you're passing in a boolean incentive to a section to show a checkmark for the genuine worth. Passing in a boolean incentive to a segment of text type shows the incentive as evident or bogus. 

Every information type is related to a base Lightning part. For instance, the content kind delivers the related information utilizing a lightning:formattedText part. The telephone type delivers the related information utilizing a lightning:formattedPhone segment, and the telephone number is designed for the client's area.


Popular Salesforce Blogs