Lightning Datatable with Single Checkbox Selection

Lightning Single checkbox selector component poster
Datatable with single checkbox selection


There has been a lot of requirements for lightning datatable with a single checkbox selection but it is not available in handy. I don’t know why people are looking for single checkbox selection instead of radio buttons (more appropriate solution ) for the same purpose. Anyways, Here I am detailing a lightning datatable with single checkbox selection.

Objective: A lightning custom datatable component with a single row checkbox selection

Prerequisites: Basic knowledge of lightning component, Javascript .


This implementation includes the following members. Here, we are mainly focusing on the view part of the component so, the server-side interaction of the component is not included in this implementation, you can develop it yourself, based on the requirement. Comment below if you need any help on that.

  • SimpleDatatable.cmp
  • SimpleDatatableController.js


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<!– table records are stored on the data attribute –>
<aura:attribute name="data" type="List" access="global" />
<!– init method loads the data attribute values –>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<div class="slds-m-around_xx-large">
<h1 class="slds-text-heading–medium">Simple Contacts</h1>
<table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal slds-p-horizontal_small" role="grid">
<tr class="slds-text-title_caps">
<th class="slds-cell-shrink" scope="col">
<!– No title only action , for selection checkbox header –>
<th class="slds-cell-shrink" scope="col">
<div class="slds-truncate" title="Name">Name</div>
<th class="slds-cell-shrink" scope="col">
<div class="slds-truncate" title="City">City</div>
<th class="slds-cell-shrink" scope="col">
<div class="slds-truncate" title="Country">Country</div>
<!– Iterates the collection of records stored in the data attribute–>
<aura:iteration items="{!}" var="row">
<tr class="slds-hint-parent">
<td data-label="" scope="row">
<!– checkbox selection invokes the onCheckboxChange controller method–>
<ui:inputCheckbox aura:id="rowSelectionCheckboxId" value="false" text="{!}" change="{!c.onCheckboxChange}"/>
<td data-label="Name">
<div class="slds-truncate" title="{!}">{!}</div>
<td data-label="City">
<div class="slds-truncate" title="{!}">{!}</div>
<td data-label="Country">
<div class="slds-truncate" title="{!}">{!}</div>

Please see the code comments for more details.


doInit : function(component, event, helper) {
//user information
var userData = [{"id":1, "name":"Anil", "city":"Ernakulam", "country":"India"},
{"id":2, "name":"Akhil", "city":"Palakkad", "country":"India"},
{"id":3, "name":"Raju", "city":"Wayanad", "country":"India"},
{"id":4, "name":"Mahesh", "city":"Kannur", "country":"India"}
onCheckboxChange : function(component, event, helper) {
//Gets the checkbox group based on the checkbox id
var availableCheckboxes = component.find('rowSelectionCheckboxId');
var resetCheckboxValue = false;
if (Array.isArray(availableCheckboxes)) {
//If more than one checkbox available then individually resets each checkbox
availableCheckboxes.forEach(function(checkbox) {
checkbox.set('v.value', resetCheckboxValue);
} else {
//if only one checkbox available then it will be unchecked
availableCheckboxes.set('v.value', resetCheckboxValue);
//mark the current checkbox selection as checked

Please see the code comments for more details.
Datatable with single checkbox selection

Don’t forget to share the post if you like it & bookmark the blog for future references.

If you have any comments or doubts on this post, Please comment on the box below.

Lightning Single checkbox selector component poster


4 thoughts on “Lightning Datatable with Single Checkbox Selection”

  1. Instead of this you can simply use the maxRowSelection=”1″ as an attribute in lightning datatable. It would automatically get converted to radio button.

Leave a Reply to Anil Somasundaran Cancel reply

%d bloggers like this: