Lightning Datatable with Single Checkbox Selection

Lightning Single checkbox selector component poster

ezgif.com-crop
Datatable with single checkbox selection

Scenario

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 .

Solution

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

SimpleDatatable.cmp

<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">
<thead>
<tr class="slds-text-title_caps">
<th class="slds-cell-shrink" scope="col">
<!– No title only action , for selection checkbox header –>
</th>
<th class="slds-cell-shrink" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="slds-cell-shrink" scope="col">
<div class="slds-truncate" title="City">City</div>
</th>
<th class="slds-cell-shrink" scope="col">
<div class="slds-truncate" title="Country">Country</div>
</th>
</tr>
</thead>
<tbody>
<!– Iterates the collection of records stored in the data attribute–>
<aura:iteration items="{!v.data}" 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="{!row.id}" change="{!c.onCheckboxChange}"/>
</td>
<td data-label="Name">
<div class="slds-truncate" title="{!row.name}">{!row.name}</div>
</td>
<td data-label="City">
<div class="slds-truncate" title="{!row.city}">{!row.city}</div>
</td>
<td data-label="Country">
<div class="slds-truncate" title="{!row.country}">{!row.country}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>

Please see the code comments for more details.

SimpleDatatableController.js

({
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"}
];
component.set("v.data",userData);
},
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
event.getSource().set("v.value",true);
}
})

Please see the code comments for more details.

ezgif.com-crop
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

References

https://www.lightningdesignsystem.com/components/data-tables/

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputCheckbox.htm

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

%d bloggers like this: