Lightning Datatable With Single Checkbox Selection

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>

SimpleDatatable_cmp.html

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);
	}
	})

SimpleDatatableController.js

Please see the code comments for more details.

Datatable with single checkbox selection

 

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

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