Custom Data Type in LWC Data Table

Working with Lightning Web Components often brings opportunities to go beyond out-of-the-box features and build something truly custom. One such area is the LWC datatable, which, while powerful, can be further enhanced by creating custom data types tailored to specific use cases.

In this blog, we’ll explore how to define and use a custom data type in an LWC datatable. Whether you want to render clickable URLs, styled badges, or dynamic content, this approach opens the door to endless possibilities. We’ll walk through the core steps, share relevant code snippets, and showcase how it all looks in the final UI.

While standard datatable columns can handle text, numbers, or even images, they often fall short when you need something more interactive or customized. So, we will create a custom component called customDataTypeDataTable that extends the standard LightningDatatable component. Then, integrated this with the parent component myDataTable, which defines the data and columns for the table.

The result is a datatable that displays clickable links in a clean and user-friendly way.

Understanding Custom Data Types in LWC Datatables

Before moving into the implementation, it’s important to understand what a custom data type is in this context. Normally, the lightning-datatable component comes with several built-in data types like text, number and date. But sometimes, we need more than what’s available by default. By extending LightningDatatable and defining a static customTypes property, we can introduce our custom cell rendering.

For this blog, we defined a custom type called clickableUrl. This type uses an HTML template that renders a clickable link. We are leveraging the <lightning-formatted-url> component, which is designed to display URLs correctly and even handle the “open in new tab” behavior seamlessly.

Building the Custom Data Type Component

The first step here is our custom data type component, which is named customDataTypeDataTable. Below is the complete code for the component:

customDataTypeDataTable.html

<template>
<lightning-formatted-url value={typeAttributes.url} target="_blank" label={value}></lightning-formatted-url>
</template>

In this template, we use the lightning-formatted-url component to render the URL. The value attribute is bound to the URL provided in our data record, while the label is set to the cell’s display value. The target=”_blank” attribute will make sure that the link opens in a new tab when clicked.

customDataTypeDataTable.js

import LightningDatatable from 'lightning/datatable';
import customUrlTemplate from './customDataTypeDataTable.html';

export default class CustomDataTypeDataTable extends LightningDatatable {
staticcustomTypes= {
clickableUrl: {
template:customUrlTemplate,
standardCellLayout:true,
typeAttributes: ['url']
}
}
}

This JavaScript file is the main piece of our custom data type. By extending LightningDatatable, we can define a new custom type within the static customTypes property. Here, the clickableUrl represents our custom type. The value is an object that specifies:

• template: The HTML template that should be used for this type (i.e., our customUrlTemplate).
• standardCellLayout: Set to true to ensure the custom cell inherits the standard styling and accessibility features.
• typeAttributes: An array listing attributes that the template expects in our case, just ‘url’.

customDataTypeDataTable.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
</LightningComponentBundle>

This meta file makes sure that our component is exposed to the Salesforce platform so that it can be used in other components or even directly on Lightning pages.

Integrating with myDataTable Component

With our custom data type, the next step is to integrate it into a parent component that handles data and column definitions. So we can name this component as myDataTable.

myDatatable.html

<template>
<lightning-card title="Customer Websites">
<c-custom-data-type-data-table key-field="id" data={data} columns={columns}>
</c-custom-data-type-data-table>
</lightning-card>
</template>

Here, the <lightning-card> provides a container with a title. Inside, we include our custom datatable component using its tag <c-custom-data-type-data-table>. The attributes key-field, data and columns are critical for the datatable’s functionality.

myDatatable.js

import { LightningElement, track } from 'lwc';

export default class MyDatatable extends LightningElement {
@track data = [
{ id: '1', name: 'Example Company', website: 'https://www.example.com' },
{ id: '2', name: 'Salesforce', website: 'https://www.salesforce.com' }
];

columns = [
{ label: 'Company Name', fieldName: 'name', type: 'text' },
{
label: 'Website',
fieldName: 'website',
type: 'clickableUrl',
typeAttributes: {
// Pass the URL to your custom template via the typeAttributes
url: { fieldName: 'website' }
}
}
];
}

In this JavaScript file, we can define the data array with unique id values, company names, and website URLs. The columns array is which shows the actual components and values to retrieve:

• The “Company Name” column uses the standard text type.

The “Website” column uses our custom type clickableUrl. By setting the typeAttributes for the column, we map the url attribute to the website field from our data records.

myDatatable.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>63.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

This file ensures that myDataTable can be added to various types of Lightning pages via the App Builder.

Deploying and Testing

After writing the code, we will deploy both components to the Salesforce org. The next step is to add myDataTable to a Lightning page using the Lightning App Builder. Here is some information on how we can achieve it:

1. Using Lightning App Builder:
Open the Lightning App Builder, create a new page or edit an existing one and drag the myDataTable component onto the actual page.

The screenshot below shows Lightning App Builder with the page titled “Custom Type Using LWC Data Table”

2. Reviewing the UI:
Once the page is activated and reviewed, observe the datatable. It displays two columns: “Company Name” and “Website.” The website URLs appeared as clickable links with the appropriate styling from the lightning-formatted-url component.

Here is a screenshot of the actual table UI, displaying company names along with clickable website links

3. Clicking the Link:
To confirm that everything is working as expected, we can check by clicking on one of the links. Once the URL opens in a new tab, it shows that the target attribute is functioning correctly.

The screenshot below shows the website open in a new browser tab.

Also Read – Best practices for Salesforce Flow

FAQs:

1. What is the lightning Datatable in LWC?

lightning-datatable displays tabular data where each column renders the content based on the data type. For example, an email address is displayed as a hyperlink with the mailto: URL scheme by specifying the email type. The default data type on a column is text.

2. What are the key attributes of Lightning Datatable?

The key attributes of <lightning-datatable> in LWC are data, columns, and key-field, which are used to populate the table with data, define the structure of the columns, and specify the unique identifier for each row, respectively.

3. How can you make a Lightning Data Table editable?

To make a Lightning Data Table editable (inline editing), set the editable property to true for the columns you want to allow editing in the columns array within your LWC component.

Conclusion

In this blog, we explored how to create a custom clickable URL column in an LWC datatable. We extended the `LightningDatatable` component by defining a custom data type, `clickableUrl` and then implemented it in the `myDataTable` component by mapping the URL field accordingly. I hope this step-by-step guide helps you build similar customizations in your own projects.

Do you have questions or ideas? Drop them in the comments below. Happy coding

Get a complete Roadmap To Learn Salesforce Admin And Development

Name *

First

Last

Email *

Comment or Message

Submit