Allow Row Actions on Row Selection in Salesforce LWC Data Table

Allow Row Actions on Row Selection in Salesforce LWC Data Table

Row Actions can be allowed on Row Selection in Salesforce Lightning Web Component Lightning Data Table using Dynamic Row Actions.

Sample Code:

Apex Class:

public class AccountController {
 
    @AuraEnabled( cacheable = true )
    public static List< Account > fetchAccounts() {
     
        return [ 
            SELECT Id, Name, Industry
            FROM Account 
            LIMIT 10
        ];
         
    }
     
}

Lightning Web Component:

HTML:

<template>      
    <lightning-card title="Accounts" icon-name="custom:custom63">  
        <div class="slds-m-around_medium">  
            <template if:true={accounts}>      
                <lightning-datatable
                    key-field="Id"
                    data={accounts}
                    columns={columns}
                    onrowaction={handleRowAction}
                    onrowselection={handleRowSelection}>
                </lightning-datatable>  
            </template>      
            <template if:true={error}>  
                {error}>                  
            </template>  
        </div>  
    </lightning-card>
</template>

JavaScript:

import { LightningElement, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
import { NavigationMixin } from 'lightning/navigation';

export default class sampleLightningWebComponent extends NavigationMixin( LightningElement ) {
     
    accounts;
    error;
    selectedAccounts = [];
    columns = [   
        { label: 'Name', fieldName: 'Name' },
        { label: 'Industry', fieldName: 'Industry' },
        {
            type: 'action',
            typeAttributes: { rowActions: this.getRowActions.bind( this ) }
        }
    ];

    @wire( fetchAccounts )  
    wiredAccount( { error, data } ) {

        if ( data ) {

            this.accounts = data;
            this.error = undefined;

        } else if ( error ) {

            this.error = error;
            this.accounts = undefined;

        }

    }

    getRowActions( row, doneCallback ) {

        const actions = [];

        if ( this.selectedAccounts && this.selectedAccounts.includes( row[ 'Id' ] ) ) {
            actions.push( {
                'label': 'View',
                'name': 'view'
            } );
            actions.push( {
                'label': 'Edit',
                'name': 'edit'
            } );
        }

        setTimeout( () => {
            doneCallback( actions );
        }, 200 );

    }

    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:
        }

    }

    handleRowSelection( event ) {

        const selectedRows = event.detail.selectedRows;

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

            this.selectedAccounts.push( selectedRows[ i ].Id );

        }

    }

}

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply