How to Create Custom Data Type in Salesforce Lightning Datatable?

In Salesforce Lightning datatable, we have to define the type of the field that we will display in the LWC Lightning datatable. For this, we have many predefined data types to define the type of table fields.

In some cases, we need to display some out-of-the-box information in the data table, such as UI elements like images, icons, and buttons in the data table column.

In this Salesforce tutorial, we will learn how to create a custom data type in Salesforce lightning datatable.

Table of Contents

Create Custom Data Type in Salesforce Lightning Datatable

In the Salesforce Lightning Web Components, there are predefined data types supported to define a field type in the Lightning Data Table.

action
boolean
button
icons button
currency
date
date-local
email
location
number
percent
phone
text
URL

If the field is not one of the above data types, we have to define it with the custom method.

To define and use a custom data type, we need to extend the class of the lightning-datatable component in a new component. We can extend from the Lightning Datatable only to create a Datatable with custom data types.

In this example, we will display an image on the LWC data table via Apex calling. In this, I have a custom URL field Item_Image__c in the Opportunity object.

Since the Image field is not supported by the standard data types, we will create a custom data type for that.

The URL field contains the image URL link from the external link, and in the LWC data table, we will display the images fetched from the URL.

Create a controller class to fetch the records from the opportunity object and the custom image URL field.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunityList() {
        return [SELECT Id, Name, Amount, StageName, Item_Image__c 
                FROM Opportunity 
                WHERE Item_Image__c != NULL 
                LIMIT 10];
    }
}

In the controller class, we have added the condition Item_Image__c != NULL to ensure that the table shows only records with images.

Create an LWC component and enter the code below in the JS class.

import { LightningElement, wire } from 'lwc';
import getOpportunityList from '@salesforce/apex/OpportunityController.getOpportunityList';

const COLUMNS = [
    { label: 'Opportunity Name', fieldName: 'Name' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' },
    { label: 'Stage', fieldName: 'StageName' },
    { label: 'Item Image', fieldName: 'Item_Image__c', type: 'customImage', typeAttributes: { class: 'slds-avatar_large' } }
];

export default class OpportunityList extends LightningElement {
    columns = COLUMNS;
    opportunities = [];

    connectedCallback() {
        console.log('Columns initialized:', JSON.stringify(this.columns));
    }

    @wire(getOpportunityList)
    wiredOpportunities({ error, data }) {
        if (data) {
            console.log('Opportunities data:', JSON.stringify(data));
            this.opportunities = data;
        } else if (error) {
            console.error('Error fetching opportunities:', error);
        }
    }
}

This main LWC component sets up a table with columns for the opportunity fields, including images. The Item_Image__c column uses a special type called customImage to show pictures.

The CSS styling typeAttributes: { class: ‘slds-avatar_large’ } will make the image icons big for better visibility in the data table.

We have called the apex method to get the opportunity data and store it in the data table.

After this, enter the code below in the HTML file.

<template>
    <lightning-card title="Opportunities with Product image">
        <div class="slds-var-p-around_medium">
            <c-enhanced-data-table 
                     key-field="Id" 
                     data={opportunities} 
                     columns={columns} 
            hide-checkbox-column="true">
        </c-enhanced-data-table>
        </div>
    </lightning-card>
</template>

This HTML template uses the <c-enhanced-data-table> tag, which uses another component we’ll make to show the table. It uses opportunities for the data, columns for the table setup, and an ID to identify each row.

Create another LWC component, enhancedDataTable, and enter the code below in the JS file. This component will be the child component that displays images in the first LWC component data table.

In this component, we will define the custom data type by extending lightning-datatable.

This is where we will define the custom type for the images.

import LightningDatatable from 'lightning/datatable';
import customImage from './customImage.html';

export default class EnhancedDataTable extends LightningDatatable {
    static customTypes = {
        customImage: {
            template: customImage,
            typeAttributes: ['title', 'class']
        }
    };
}

In this code, we have added a new type to display an image that is customImage. This type uses a separate HTML file (customImage.html) to show the image in a table. The typeAttributes allow us to add extra details like a title or style.

Create an HTML template customImage.html in the same LWC component to define the logic of rendering an image in the LWC data table.

<template>
    <img src={value} title={typeAttributes.title} class={typeAttributes.class} alt="Item Image" />
</template>

This template uses src={values} to get the URL from Item_Image__c and display the image.

Enter the code below in the meta.xml file of the parent component to make the component available for the Lightning pages.

<isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

Deploy the LWC component on the lighting page, and there you will see the LWC data table with images of respective records in the Item Image column.

Custom Data type to display image in LWC datatable

This way, we can define a custom data type column in Salesforce LWC data tables and display the elements that are not supported by standard data types.

Conclusion

In this Salesforce tutorial, we have learned how to create a custom data type in the LWC Lightning Data Table by extending the LWC component. With this, we can create a custom data type apart from the predefined data types, such as text, currency, or URL and display out-of-the-box elements like images in the datatable.

To define the custom data type, we built a child component (enhancedDataTable) that extends lightning-datatable, where we defined the customImage data type and linked it to a custom HTML template (customImage.html) to render the images.

How to Create Custom Data Type in Salesforce Lightning Datatable?

Create Custom Data Type in Salesforce Lightning Datatable

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK