Lightning Datatable is a powerful prebuilt component provided by Salesforce for Lightning Web Components (LWC). While it offers default data types like text, date, and URL, there are instances when customizing the display is necessary. In this article, we’ll delve into custom types and why they are essential for adding interactive elements like custom buttons, images, and clickable columns in a Lightning Datatable.
What are Custom Types in Lightning Datatable? In Salesforce’s Lightning Datatable, custom types enable developers to go beyond the standard data representation options and incorporate custom components to enrich the user experience. These custom types empower developers to create interactive and visually appealing interfaces by allowing them to display data in innovative ways. By adding these developers can enhance the overall usability of the Lightning Datatable.
Why do we need Custom Types? Custom types are indispensable when the out-of-the-box data representation options in Lightning Datatable fall short of meeting specific requirements. Here are some scenarios where custom types prove invaluable:
- Interactive Data Presentation:Custom types enable the integration of interactive elements like buttons or icons that allow users to perform actions directly from the table. For instance, a “Delete” button could trigger a record deletion without the need to navigate elsewhere.
- Enhanced User Experience: Incorporating custom images or icons can make the data more visually appealing and easier to comprehend. Users can quickly identify records based on unique icons associated with each item.
- Clickable Columns: By making columns clickable, developers can provide users with the ability to sort data or perform additional actions related to specific data points, improving data exploration and analysis.
- Custom Data Formatting: Custom types allow developers to control the formatting of data displayed in the table, making it easier to present complex information in a user-friendly manner.
- Seamless Integration: Custom types can integrate external data or functionality seamlessly, enabling a more unified user experience without navigating away from the Lightning Datatable.
In this blog post, we will explore how to enhance a Salesforce Lightning Datatable by creating clickable columns. Specifically, we will focus on making the Name column of a contact table clickable.
Creating the Clickable Column Component To begin, we will create a custom LWC component named “clickableColumn” that will enable us to make any column in the Lightning Datatable clickable. The component will utilize an anchor tag (<a>) to enable navigation to the respective standard contact record page in a new tab, using Navigation Mixin.clickableColumn.html
<template>
<a onclick={handleClick}>{name}</a>
</template>
clickableColumn.js
import { LightningElement,api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class ClickableColumn extends NavigationMixin(LightningElement) {
@api name;
@api recordId;
handleClick(){
this[NavigationMixin.GenerateUrl]({
type: "standard__recordPage",
attributes: {
recordId: this.recordId,
actionName: "view"
}
}).then((url) => {
window.open(url, "_blank");
});
}
}
clickableColumn.js-meta.js
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Now we will create a new component “lightningDatatable”.The html file of this component will be blank.In the same component create a html file named clickableText.html lightningDatatable.html
<template>
</template>
clickableText.html
<template>
<c-clickable-column name={typeAttributes.Name} record-id={typeAttributes.Id}></c-clickable-column>
</template>
lightningDatatable.js
import LightningDatatable from 'lightning/datatable';
import clickableText from './clickableText.html';
export default class LightningDataTable extends LightningDatatable {
static customTypes = {
clickableText : {
template : clickableText,
typeAttributes:['Name','Id']
}
};
}
lightningDatatable.js-meta.js
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Create a new component genericTablegenericTable.html
<template>
<lightning-card title={tablename}>
<div class="slds-p-left_small slds-p-right_small">
<c-lightning-data-table key-field="id" data={payload}
columns={columns} hide-checkbox-column></c-lightning-data-table>
</div>
</lightning-card>
</template>
genericTable.js
import { LightningElement ,api,track} from 'lwc';
export default class GenericTable extends LightningElement {
@api tablename;
@api payload;
@api columns;
}
genericTable.js-meta.js
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Create component showContactListshowContactList.html
<template>
<c-generic-table tablename={tableName} columns={columns} payload={conList}></c-generic-table>
<template>
showContactList.js
import { LightningElement,track,wire} from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
const columns = [
{ label: 'Name', fieldName: 'Name',type: 'clickableText',typeAttributes: {
Name: { fieldName: 'Name'},Id:{fieldName: 'Id'}}},
{ label: 'Title', fieldName: 'Title' },
{ label: 'Email', fieldName: 'Email' },
{ label: 'Phone', fieldName: 'Phone' }
];
export default class ShowContactList extends LightningElement {
tableName = 'Contacts';
columns = columns;
@track conList ;
@wire(getContactList)
wiredContacts({error,data}) {
if (data) {
this.conList = data;
console.log('conlist=>'+JSON.stringify(this.conList));
} else if (error) {
this.error = error;
}
}
}
showContactList.js-meta.js
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Apex Class : ContactController
public class ContactController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContactList() {
return [SELECT Id, Title, Name, Email, Phone FROM Contact LIMIT 10];
}
}
Points to remember:
- Make sure to add the typeattributes in the column array for the field in which you want to open a new template from the lightningDatatable component.
- The typesattributes values in showContactList.js should match the typesattributes of template which you want to open for that particular column.