Row Action In LWC Datatable

by Rijwan Mohmmed

Here we discuss Row Action in LWC Datatable. We use the row action in the show or edit records or perform a different types of action.

Apex Class :

public with sharing class DataController {
    @AuraEnabled (cacheable=true)
    public static List<Account> retrieveAccounts(){
        return [SELECT Id, Name, Type, BillingCountry
                FROM Account
                LIMIT 2000];
    }
}

NavigationLWCTechdicer.Html :

<template>
    <lightning-card title="Account List" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-p-horizontal_medium">Display records With Row Action </p>
            <br></br>
            <div style="height: 180px;">
                <lightning-datatable 
                    key-field="id"
                    data={items}
                    columns={columns}
                    hide-checkbox-column="true"
                    show-row-number-column="true"
                    onrowaction={handleRowAction}
                >
                </lightning-datatable>
            </div>
        </div>
    </lightning-card>
</template>

NavigationLWCTechdicer.Js :

import { LightningElement, wire } from 'lwc';
import retrieveAccounts from '@salesforce/apex/DataController.retrieveAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
const actions = [
    { label: 'View', name: 'view' },
    { label: 'Edit', name: 'edit' },
];

const columns = [
    { label: 'Id', fieldName: 'Id' }, 
    { label: 'Name', fieldName: 'Name', sortable: true  },
    { label: 'Type', fieldName: 'Type', sortable: true  },
    { label: 'BillingCountry', fieldName: 'BillingCountry', sortable: true  },  
    {   label: 'Action',
        type: 'action',
        initialWidth:'50px',
        typeAttributes: { rowActions: actions },
    },     
];

export default class NavigationLWCTechdicer extends NavigationMixin(LightningElement)  {
    columns = columns;
    items;
    error;

    @wire(retrieveAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.items = data;
            this.columns = columns;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.items = undefined;
            this.showToast(this.error, 'Error', 'Error'); //show toast for error
        }
    }

    handleRowAction( event ) {

        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch ( actionName ) {
            case 'view':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                });
                break;
            case 'edit':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        objectApiName: 'Account',
                        actionName: 'edit'
                    }
                });
                break;
            default:
        }
    }

    showToast(message, variant, title) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: 'dismissable'
        });
        this.dispatchEvent(event);
    }

    handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch (actionName) {
            case 'view':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                });
                break;
            case 'edit':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        objectApiName: 'Account',
                        actionName: 'edit'
                    }
                });
                break;
            default:
        }

    }
}

NavigationLWCTechdicer.js-meta.xml :

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__Tab</target>
	</targets>
</LightningComponentBundle>
What’s your Reaction?
+1
6
+1
6
+1
2
+1
4
+1
1
+1
2

You may also like

13 comments

Mohsina June 20, 2023 - 11:59 am

const actions = [
{ label: ‘View’, name: ‘view’ },
{ label: ‘Edit’, name: ‘edit’ },
];
Here can we add help text to label

Reply
Rijwan Mohmmed June 20, 2023 - 3:55 pm

Hi you can use below link for this
https://techdicer.com/custom-type-in-datatable-in-lwc/

Reply
Rijwan Mohmmed August 22, 2023 - 12:28 pm

Yes

Reply
Anjani August 22, 2023 - 12:14 pm

Will this code work for Community portal as well?

Reply
Rijwan Mohmmed August 22, 2023 - 12:28 pm

Yes, It will work make sure portal user have proper access

Reply
Anjani August 23, 2023 - 7:13 am

The code is working properly in normal sandbox org, but when I add this component in Community Portal, The view button is not redirecting to the Record Detail page. Can you please let me know what needs to be done.

Reply
Rijwan Mohmmed August 23, 2023 - 7:18 am

Hi Anjani, Can you please share your JS code

Reply
Anjani August 23, 2023 - 7:31 am

import { LightningElement, wire } from ‘lwc’;
import retrieveQuotes from ‘@salesforce/apex/SNP_GVC_QuoteListViewHelper.getQuotes’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
import { NavigationMixin } from ‘lightning/navigation’;
const actions = [
{ label: ‘View’, name: ‘view’ },
{ label: ‘Edit’, name: ‘edit’ },
];

const columns = [

{ label: ‘Name’, fieldName: ‘Name’, sortable: true },
{ label: ‘Status’, fieldName: ‘Status’, sortable: true },
{ label: ‘ExpirationDate’, fieldName: ‘ExpirationDate’, sortable: true },
{ label: ‘Action’,
type: ‘action’,
initialWidth:’50px’,
typeAttributes: { rowActions: actions },
},
];

export default class NavigationLWCTechdicer extends NavigationMixin(LightningElement) {
columns = columns;
items;
error;

@wire(retrieveQuotes)
wiredQuotes({ error, data }) {
if (data) {
this.items = data;
this.columns = columns;
this.error = undefined;
} else if (error) {
this.error = error;
this.items = undefined;
this.showToast(this.error, ‘Error’, ‘Error’); //show toast for error
}
}

handleRowAction( event ) {

const actionName = event.detail.action.name;
const row = event.detail.row;
switch ( actionName ) {
case ‘view’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
objectApiName: ‘Quote’,
actionName: ‘view’
}
});
break;
case ‘edit’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
objectApiName: ‘Quote’,
actionName: ‘edit’
}
});
break;
default:
}
}

showToast(message, variant, title) {
const event = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: ‘dismissable’
});
this.dispatchEvent(event);
}

handleRowAction(event) {
const actionName = event.detail.action.name;
const row = event.detail.row;
switch (actionName) {
case ‘view’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
actionName: ‘view’
}
});
break;
case ‘edit’:
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: row.Id,
objectApiName: ‘Quote’,
actionName: ‘edit’
}
});
break;
default:
}

}
}

I have tried it in different ways but only the edit action takes the page to record detail, but the view option is taking it to an error page in the Community Portal, not sure whether it is issue in the portal.
Thank you in advance.

Reply
Rijwan Mohmmed August 23, 2023 - 1:28 pm

Remove objectApiName: ‘Quote’, from this

Reply
Anjani August 23, 2023 - 11:46 am

Thank you

Reply
Vinodh December 19, 2023 - 10:20 pm

I want to enable or disable based on a boolean. How to do that.

Reply
Vinodh December 19, 2023 - 10:21 pm

I want to enable or disable ROW Actions based on a boolean. How to do that.

Reply
Rijwan Mohmmed December 20, 2023 - 3:58 am

You need to do custom Type datatable
https://techdicer.com/custom-type-in-datatable-in-lwc/

Reply

Leave a Comment