lightning-tree-grid link to js function?

Question

I'm working on an lwc that has a lightning-tree-grid (nested datatable). I've made it so the name column is type:url with a link to the record. That works, but it's not really what I want to happen. I'd rather keep the user in my component rather than zipping off to the record page.

How can I make that link to a js function instead of '/'+record.Id?

Here's what I have so far...

import { LightningElement, track, api, wire } from 'lwc';
import getBlasts from '@salesforce/apex/Blast.getBlasts';

export default class BlastWaveTree extends LightningElement {
    @track buttonLabel = 'Show Waves';
    @track columns = [{
            label: 'Name',
            fieldName: 'linkName',
            type: 'url',
            typeAttributes: {label: { fieldName: 'name' }, target: '_blank'}
        },
        {
            type: 'text',
            fieldName: 'messageService',
            label: 'Message Service'
        },
        {
            type: 'text',
            fieldName: 'startDateTime',
            label: 'Start'
        },
        {
            type: 'text',
            fieldName: 'status',
            label: 'Status'
        }
    ];
    @api recordId;
    @track blastData;
    @track error;
    @wire(getBlasts, { CampaignId: '$recordId' })
        wireBlastData({
            error,
            data
        }) {
            if (data) {
                let tempjson = JSON.parse(JSON.stringify(data).split('waves').join('_children'));
                this.blastData = tempjson;
                this.blastData.forEach(function(record){
                    record.linkName = '/'+record.id;
                    record._children.forEach(function(wave){
                        wave.linkName = '/'+record.id;
                    })
                    console.log(JSON.stringify(record));
                });
        } else {
                this.error = error;
        }

    }
}

What I'm hoping to do is have the link call a new method in the js, passing along the recordId.

Any suggestions?

---

ADDITIONAL INFO: Thanks to the suggestion by @tsalb, I realized that specifying type:'url' is calling lightning-formatted-url. The docs on lightning-formatted-url include an example where it provides an onclick parameter that calls a function. Promising...

However, I can't seem to get it to work. I've tried adding the onclick parameter both inside and outside the typeAttributes, but either place, I get a linting error that handleClick is not defined. It will push to the scratch org, but when I try to load it, it gives me an afterrender error that handleClick is not defined.

    @track columns = [{
            label: 'Name',
            fieldName: 'linkName',
            type: 'url',
            onclick:{handleClick},
            typeAttributes: {label:{fieldName:'name'} }
        },
        {
            type: 'text',
            fieldName: 'messageService',
            label: 'Message Service'
        },
        {
            type: 'text',
            fieldName: 'startDateTime',
            label: 'Start'
        },
        {
            type: 'text',
            fieldName: 'status',
            label: 'Status'
        }
    ];


    handleClick(e){
        e.preventDefault();
        //process the click
    }

Also tried putting it inside the typeAttributes:

@track columns = [{
                label: 'Name',
                fieldName: 'linkName',
                type: 'url',
                typeAttributes: {label:{fieldName:'name'}, onclick:{handleClick},}
            },

Just noticed in the docs for lightning-tree-grid, Formatting with Datatypes section, that the typeAttributes supported for url include label, target, and tooltip. Not onclick. Makes me think I need another approach.

Answer 1

Use this:

wave.linkName = '/'+wave.id; 

Instead of:

wave.linkName='/' +record.id