DevLife.Tech Custom Column in Datatable LWC.png
Learn how to Implement a custom column, such as a custom file upload, or display an image using LWC lightning-datatable.

Key Highlights

After reading this article, you’ll be able to:

  • Understand the need for a custom column in lightning-datatable
  • Learn the structure of a basic custom column
  • Understand how to use with lightning-datatable
  • Sample LWC component

Getting Started

Datatable Supported Standard Data Types

Here is a comprehensive list of data types supported by lightning-datatable. It is important to know the supported type and their implementation restriction beforehand to better design the end solution.

Data TypeRendered using Base Component
buttonlightning-button
button-iconlightning-button-icon
currencylightning-formatted-number
actionlightning-button-menu
datelightning-formatted-date-time
date-locallightning-formatted-date-time
emaillightning-formatted-email
locationlightning-formatted-location
numberlightning-formatted-number
booleanlightning-primitive-icon is displayed if true
percentlightning-formatted-number
phonelightning-formatted-phone
textlightning-formatted-text
urllightning-formatted-url
Standard Type to Base Component Matrix

Need for Custom Column in lightning-datatable

The data table formats the data cells of a column based on the type you specify for the column. Each data type is associated with a base Lightning component. For example, specifying the text type renders the associated data using a lightning-formatted-text component or date type displays a date and time based on the locale using lightning-formatted-date-time LWC base component.

Basically, every data type is displayed using available base components in the LWC component library. But this is not always the case like displaying an actionable button, upload file button, rich text content, toggle button, radio buttons, custom image or icon, etc. are not directly supported by lightning-datatable. In such scenarios lightning-datatable provide additional capabilities to extend functionality by allowing us to use custom LWC components as the custom data type for the datatable columns.

As part of building custom columns salesforce allows us to:

  • Specify custom type attributes – Used to customize the column cells even further
  • Implement text wrapping and clipping in custom cells
  • Implement different layouts in custom cells
  • Aligning content in custom cells
  • Support accessibility for custom cells
  • and even calling custom events from custom cells

Custom Column Scenarios

Here are some example scenarios where we can leverage support for custom functionality by lightning-datatable.

  1. Display Custom Images inside lightning-datatable
DevLife.Tech Custom Image in LWC Datatable
Custom Image in LWC Datatable
  1. Display Custom Toggle or Checkbox inside lightning-datatable
DevLife.Tech Toggle in LWC Datatable
Toggle Button in LWC Datatable
  1. Display File Upload Box inside lightning-datatable
DevLife.Tech Upload File in LWC Datatable
Upload File in LWC Datatable
  1. Display Picklist inside lightning-datatable
DevLife.Tech Picklist in LWC Datatable
Picklist in LWC Datatable

Basic Structure of Custom Column

Here’s how you can create custom data types.

Step 1: Create a custom LWC component that extends the LightningDatatable class. This component will be used as a datatable in your parent component.

customDatatable

Step 2: Create a custom data type by defining the custom LWC component which includes the desired UI and event mechanism. This will be rendered inside individual cells in datatable.

toggleButtonOutput

Step 3: Create a HTML template file inside a custom datatable component (Created in step 1) which acts as a connection between datatable and custom data type component.

customDatatable

Step 4: Ready to use/consume datatable with a custom column in your parent LWC component. Example below.

app

Either copy as needed code from the gist or download component bundle from the button below.

Sample HTML Templates

Custom Icon/Image in datatable

Use below as sample HTML templates in customDatatable component to display custom icons or images stored in static resource or external image URLs.

customIconOutput

DevLife.Tech Custom Image in LWC Datatable
Output: Custom Image / Icon in datatable

Custom Rich Text Contents in datatable

Use below as sample HTML templates in customDatatable component to display rich text contents that contain HTML tags. In the standard text data type HTML characters are stripped down to improve security. But there are some scenarios where we need to render HTML tags like <a>, <b>, <br> or <img> along with text, In such cases we can build custom components to satisfy the requirement.

customRichTextOutput

DevLife.Tech Escape HTML Characters in LWC Datatable
Output: Escape HTML Characters in LWC Datatable

Resources