How to display a checkbox field using ligntning:datatable?

Question

I'm trying to display a check box field using lightning:datatable component.

Here is the component markup.

<aura:component>
<aura:attribute name="invoices" type="Invoice__c[]"/>
<aura:attribute name="columns" type="List"/>

<aura:handler name="init" value="{! this }" action="{! c.init }"/>

<lightning:datatable data="{! v.invoices }" columns="{! v.columns }" keyField="id"/>

And this is my init controller method

init : function(component, event, helper) {
    component.set("v.columns",[
        {label:"Invoice Number", fieldName:"Name",type:"text"},
        {label:"Date", fieldName:"Date__c",type:"date"},
        {label:"Amount", fieldName:"Amount__c",type:"currency"},
         {label:"Paid", fieldName:"Paid__c",type:"text"}
    ]);

    var action = component.get("c.getInvoices");
    action.setCallback(this,function(response){
        component.set("v.invoices",response.getReturnValue());
    });
    $A.enqueueAction(action); }

This is the output.

All data is populated on the table except Paid__c, which is a checkbox. How do you display a checkbox field in a datatable? I have tried changing the type to boolean and checkbox without any luck. The documentation for neither lightning:datatable nor lightning:formattedText talks about displaying checkbox fields.

Answer 1

Old: Out of the box <lighting:datatable> component doesn't support booleans as checkboxes in the standard data types, the supported data types currently are:

• action
• button
• currency
• date
• email
• location
• number
• percent
• phone
• text
• url

These can be found under the "Formatting with Data Types" section on the Lightning datatables reference documentation

A quick workaround to this would be to output a text formula of the Paid__c field to display Yes / No or Paid / Unpaid and then to output this in the column.

Other than this you may need to look into more flexible table options which would allow for the use / display of checkbox fields.

Edit: From API Version 42 onwards the Boolean type is now supported.

Answer 2

Checkbox columns are now supported out-of-the-box in lightning:datatable and doesn't require custom Javascripting.

boolean: Displays the icon utility:check if the value is true, and a blank value otherwise.

Example

component.set('v.columns', [
    {label:"Invoice Number", fieldName:"Name",type:"text"},
    {label:"Date", fieldName:"Date__c",type:"date"},
    {label:"Amount", fieldName:"Amount__c",type:"currency"},
    {label:"Paid", fieldName:"Paid__c",type:"boolean"}                
]); 

Answer 3

You can use the iconName cell attribute to display icons in your datatable (see the "Appending an Icon to Column Data" section in the documentation).

This can either be a static value, e.g. utility:user if you want the same icon to be displayed in all rows. But (and this is what you'd need in your case) it can also take a field name which holds the name of the icon to display.

And so your Paid column would look something like:

{label: "Paid", fieldName: "Paid__c", type: "text", cellAttributes: {
    iconName: { fieldName: 'paidIcon' }
}}

Where your client-side logic would populate the paidIcon field with either utility:check or null based on the boolean value.

Answer 4

You can use checkbox unicodes by replacing true an false values with them.

columns = [
    { label: 'label1', fieldName: 'col1ApiName',cellAttributes: { class: 'slds-text-heading_medium' }},
    { label: 'label2', fieldName: 'col2ApiName',cellAttributes: { class: 'slds-text-heading_medium' }},
];

//Sample data
data = [
    {"Id": 1234, "col1ApiName": true, "col2ApiName": false},
    {"Id": 1234, "col1ApiName": false, "col2ApiName": true},
];

data.forEach(function(record){   
    let booleanColumns = ['col1ApiName', 'col2ApiName'];
    booleanColumns.forEach(x=>{
                                record[x] = record[x] == false ? '\u2610' : '\u2611';
                            })
});