[SalesForce] How to display a checkbox field using ligntning:datatable

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.

datatable 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.

Best Answer

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.

Related Topic