1

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.

  • 1
    I think currently datatable does not support checkboxes (It supports buttons). Please read more about datatables here particularly Formatting with Data Types Section – manjit5190 Feb 23 '18 at 8:31
2

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.

  • 1
    Note: starting with API 42 there is a type: 'boolean' support – zaitsman Jul 9 at 6:07
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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.