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:
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:
This comment has been removed by a blog administrator.
ReplyDelete