0

I am working on making a lightning-datatable where one of the columns is a link from a button-icon. I am having trouble appending the corresponding link to each row to a lightning-button-icon.

export default class ListView extends LightningElement {

    @track clientList;
    @track error;
    @track accountNumber;
    @track clientUrl;

    @track columns = [
        {
            label: 'CLIENT',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Name' }, 
            target: '_self'},
            sortable: false
        },
        { 
            label: 'LINK', 
            fieldName: 'clientUrl', 
            type: 'url', 
            sortable: false, 
            cellAttributes: { iconName: 'utility:new_window', alignment: 'center'},
            target: '_self'
        }
    ];

    @wire(getClient)
    getEvents(response) {      
        let data = response && response.data;   
        if (data) {
            let nameUrl;
            let customerId;
            let clientUrl;
            this.clientList = data.map(row => { 
                nameUrl = `/${row.Id}`;
                customerId = row.Cust_Id__c;
                getClientUrl(customerId , this.accountNumber)
                .then(result => {
                    clientUrl = `/${result}`;
                });
                return {...row , nameUrl, clientUrl}
            })
            this.error = undefined;
        } 
    }

   handleClick(event) {
        let rowId = event.target.getAttribute('data-id');
        this.data = data.map(row => {
            rowId = row.Id;
            if (rowId === rowKey) {
                this.clientUrl = event.target.value;
            } 
        });
        event.target.iconName = event.target.iconName === "utility:new_window";
    }


In the result clientUrl creates the link that I need to append to the lightning-button-icon.

<template if:true={clientList}>
                <div class="slds-table slds-table_fixed-layout slds-table_header-fixed" >
                <lightning-datatable 
                    data={clientList}
                    columns={columns} 
                    key-field="Id" 
                    hide-checkbox-column="true" 
                    resize-column-disabled= "true">
                        <lightning-button-icon
                            class="slds-p-left_xxx-small slds-p-bottom_x-small"
                            data-id={Id}
                            icon-name="utility:new_window"
                            variant="bare"
                            onclick={handleClick}
                            alternative-text="View Client Url">
                        </lightning-button-icon>
                </lightning-datatable>                
                </div>
            </template>

What am doing wrong or missing on my handleClick(event) that isn't triggering the button at all.

1

Seems like you are trying to add an icon to a url column type. Try changing the type to button or to button-icon and then use typeAttributes. If you wish to style it as a link simply use variant attribute as base

example.

   @track columns = [ ... , 
      { 
        label: 'LINK', 
        fieldName: 'clientUrl', 
        type: 'button', 
        sortable: false, 
        cellAttributes: { alignment: 'center'},
        typeAttributes: {
            label : {fieldName:'clientUrl'},
            iconName : 'utility:new_window',
            iconPosition : 'left',
            name : 'LINK',
            title : 'will navigate',
            variant : 'base'

         }
    }]

Handle row action Event

HTML

 <lightning-datatable 
            data={clientList}
            columns={columns} 
            key-field="Id" 
            hide-checkbox-column="true" 
            resize-column-disabled= "true"
            onrowaction={handleRowAction} >

JS

handleRowAction(event){
    // getting your values
    const actionName = event.detail.action.name;
    const row = event.detail.row;
    // log and do something
    console.log(`your actionName ${actionName}`);
}
3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.