• WHO WE ARE
  • WHAT WE DO
    • Salesforce
      • Implementations
        • Sales Cloud
        • Service Cloud
        • CPQ
        • Field Service Lightning
        • Field Service for SMEs
      • Developments
        • Salesforce Customization
        • Custom Application Development
        • AppExchange Product Development
      • Migrations
        • Classic to Lightning Migration
        • Other Systems to Salesforce Migration
      • Integrations
    • Data Science
      • BI Solutions
      • AI/ML solutions
      • Agentic AI
  • HOW WE DO
    • Delivery Model
    • Our Works
  • REACH US
    • Contact Us
    • Careers
  • BLOG
    • WHO WE ARE
    • WHAT WE DO
      • Salesforce
        • Implementations
          • Sales Cloud
          • Service Cloud
          • CPQ
          • Field Service Lightning
          • Field Service for SMEs
        • Developments
          • Salesforce Customization
          • Custom Application Development
          • AppExchange Product Development
        • Migrations
          • Classic to Lightning Migration
          • Other Systems to Salesforce Migration
        • Integrations
      • Data Science
        • BI Solutions
        • AI/ML solutions
        • Agentic AI
    • HOW WE DO
      • Delivery Model
      • Our Works
    • REACH US
      • Contact Us
      • Careers
    • BLOG
  • [email protected]
  • (+91) 44-49521562
Merfantz - Salesforce Solutions for SMEs
Merfantz - Salesforce Solutions for SMEs
  • WHO WE ARE
  • WHAT WE DO
    • Salesforce
      • Implementations
        • Sales Cloud
        • Service Cloud
        • CPQ
        • Field Service Lightning
        • Field Service for SMEs
      • Developments
        • Salesforce Customization
        • Custom Application Development
        • AppExchange Product Development
      • Migrations
        • Classic to Lightning Migration
        • Other Systems to Salesforce Migration
      • Integrations
    • Data Science
      • BI Solutions
      • AI/ML solutions
      • Agentic AI
  • HOW WE DO
    • Delivery Model
    • Our Works
  • REACH US
    • Contact Us
    • Careers
  • BLOG

Custom Data Types in Salesforce Lightning Datatable

Custom Data Types in Salesforce Lightning Datatable
  • February 6, 2025
  • Tech Blogger
  • Salesforce, Salesforce Lightning
  • 0

Salesforce’s lightning-datatable component allows developers to display data in a tabular format with built-in support for various standard datatypes. However, sometimes, unique business requirements necessitate the use of custom data types with specialized formatting.

Standard Datatypes Supported by lightning-datatable

The lightning-datatable supports the following standard datatypes:

| action               | Boolean   | button
| button-icon   | currency   | date
| date-local      | email          | location
|  number          | percent     | phone
|  text                   | URL             |

Why Custom Data Types?

When the standard datatypes don’t meet specific requirements (e.g., toggle switches or specialized picklists), Salesforce provides the flexibility to extend lightning-datatable with custom datatypes.

Steps to Define Custom Data Types

Step 1: Create a Lightning Component to Extend lightning-datatable

The extended component defines the custom datatypes and their associated templates.

  1. Custom Component Structure:

customDtTypeLwc/

├── customDtTypeLwc.html

├── customDtTypeLwc.js

├── customDtTypeLwc.js-meta.xml

├── picklistEditable.html

├── picklistNotEditable.html

├── toggelTemplate.html

  1. Custom Component Files:

HTML Template for Toggle (toggelTemplate.html):

<template>

<c-toggeltype

value={typeAttributes.value}

context={typeAttributes.context}>

</c-toggeltype>

</template>

JavaScript Controller (customDtTypeLwc.js):

import LightningDatatable from ‘lightning/datatable’;

import picklistEditable from ‘./picklistEditable.html’;

import picklistNotEditable from ‘./picklistNotEditable.html’;

import toggelTemplate from ‘./toggelTemplate.html’;

 

export default class CustomDtTypeLwc extends LightningDatatable {

static customTypes = {

picklistColumn: {

template: picklistNotEditable,

editTemplate: picklistEditable,

typeAttributes: [‘label’, ‘placeholder’, ‘options’, ‘value’, ‘context’],

},

toggel: {

template: toggelTemplate,

typeAttributes: [‘value’, ‘context’],

},

};

}

Step 2: Create a Toggle Lightning Web Component

  1. HTML (toggeltype.html):

<template>

<div class=”slds-form-element”>

<label class=”slds-checkbox_toggle slds-grid”>

<input

type=”checkbox”

checked={togglevalue}

onchange={handleChange} />

<span class=”slds-checkbox_faux_container”>

<span class=”slds-checkbox_faux”></span>

<span class=”slds-checkbox_on”>Enabled</span>

<span class=”slds-checkbox_off”>Disabled</span>

</span>

</label>

</div>

</template>

  1. JavaScript (toggeltype.js):

import { LightningElement, api, track } from ‘lwc’;

 

export default class Toggeltype extends LightningElement {

@api value;

@track togglevalue;

 

renderedCallback() {

this.togglevalue = this.value;

}

 

handleChange(event) {

const value = event.target.checked;

this.togglevalue = value;

 

this.dispatchEvent(new CustomEvent(‘toggelselect’, {

detail: { value },

}));

}

}

Step 3: Define Templates for Picklist

  1. Read-Only Template (picklistNotEditable.html):

<template>

<span class=”slds-truncate” title={value}>{value}</span>

</template>

  1. Editable Template (picklistEditable.html):

<template>

<lightning-combobox

label={typeAttributes.label}

value={typeAttributes.value}

options={typeAttributes.options}

placeholder={typeAttributes.placeholder}>

</lightning-combobox>

</template>

Testing the Custom Data Types

Apex Controller

public with sharing class LWCInlineCtrl {

@AuraEnabled(Cacheable = true)

public static List<Contact> getContacts() {

return [

SELECT Id, Name, FirstName, LastName, Phone, Email, GenderIdentity, DoNotCall

FROM Contact

WHERE Email != null AND Phone != null

ORDER BY CreatedDate LIMIT 5

];

}

}

Test Component

  1. HTML (extended_inline_datatable.html):

<template>

<lightning-card title=”Custom Data Types”>

<template if:true={contacts}>

<c-custom-dt-type-lwc

key-field=”Id”

data={contacts}

columns={columns}>

</c-custom-dt-type-lwc>

</template>

</lightning-card>

</template>

  1. JavaScript (extended_inline_datatable.js):

import { LightningElement, wire } from ‘lwc’;

import getContacts from ‘@salesforce/apex/LWCInlineCtrl.getContacts’;

 

const columns = [

{ label: ‘Name’, fieldName: ‘Name’, type: ‘text’ },

{ label: ‘Phone’, fieldName: ‘Phone’, type: ‘phone’ },

{ label: ‘Gender’, fieldName: ‘GenderIdentity’, type: ‘picklistColumn’, editable: true },

{ label: ‘Do Not Call’, fieldName: ‘DoNotCall’, type: ‘toggel’ },

];

 

export default class Extended_inline_datatable extends LightningElement {

@wire(getContacts) contacts;

columns = columns;

}

See how FieldAx can transform your Field Operations.

Try it today! Book Demo

You are one click away from your customized FieldAx Demo!

Conclusion

With custom datatypes, you can meet unique business needs while leveraging the powerful lightning-datatable component. By using custom HTML templates and JavaScript logic, Salesforce provides immense flexibility for data presentation and interaction in Lightning Web Components.

Author Bio

Tech Blogger
+ Recent Posts
  • How to Dynamically Evaluate Formulas in Salesforce Apex
    June 19, 2025
    How to Dynamically Evaluate Formulas in Salesforce Apex
  • Comprehensive Overview of Salesforce Agent-Force Platform
    June 12, 2025
    Comprehensive Overview of Salesforce Agent-Force Platform
  • Salesforce GraphQL Revolutionizing Data Queries in CRM
    June 6, 2025
    Salesforce GraphQL: Revolutionizing Data Queries in CRM
  • Unlocking the Power of Dynamic Forms in Salesforce Lightning App Builder
    May 29, 2025
    Unlocking the Power of Dynamic Forms in Salesforce Lightning App Builder
Tags: lightning web componentSalesforce Lightning Datatable
  • Previous How to create Custom Reusable Lookup in LWC
  • Next SObject Selection and Record page with Lazy Loading in Salesforce LWC
Merfantz Technologies is a leading Salesforce consulting firm dedicated to helping small and medium enterprises transform their operations and achieve their goals through the use of the Salesforce platform. Contact us today to learn more about our services and how we can help your business thrive.

Discover More

Terms and Conditions
Privacy Policy
Cancellation & Refund Policy

Contact Info

  • No 96, 2nd Floor, Greeta Tech Park, VSI Industrial Estate, Perungudi, Chennai 600 096, Tamil Nadu, INDIA
  • (+91) 44-49521562
  • [email protected]
  • 9:30 IST - 18:30 IST

Latest Posts

How to Dynamically Evaluate Formulas in Salesforce Apex
How to Dynamically Evaluate Formulas in Salesforce Apex June 19, 2025
Comprehensive Overview of Salesforce Agent-Force Platform
Comprehensive Overview of Salesforce Agent-Force Platform June 12, 2025
Salesforce GraphQL Revolutionizing Data Queries in CRM
Salesforce GraphQL: Revolutionizing Data Queries in CRM June 6, 2025

Copyright @2023 Merfantz Technologies, All rights reserved