Sunday, July 24, 2022

Data Table in LWC

 lightning-datatable displays tabular data where each column renders the content based on the data type. This component implements styling from the data tables blueprint in the Salesforce Lightning Design System.

lightning-datatable is not supported on mobile devices. Supported features include:

  • Displaying and formatting of columns with appropriate data types
  • Inline editing for some data types
  • Header actions
  • Row-level actions
  • Resizing of columns
  • Selecting of rows
  • Sorting of columns by ascending and descending order

Tables can be populated during initialization using the data, columns, and key-field attributes.            The key-field attribute is required for correct table behavior. It associates each row with a unique identifier.

The below example creates a table whose first column displays a checkbox for row selection. The checkbox column is displayed by default, and you can hide it by adding hide-checkbox-column in your markup. Selecting the checkbox selects the entire row of data and triggers the onrowselection event handler.

<template>

    <lightning-datatable

        data={data}

        columns={columns}

        key-field="id"

        onrowselection={getSelectedName}

    >

    </lightning-datatable>

</template>


Now, let us understand the real time use of data table with an example below where we will display account records.

testLWCTableExample.html

<template>

    <h1>Account Data Table</h1>

<template if:true={accList}>

    <lightning-datatable

        key-field="id"

        data={accList}

        columns={columns} >

        </lightning-datatable>

</template>

<template if:true={error}>

 Some error occured.

</template>

 </template>

testLWCTableExample.js

import { LightningElement, track, wire } from 'lwc';

import getAccountList from '@salesforce/apex/AccountDataController.getAccountList';

const columns=[

{label: 'Account Name', fieldName: 'Name'},

{label: 'Account Industry', fieldName: 'Industry'},

{label: 'Account Description', fieldName: 'Description'},

];

 

export default class TestLWCTableExample extends LightningElement {

    @track error;

    @track columns = columns;

    @track accList;

    @wire (getAccountList) accList({error, data})

    {

        if(data)

        {

            this.accList = data;

        }

        else if(error)

        {

            this.error = error;

        }

    }

   

}

testLWCTableExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

AccountDataController.cls

public with sharing class AccountDataController {

    @AuraEnabled(cacheable=true)

    public static list<Account> getAccountList(){

 

        list<Account> acclist=new list<Account>();

        acclist=[SELECT id,Name,Industry,Description from Account Limit 10];

        return acclist;

    }

    public AccountDataController() {

 

    }

}

Now, Let add the component to Account Record detail page to see the output:

Data Table in LWC


Displaying Currency and Percentages:

Currency type displays a value based on the org currency and our Salesforce locale by default.To override the default currency code, pass in a custom currencyCode value as shown below.

To customize our output, pass in the attributes of the base component via the typeAttributes property. Not all attributes on a base component are supported. 


const columns = [

    {

        label: 'Amount',

        fieldName: 'amount',

        type: 'currency',

        typeAttributes: { currencyCode: 'INR' },

    },

];


Displaying Date and Time Using Type Attributes:


The locale set in the Salesforce user preferences determines the default formatting for date and time types.

The data table supports the date object and dates provided as ISO8601 formatted strings. Timestamps are not supported. 

The default format is July 24, 2022.

While the date type can be used to display date and time, the date-local type displays only the date. Here's how you can display Salesforce date and time data types in lightning-datatable.

Data Table in LWC

Example 1:

{
        label: "Date",
        fieldName: "DueDate",
        type: "date-local",
        typeAttributes:{
            month: "2-digit",
            day: "2-digit"
        }
}

Output: 07/24/2022


Example 2:

{
        label: "Closed Date",
        fieldName: "ClosedDate",
        type: "date",
        typeAttributes:{
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "2-digit"
        }
}

Output: Sunday, July 24, 2022

Example 3:

{
        label: "Arrival Time",
        fieldName: "ArrivalTime",
        type: "date",
        typeAttributes:{
            year: "numeric",
            month: "long",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
        }
}

Output: July 24, 2022, 12:00 PM

Example: 4

{
        label: "Event Time",
        fieldName: "EventTime",
        type: "date",
        typeAttributes:{
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
        }
}

Output: Sunday, July 24, 2022, 12:00 PM

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete