Salesforce Lightning Web Component lightning datatable with top level action

Salesforce Lightning Web Component lightning datatable with top level action

We can use lightnging-card and lightning/navigation to show New button as top level action along with lightning-datatable.

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="standard:account">  
        <div slot="actions">
            <lightning-button-menu 
                alternative-text="Show menu"
                onselect={handleOnselect}>
                <lightning-menu-item 
                    value="New" 
                    label="New">
                </lightning-menu-item>
            </lightning-button-menu>
        </div>
        <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>  
    </lightning-card>
</template>
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 );

        }

    }

    handleOnselect( event ) {
        
        let selectedAction = event.detail.value;

        if ( selectedAction == 'New' ) {

            console.log( 'Inside Account Creation' );
            this[ NavigationMixin.Navigate ] ( {
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'Account',
                    actionName: 'new'
                }
            } );

        }

    }

}

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