Validation rule in lightning data table for Inline Editing

Question

How can we validate the entered draft values were correct or not before saving of inline datatable editing. For eg: I have built one inline editing datatable in lightning component on contacts object.Now when i edit the email field, and entered some invalid input it should throw an error like invalid email format.How can we achieve this using draft values inline editing.

Answer 1

The draft values saved in Inline edit are visible in the draftValues, on click of the save button you can validate the draft values and populate the errors attribute and that will automatically display the message to the user.

<lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            errors="{! v.errors }"
            draftValues="{! v.draftValues }"
            onsave="{! c.handleSaveEdition }"
        />

JS Save method:

handleSaveEdition  : function(component , event ,helper){


    let editedValues = cmp.get(`v.draftValues`);
    //Run your validate logic on edited values

    //if error display error on appropriate row

    cmp.set('v.errors', {
                rows: {
                    b: {
                        title: 'We found 2 errors.',
                        messages: [
                            'Enter a valid amount.',
                            'Verify the email address and try again.'
                        ],
                        fieldNames: ['amount', 'contact']
                    }
                },
                table: {
                    title: 'Your entry cannot be saved. Fix the errors and try again.',
                    messages: [
                        'Row 2 amount must be number',
                        'Row 2 email is invalid'
                    ]
                }
            });

}

Src: Lightning Datatable - Errors Attribute

Src: https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInlineEdit