How To Add Toggle Button For LWC Lightning Datatable?

Updated by

In Salesforce LWC data tables, the toggle button is used to represent the checkbox or boolean field values in the data table column. Although a toggle button is a Boolean data type, displaying it as a toggle button directly on the data table is not supported.

To display a toggle icon, we need to create a custom type that defines the attributes to display the toggle button. In this Salesforce tutorial, we will learn how to add a toggle button in LWC lightning data table.

Add a Toggle Button For LWC Lightning Datatable

In the example below, I will create a lightning datatable with dynamically fetching the contact records. In the contact object, we have a checkbox field, Do Not Call, that will be displayed in the data table as a toggle button column.

To access the checkbox field, ensure its field visibility is enabled for the profiles. To enable the field visibility, go to Object Manager > object (contact)> fields and relationships > select field > Set field level security.

To display the toggle button, you must have a checkbox(boolean) field in the object that you will use in the Lightning Data Table.

Now, follow the steps below to create an LWC data table with a button column.

  1. Create a controller class for the object including the checkbox field using the code below.
public with sharing class LWCInlineToggle {
    @AuraEnabled(Cacheable=true)
    public static List<Contact> getContacts() {
        return [
            SELECT Id, Name, FirstName, LastName, Phone, Email, DoNotCall
            FROM Contact 
            ORDER BY CreatedDate 
        ];
    }
}
  1. To define the toggle button logic and UI for a single toggle switch, we need to create a separate LWC component toggleType. Consider this as a helper component that we will refer to in the main LWC component.

Enter the code below in the JS file for the LWC component.

import { LightningElement, api, track } from 'lwc';

export default class Toggeltype extends LightningElement {
    @api value;
    @api context;
    @track togglevalue;

    renderedCallback() {
        this.togglevalue = this.value;
    }

    handleChange(event) {
        event.preventDefault();
        let value = event.target.checked;
        this.value = value;
        this.togglevalue = value;

        const toggel = new CustomEvent('toggelselect', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                data: { 
                    context: this.context, 
                    value: this.value 
                }
            }
        });
        this.dispatchEvent(toggel);
    }
}
  1. After this, enter the code below in toggleType.html to define the UI of the toggle button.
<template>
    <div class="slds-form-element">
        <label class="slds-checkbox_toggle slds-grid">
            <span class="slds-form-element__label slds-m-bottom_none"></span>
            <input 
                type="checkbox" 
                name="checkboxtoggle" 
                value={togglevalue} 
                checked={togglevalue} 
                onchange={handleChange}/>
            <span id="checkboxtoggle" 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>

The checkboxtoggle will display text Enabled and Disabled when we check and uncheck the toggle button.

  1. After handling the toggle button’s UI, create another LWC component that will handle the logic to integrate the toggle button column into the data table.