How to Add Checkboxes and Radio Buttons in Salesforce LWC Datatables

In plain words: Adding checkboxes and radio buttons to a custom DataTable in Lightning Web Components (LWC) allows users to select individual rows, toggle boolean column values, or make single-select choices directly inside a structured table. By configuring native datatable properties or custom column attributes, you can turn a static table into an interactive grid.

Displaying data in a tabular format is a standard requirement in Salesforce applications. Often, users need to interact with table rows—such as selecting records for batch approval, toggling active states, or picking a single record from a list. The standard <lightning-datatable> component supports built-in row selection checkboxes out of the box, but rendering custom boolean toggles or radio selections requires specific column type attributes.

1. Built-In Row Selection vs. Custom Cell Inputs

When implementing selection controls in a datatable, choose the right mechanism for your UX goal:

• Built-In Row Selection: Enabled by omitting hide-checkbox-column on the datatable, rendering standard row-selection checkboxes managed via onrowselection.
• Boolean Cell Editing: Configuring column types as type: 'boolean' with typeAttributes: { editable: true } allows users to click and toggle checkboxes directly inside cells.
• Radio Button Selection: Standard datatables do not natively support single-select radio buttons out of the box; multi-select checkboxes are standard unless custom cell templates or custom datatable types are implemented.

360 DataTable Controls Card:

• Base Component: <lightning-datatable>
• Row Selection Event: onrowselection={handleRowSelection}
• Event Payload: event.detail.selectedRows
• Boolean Column Type: Renders native interactive checkboxes per row when marked editable.

2. Step-by-Step Implementation

Step 1: Build the Template Markup (customDataTable.html)

<template>
    <lightning-card title="Interactive Record Table" icon-name="standard:record">
        <div class="slds-p-around_medium">
            <lightning-datatable
                data={data}
                columns={columns}
                key-field="id"
                show-row-number-column
                onrowselection={handleRowSelection}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

Step 2: Implement the JavaScript Controller (customDataTable.js)

import { LightningElement, track } from 'lwc';

export default class CustomDataTable extends LightningElement {
    @track data = [
        { id: '1', name: 'Acme Corp Agreement', isActive: true },
        { id: '2', name: 'Global Tech License', isActive: false },
        { id: '3', name: 'Apex Solutions Contract', isActive: false }
    ];

    columns = [
        { label: 'Record Name', fieldName: 'name', type: 'text' },
        { 
            label: 'Active Status', 
            fieldName: 'isActive', 
            type: 'boolean',
            typeAttributes: { editable: true } 
        }
    ];

    handleRowSelection(event) {
        const selectedRows = event.detail.selectedRows;
        console.log('Selected Rows Count:', selectedRows.length);
        selectedRows.forEach(row => {
            console.log('Selected Record:', row.name);
        });
    }
}

Step 3: Configure Metadata XML (customDataTable.js-meta.xml)

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

3. Common Traps & Development Best Practices

Layout Trap: Hiding the Checkbox Column While Expecting Row Selection
Adding hide-checkbox-column to your <lightning-datatable> markup removes the selection checkboxes entirely from the left side of the table. If you want users to select rows via checkboxes, ensure this attribute is omitted.

Core Rule: Use built-in row selection with hide-checkbox-column removed for multi-select rows, and use type: 'boolean' with editable: true for inline column value toggling.

• Handle Save Events for Inline Edits: When using editable boolean columns, implement onsave={handleSave} to capture cell draft values and persist them back to Salesforce via Apex.
• Ensure Unique Key Fields: Always provide a reliable, unique identifier for key-field="id" to prevent rendering bugs and selection mismatch errors in the datatable.

Summary

Implementing checkboxes and row selection in Lightning Web Component datatables provides users with an efficient way to manage records in bulk. By leveraging native datatable attributes and row selection events, developers can build responsive, interactive data grids with clean architecture.