Introduction

The main concepts included in this recipe are:

• Using a custom data type for showing an image within the component, to get a customized view of the data inside the datatable.

  <aside> 📁 Find this LWC in these folders: force-app\\main\\default\\lwc\\datatableCustomDataType force-app/main/default/lwc/customDataTypes where you find the definition of the Custom Data Type

  </aside>

As you know by now, with the previous recipes, the lightning-datatable  formats the data based on the type specified for every column.

• The standard data types are:
  • action, boolean, button, button-icon, currency, date, date-local, email, location, number, percent, phone, text, url.
  • The default is text.

But, What if I need a custom UI on a cell? This is were a Custom Data Type enters in the scene.

Creating a new data type allows to build a specialized cell, like a button for deleting a row, an image for showing information, or a unique display for text or numbers. Additionally, you can assign a custom class to each row that uses your custom data type.

In this recipe, a custom data type is created for showing a contact image with the component.

<aside> ☝ I do recommend you read the official documentation on this Creating a Custom Data Type here.

</aside>

This LWC creates and uses a custom data type to show an image contact, but you could create any custom type that requires a special markup.

How to create a new Custom data type

There are 2 major steps involved in creating a custom data type:

1. Define an HTML template for the new UI of this custom data type.
2. Create a new LWC extending the ****LightningDatatable class, that uses an HTML template for the new UI.

Defining the template for the new UI

Create the template for the HTML markup to show. It takes one parameter and shows an <img> HTML tag:

<template>
    <img
        src={typeAttributes.pictureUrl}
        class="slds-avatar slds-avatar_circle slds-avatar_large"
        alt="Profile photo"
    />
</template>

In this recipe this file has been named customPicture.html and it is placed inside the same folder as the LWC that is created.