In Salesforce Lightning data tables, we use radio buttons to handle row selection. In Salesforce Lightning Web Components, we don’t have a standard “type” to define the radio button. To add a radio button in the LWC data table, we need to define a custom type.
In this Salesforce tutorial, we will learn how to add a radio to the Salesforce LWC data table.
Add a Radio Button in Salesforce LWC Datatable
I will explain how to add a radio button for row selection in the LWC data table by manually entering sample data and dynamically fetching the data from a Salesforce object.
Add a Radio Button for Custom Data in Salesforce LWC Datatable
I will add the information to the JS file of the LWC component for the sample data. Now, create an LWC component and follow the steps below.
- In the LWC component’s JS file, enter the code below to handle the logic of adding a radio button by defining a custom type.
In this code, we have also entered the custom data in the tableData. The columns array will display the entered data in the LWC data table.
import { LightningElement, track } from 'lwc';
export default class DataTableWithRadioButtons extends LightningElement {
tableData = [
{ id: '1', name: 'Record 1', amount: 100 },
{ id: '2', name: 'Record 2', amount: 200 },
{ id: '3', name: 'Record 3', amount: 300 }
];
selectedRow;
preSelectedRow = ['1'];
columns = [
{ label: 'Name', fieldName: 'name' },
{ label: 'Amount', fieldName: 'amount', type: 'currency' }
];
handleRowSelection(event) {
const selectedRows = event.detail.selectedRows;
if (selectedRows.length > 0) {
this.selectedRow = selectedRows[0];
} else {
this.selectedRow = null;
}
}
}To add a preselected radio button in the data table column, we have added preSelectedRow = [‘1’]. This will ensure that one row is pre-selected and changes when users select another row.
- Enter the code below in the HTML file to render the data in the LWC data table.
<template>
<lightning-datatable
key-field="id"
data={tableData}
columns={columns}
max-row-selection="1"
selected-rows={preSelectedRow}
onrowselection={handleRowSelection}>
</lightning-datatable>
</div>
</template>The max-row-selection=”1″, limits selection to one row, displaying radio buttons instead of checkboxes in the data table.
- In the meta.xml file, enter the code below inside the <LightningComponentBundle> tag to make the component exposed to the Lightning pages.
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>- Deploy the LWC component to the Lightning page. After this, you will see the radio button column on the data table, from which you can select a row.
This way, we can display radio buttons in the Salesforce LWC data tables by defining a custom type.
Add a Radio Button for Dynamically Fetched Data in Salesforce LWC Datatable
In this example, I will dynamically fetch the account records using the Apex calling method and add radio buttons for row selection in the table column.
- Create a controller class to fetch the data from the account object.
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name, AnnualRevenue, Industry FROM Account LIMIT 10];
}
}- After this, create an LWC component and enter the code below in the JS file defining the logic of displaying the radio button and row selection through the radio buttons.
import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
export default class AccountDatatable extends LightningElement {
accounts = [];
selectedAccount;
error;
columns = [
{ label: 'Account Name', fieldName: 'Name', type: 'text' },
{ label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency' },
{ label: 'Industry', fieldName: 'Industry', type: 'text' }
];
@wire(getAccounts)
wiredAccounts({ error, data }) {
if (data) {
this.accounts = data.map(account => ({
id: account.Id,
Name: account.Name,
AnnualRevenue: account.AnnualRevenue,
Industry: account.Industry
}));
this.error = undefined;
} else if (error) {
this.error = 'Failed to load accounts: ' + error.body.message;
this.accounts = [];
}
}
handleRowSelection(event) {
const selectedRows = event.detail.selectedRows;
if (selectedRows.length > 0) {
this.selectedAccount = selectedRows[0];
} else {
this.selectedAccount = null;
}
}
get hideCheckboxColumn() {
return false;
}
}The handleRowEvent is triggered when a row is selected, and event.detail.selectedRows retrieves the array of selected rows from the data table event.
To ensure radio button visibility, we have used the setter hideCheckboxColumn(), which returns false. This ensures the selection column where radio buttons are rendered is not hidden.
In a lightning-datatable, the selection column displays radio buttons when max-row-selection=”1″ is set, opposite to checkboxes for multi-selection.
- After this, enter the code below in the HTML file to render the data in the data table along with the radio button column.
<template>
<lightning-card title="LWC table with Radio buttons"></lightning-card>
<lightning-datatable
key-field="id"
data={accounts}
columns={columns}
max-row-selection="1"
onrowselection={handleRowSelection}
hide-checkbox-column={hideCheckboxColumn}>
</lightning-datatable>
</div>
</template>In the above code, columns={columns} binds the columns array from JS to define the table’s columns.
Using the key attribute max-row-selection=”1,” we restrict the user to selecting one radio button (one row) at a time and configure the data table to display radio buttons instead of checkboxes.
- After this, enter the code below in the meta.xml file to make the component visible to the Lightning pages.
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>- Deploy the LWC component to the Lightning page, and there we can see the LWC data table with fetched account records and the radio button column for row selection.
To confirm the row selection via radio button, and for test purposes, we can also add a debug that will display the data of the selected row, and for that, add the code below in the HTML template.
<template if:true={selectedAccount}>
<p>Selected Account: {selectedAccount.Name} (Industry: {selectedAccount.Industry})</p>
</template>
<template if:true={error}>
<p>Error: {error}</p>This will show the debug message below the data table with the data of the selected data table row.
In the debug message, we can see the information of the selected row, and with this, we can confirm the data table row is selected.
This way, we can add radio buttons for the row selection in the Salesforce LWC Lightning data table.
Conclusion
In this Salesforce tutorial, we have learned how to display radio buttons in a Salesforce LWC lightning data table. In the above examples, we added radio button columns for row selection by using the data table component and configuring it with the max-row-selection=”1″ attribute to display radio buttons.
By following the above steps, you can efficiently add the radio button columns to the LWC data table.
You may also like to read:
- Show Image in Salesforce LWC Data Table
- Add Related Fields Columns in Salesforce LWC Data Table
- Add Buttons in Salesforce LWC Datatable
- Display Toast Notifications in Lightning Web Components (LWC)
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
