2

In my data table i have field Percentage expecting this should be a hyperlink, On click of the link will open the model popup to change the percentage value.

column value should be in hyperlink, Tried adding type=URL It's appending the http://

HTML

<template>
    <lightning-datatable
            data={data}
            columns={columns}
            key-field="id">
    </lightning-datatable>
</template>

JS:

import { LightningElement } from 'lwc';
const columns = [
     {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
     {label: 'Percentage', fieldName: 'confidence'},
     {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
     {label: 'Contact Email', fieldName: 'contact', type: 'email'},
     {label: 'Contact Phone', fieldName: 'phone', type: 'phone'},
];
    const data = [{
                    id: 'a',
                    opportunityName: 'Cloudhub',
                    confidence: 0.2,
                    amount: 25000,
                    contact: 'jrogers@cloudhub.com',
                    phone: '2352235235',
                    trendIcon: 'utility:down'
                },
                {
                    id: 'b',
                    opportunityName: 'Quip',
                    confidence: 0.78,
                    amount: 740000,
                    contact: 'quipy@quip.com',
                    phone: '2352235235',
                    trendIcon: 'utility:up'
                }];
export default class DatatableExample extends LightningElement {
    data = data;
    columns = columns;

    getSelectedName(event) {
        const selectedRows = event.detail.selectedRows;
        // Display that fieldName of the selected rows
        for (let i = 0; i < selectedRows.length; i++){
            alert("You selected: " + selectedRows[i].opportunityName);
        }
    }
}
2

Use a column with a type button, with variant = base so it looks like a link. Also, provide an action name(myActionName) to identify that the button is clicked.

{
    label: "Percentage",
    type: "button",
    typeAttributes: { label: { fieldName: "confidence" }, name: "myActionName", variant: "base" }
}

Handle the row action like below.

handleRowAction(event) {
    if (event.detail.action.name === "myActionName") {
        // open a modal.
    }
}

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.