How to display errors in Lightning Datatable?

How to display errors in Lightning Datatable?
How to display errors in Lightning Datatable?

In my previous post, I have told you the Usage of Lightning Record Edit Form in Lightning Web Components. Today, I will tell you how you can display errors in the Lightning Datatable.

Firstly, let me know you that there is an error attribute in the Lightning Datatable which you can use to display the errors. You simply need to provide the appropriate error data to the error attribute.

There is two important things that you need to consider:

  • If you want to display error to the cell of the table then you must make the Column editable.
  • If you don’t want to make the column editable then, you must set the showRowNumberColumn attribute of the Lightning Datatable to True.

The attribute showRowNumberColumn must be set to true, and if you make any column editable then showRowNumberColumn is automatically set to true.

Now, let us create a basic Lightning Datatable:

<aura:component>
    <aura:attribute name="data" type="Object" description ="has Column data that lightning table will display"/>
    <aura:attribute name="columnsData" type="List" description ="has Column definition"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:datatable keyField="id"
                         data="{! v.data }"
                         columns="{! v.columnsData }"
                         showRowNumberColumn='true'/>
</aura:component>
({
    init: function (cmp, event, helper) {
        cmp.set('v.columnsData', [
            { label: 'Name', fieldName: 'Name', type: 'text'},
            {
                label: 'Confidence',
                fieldName: 'confidence',
                type: 'percent', 
                cellAttributes: { iconName: { fieldName: 'trendIcon' },
                                 iconPosition: 'right' }
            },
            {
                label: 'Amount',
                fieldName: 'amount',
                type: 'currency',
                typeAttributes: { currencyCode: 'EUR'}
                , editable:true
            },
            { label: 'Contact Email', fieldName: 'Email', type: 'email', editable:true},
            { label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
        ]);
        
        cmp.set('v.data', [{
                                id: 'OPP123',
                                Name: 'JohnWeb',
                                confidence: 0.2,
                                amount: 25000,
                                Email: 'johndoe@JohnWeb.com',
                                phone: '2352235235',
                                trendIcon: 'utility:down'
                            },
                            {
                                id: 'OPP456',
                                Name: 'JaneWeb',
                                confidence: 0.78,
                                amount: 740000,
                                Email: 'JaneWeb@JaneWeb.com',
                                phone: '2352235235',
                                trendIcon: 'utility:up'
                            }]);
    }
})

At this point, you will have a simple Datatable, which will be showing you 2 records in it. Now, we will work to implement the functionality to display Errors.

First of all, define an error attribute in the Component,

<aura:attribute name="errors" type="Object"/>

You can define a button which will trigger an Error on the Datatable.

<lightning:button label="Display Error" onclick="{!c.displayError}"/>

Also, you need to modify your datatable code to have an error attribute as follows:

<lightning:datatable keyField="id"
                         data="{! v.data }"
                         columns="{! v.columnsData }"
                         errors="{!v.errors}"
                         showRowNumberColumn='true'/>

Now, create a function in the Component Controller, which will display the error in the lightning datatable rows:

displayError: function (cmp, event, helper) {
        var errors = cmp.get("v.errors");
        if(errors==undefined || errors==null ){
            errors = { rows: {}, table: {} }
        } 
        errors.rows['OPP123'] = { title: 'Testing Error1', 
                                 messages: ['Testing Error amount','Testing Error Email'],
                                 fieldNames: ['amount', 'Email']};
        errors.rows['OPP456'] = { title: 'Testing Error2', 
                                 messages: ['Testing Error amount1','Testing Error Email1'],
                                 fieldNames: ['amount', 'Email']};
        errors.table.title = "We found 2 error(s). ...";
        errors.table.messages = ['Testing Error amount','Testing Error Email'];
        cmp.set("v.errors", errors);
    }
Remove Error in Lightning Datatable

Add a button to remove all the errors that were displayed.

<lightning:button label="Remove error" onclick="{!c.removeError}"/>

Create a controller function to remove the errors

removeError : function (cmp, event, helper) {
     var errors = cmp.get("v.errors");
     if(errors==undefined || errors==null ){
         errors = { rows: {}, table: {} }
     } 
     errors.rows['OPP123'] = {  };
     errors.rows['OPP456'] = { };
     errors.table.title = " ";
     errors.table.messages = [];
     cmp.set("v.errors", errors);
 }

Finally, you should have something like below

Display Error in Lightning Datatable
Display Error in Datatable

MoreoverIf you have any suggestions or issue with the post, you can reply in the comment box.

Support: For any further Salesforce support, Chat with us we will be happy to assist you.

Popular Post:

Reference: Salesforce Component Library

Parul Singh

I’m a Salesforce Certified Service Cloud Consultant, Certified Administrator & Certified Platform Developer. I have 2 years of experience, currently working on Field Service Lightning, Lightning Flows and Learning Lightning Web Component. I was featured in the top Salesforce Bloggers of 2018 by www.forcetalks.com

You may also like...

Want to know more about Salesforce Devlopments?

We keep your data private and share your data only with third parties that make this service possible. Read our Privacy Policy.

Holler Box