+ Start a Discussion
Shavi DabgotraShavi Dabgotra 

I want a drop down menu by using button menu in data table using Lightning Web component.

Hi all,
I want a drop down menu by using lightning-button-menu in  data table using Lightning Web component.
I have created the Data table and I want a drop down menu with the different values. 
Data table is as follows:

HTML:
<template>
    <lightning-card title='Data table'>
       
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                >
        </lightning-datatable>
        <div>{error}</div>
    </div>
</lightning-card>    
</template>
JS:
import { LightningElement,track,api,wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
const columns = [
    { label: 'Account name',
    fieldName: 'Name',
    type: 'text',
    sortable: true
    },
    {
        label: 'Type',
        fieldName: 'Type',
        type: 'text',
        sortable: true
    },
        
];
export default class Test extends LightningElement {
    data = [];
    columns = columns;
    wiredActivities ;
    records = '';
    error;
    @wire(getAccountList,{
        }
    )
    wiredCases(value){
        this.wiredActivities = value;
        const { data, error } = value;
    
    if(data){
        let dataEditing = JSON.parse(JSON.stringify(data));
        this.records = dataEditing.length;
        this.data = dataEditing;
        
    }else if(error){
        this.error = error;
    }
    
}
}
Apex class: 
public with sharing class AccountHelper {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type, Rating,
                Phone, Website, AnnualRevenue
            FROM Account LIMIT 10];
    }
}

I want a drop down menu in every row and that should be clickable.
Thank you in advance!

Nisar AhmadNisar Ahmad

Hi Shavi

try this: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example

Example dropdown in "Data Table with Row Actions"

 

Shavi DabgotraShavi Dabgotra

Hi Nisar,

Thank you so much for this!

Can you please help me how can provide link in the action?
For Example: There are 2 items as drop down : Download and  Open

Onclick of Open - http://www.google.com to be opened.

How can I acheive this? 
Thank you in Advance!

Diptangsu Sasmal 1Diptangsu Sasmal 1
Hi Shavi,
Please try to use [NavigationMixin.GenerateUrl](pageReference) from lightning/navigation module. Check here for more: https://developer.salesforce.com/docs/component-library/bundle/lightning-navigation/documentation