How to Display a Checkbox Fields in LWC Data Table?

In Salesforce, checkbox fields represent boolean values, which means the checkbox is selected when the value is true and unchecked when false. In this Salesforce tutorial, we will learn how to add checkbox fields in the LWC data table columns to display the status of the boolean values through checkboxes.

Table of Contents

Display the Checkbox field in the Salesforce LWC Data Table

In the example below, we will create an LWC Lightning data table by dynamically displaying the lead records. In the lead object, we have a custom checkbox field “high_priority__c,” so we will display this checkbox field in the LWC data table.

Create an Apex controller class LeadController to fetch the list of lead records.

public with sharing class LeadController {
    @AuraEnabled( cacheable = true )
    public static List< Lead > getleads() {
        return [ SELECT Id, Name, Company, Status, High_priority__c FROM Lead LIMIT 10 ];
    }
}

Create an LWC component and enter the code below in the HTML file.

<template>
    <lightning-card title="Lead with checkbox column">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={leads}
                columns={columns}
                hide-checkbox-column="false">
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

Now, enter the code below in the JS file, which will define the logic of displaying columns in the data table and also display the checkbox field column.

import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text' },
    { label: 'Company', fieldName: 'Company', type: 'text' },
    { label: 'Status', fieldName: 'Status', type: 'text' },
    { label: 'High Priority', fieldName: 'High_priority__c', type: 'boolean' }
];

export default class LeadTable extends LightningElement {
    leads = [];
    columns = columns;

    @wire(getLeads)
    wiredLeads({ error, data }) {
        if (data) {
            this.leads = data;
        } else if (error) {
            this.leads = [];
        }
    }
}

In the above code logic, we have fetched the leads from the controller class using getLeads in the import method.

Then, in the columns array, we mapped the field values with the table columns, and here, we defined the checkbox field High_priority__c as type: ‘boolean’ to display this field column as a checkbox in the LWC data table.

If we do not define the type, the column values will appear as true or false instead of a checkbox.

To make the component visible to the Lightning pages, enter the code below in the meta.xml file inside the <LightningComponentBundle> tag.

isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

After deploying the LWC component to the Lightning page, the checkbox field column values are displayed in checkbox format instead of true or false.

Add Checkbox field column in LWC data table

This way, we can display a checkbox field column in the Salesforce Lightning LWC data table by following the above steps.

Display Editable Checkbox Column in the Salesforce LWC Data Table

To make the checkbox field column dynamic, we can add inline editing to the column, through which we can also update the checkbox values directly from the LWC data table.

For this, we don’t need to change the controller class logic. To make the checkbox column editable, modify the HTML and JS code of the LWC component, as explained in the steps below.

In the modification, we need to handle and define the logic to edit, save, and update the records for the checkbox column values.

Enter the code below in the LWC component’s HTML file.

<template>
    <lightning-card title="Lead with checkbox column">
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={leads}
                columns={columns}
                hide-checkbox-column="false"
                onsave={handleSave}
                draft-values={draftValues}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

In this, we have added the reference to the handleSave event that we have defined in the JS code.

After this, enter the code below in the LWC component’s JS file.

In this update, we have imported the updateRecord api from Lightning. Then, to make the checkbox column editable, we have marked it editable: true in the columns mapping.

import { LightningElement, wire, track } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';
import { updateRecord } from 'lightning/uiRecordApi';

const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text' },
    { label: 'Company', fieldName: 'Company', type: 'text' },
    { label: 'Status', fieldName: 'Status', type: 'text' },
    { 
        label: 'High Priority', 
        fieldName: 'High_priority__c', 
        type: 'boolean',
        editable: true
    }
];

export default class LeadTable extends LightningElement {
    @track leads = [];
    @track draftValues = [];
    columns = columns;

    @wire(getLeads)
    wiredLeads({ error, data }) {
        if (data) {
            this.leads = data;
        } else if (error) {
            this.leads = [];
        }
    }

    async handleSave(event) {
        const updatedFields = event.detail.draftValues.slice();

        const recordUpdates = updatedFields.map(draft => {
            return {
                fields: {
                    Id: draft.Id,
                    High_priority__c: draft.High_priority__c
                }
            };
        });

        try {
            const updatePromises = recordUpdates.map(record =>    
              updateRecord(record));
            await Promise.all(updatePromises);
            this.draftValues = [];
        } catch (error) {
            console.error(error);
        }
    }
}

The handleSave method gets the edited data using event.detail.draftValues, which holds the changed checkbox values and record IDs. Then, it copies this data with .slice() and formats each edited row into a field format with the record ID and the updated High_priority__c checkbox value.

Then, using updateRecord, make a list of promises that show that the records are being saved. Using Promise.all and await, it waits for all the saves to finish at the same time.

After making the changes in the JS and HTML files, you might need to redeploy the LWC component to the Lightning page to view the changes.

Now, you will see that we can edit the values in the checkbox column, where we can check and uncheck the values and save them directly from the data table.

Make checkbox field editable in LWC data table

This way, we can display checkbox field columns in the LWC data table with enabled inline editing, by which we can update the column values directly from the data table.

Conclusion

In this Salesforce tutorial, we have learned how to display a checkbox field column in the LWC Lightning Data Table. In the first example, we simply displayed the checkbox column using the type: ‘boolean’ attribute.

To make the checkbox column dynamic, we learned to add inline editing in the checkbox column, through which we can change and update the values directly from the data table.

How to Display a Checkbox Fields in LWC Data Table?

Display the Checkbox field in the Salesforce LWC Data Table

Display Editable Checkbox Column in the Salesforce LWC Data Table

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK