+ Start a Discussion
BobPBobP 

Checkbox in lightning component strange output on list

I have a lightning component that searches for accounts and on my list i have a checkbox with a strange output. This should just show nothing for false and a checkmark for true.  I was wondering if anyone had any idea how to fix this issue.

User-added image
BobPBobP
I was able to fix the field type in my controller to checkbox but the ouput how either true of false and not the checkmark
User-added image
 this is my controller 
({
    onAccountsLoaded: function( component, event, helper ) {
        var cols = [
            {
                'label': 'Name',
                'fieldName': 'Name',
                'type': 'text'
            },
            {
                'label': 'External ID',
                'fieldName': 'External_ID__c',
                'type': 'text'
            },
            {
                'label': 'Utility Number',
                'fieldName': 'Utility_Number__c',
                'type': 'text'
            },
            {
                'label': 'Active Utility Customer?',
                'fieldName': 'Active_Utility_Customer__c',
                'type': 'checkbox'
                                
            },
            {
                'label': 'Action',
                'type': 'button',
                'typeAttributes': {
                    'label': 'View details',
                    'name': 'view_details'
                }
            }
        ];
        component.set( 'v.cols', cols );
        component.set( 'v.rows', event.getParam( 'accounts' ) );
    },
    onRowAction: function( component, event, helper ) {
        var action = event.getParam( 'action' );
        var row = event.getParam( 'row' );
        if ( action.name == 'view_details' ) {
            var navigation = component.find( 'navigation' );
            navigation.navigate({
                'type': 'standard__recordPage',
                'attributes': {
                    'objectApiName': 'Account',
                    'recordId': row.Id,
                    'actionName': 'view'
                }
            });
        }
    }
})