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