LWC data table number filed in Hyper Link

Question

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

Answer 1

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.
    }
}