Append icon to column data

Question

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.

Answer 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}`);
}