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:

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