Displaying error with Lightning data table in LWC

• While displaying errors in lightning data table two things you need to consider

• Make the column editable in lightning data table

• If we don’t make the column editable then, you must set the ‘showRowNumberColumn’ attribute of the lightning data table to true

Data Table in lwc

<lightning-datatable

key-field="id"

data={data}

columns={columns}

show-row-number-column='true'

>

</lightning-datatable>

To show errors add the error attribute as below

<lightning-datatable

key-field="id"

data={data}

columns={columns}

show-row-number-column='true'

errors = {error}

>

</lightning-datatable>

Example :

Apex Class - AccHelper

public without sharing class AccHelper {

@AuraEnabled

public static List<Account> getAccList()

{

return [Select Id, Name, AccountNumber,BillingCity,BillingCountry,BillingState, (select Id, Name from contacts) from Account where Name='GenePoint'];

}

}

Html :

<template>

<lightning-button variant="brand" label="show" title="show" onclick={showError}></lightning-button>

<div style="height: 300px;">

<lightning-datatable

key-field="id"

data={data}

columns={columns}

show-row-number-column='true'

errors = {error}

>

</lightning-datatable>

</div>

</template>

Js:

import { LightningElement } from 'lwc';

import getAccountList from '@salesforce/apex/AccHelper.getAccList';

const columns = [

{ label: 'ACCOUNT NUMBER', fieldName: 'AccountNumber' },

{ label: 'BILLING CITY', fieldName: 'BillingCity' },

{ label: 'BILLING COUNTRY', fieldName: 'BillingCountry'},

{ label: 'BILLING STATE', fieldName: 'BillingState'},

{ label: 'KEY CITY', fieldName: 'keyCity'}

];

export default class AccPage extends LightningElement {

data = [];

columns = columns;

error;

connectedCallback()

{

getAccountList().then(response => {

console.log('resp', response);

let updatedResp = [];

for(let i=0; i< response.length; i++)

{

response[i]['keyCity']='X'

//updatedResp.push(response[i]);

}

//console.log('updatedResp', updatedResp);

this.data = response;

}).catch(error => {});

}

//design the error structure in the following way based on your requirement

showError(event)

{

this.error = {

rows: {

'0015i0000083J2sAAE': {

title: 'We found 2 errors.',

messages: [

'City is not valid.',

'Country is not valid'

],

fieldNames: ['BillingCity', 'BillingCountry']

}

},

table: {

title: 'Fix the errors',

messages: [

'Row 1 amount must be number',

'Row 2 email is invalid'

]

}

};

}

}

You can also design error structure dynamically using the below format

let errors = {};

errors.rows = {};

errors.rows['0015i0000083J2sAAE'] = { title: 'We found an error', messages: [ 'Enter a valid amount.' ], fields: [ 'BillingCity'] };

this.error = errors;