[SalesForce] How to navigate to records using Datatable in Lightning Web Components

I am new to Lightning Web Components. I have a wrapper class that returns Accounts, Leads, and Contacts. I display those using lightning data table in my LWC. I want to navigate to a particular record by clicking on it. I used onRowAction attribute of datatable and NavigationMixin for navigation but it gives me page doesn't exist error. Please guide. Also, can I use name in the form of hyperlink for navigation?

Lightning Web Component
Lightning Data Table

.

Error
Error

.

Javascript

import { LightningElement,api,track, wire } from 'lwc';
import getWrapperLis from '@salesforce/apex/WrapperClass.getWrapperList';
import { NavigationMixin } from 'lightning/navigation'; ///Navigation

const actions = [
    { label: 'View', name: 'show_details' },
];

const columns = [
    {
        type: 'action',
        typeAttributes: {
            rowActions: actions,
        }
    },
    { label: 'Label', fieldName: 'name', type:'text' },
    { label: 'Email', fieldName: 'email', type: 'email' , sortable:'true' },
    { label: 'Phone', fieldName: 'phone', type: 'phone', sortable:'true'  },
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' , editable:'true' },
];

export default class WrapperClassTestNavigation extends NavigationMixin(LightningElement) {
    @api recordId;
    @track columns = columns;

    @wire(getWrapperLis,{lead:'$recordId'}) wrappers;

    navigateToRecordViewPage(event) {
        const row = event.detail.row;

        // View a custom object record.
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: row.Id,
                //objectApiName: 'Lead', // objectApiName is optional
                actionName: 'view'
            }
        });
    }

}

HTML

<template>
    <lightning-card title="LWC Wrapper Component" icon-name="standard:contact">
        <div >
            <lightning-datatable
                    key-field="Id"
                    data={wrappers.data}
                    columns={columns}
                    hide-checkbox-column="true"
                    onrowaction={navigateToRecordViewPage}>
            </lightning-datatable>
        </div>    
    </lightning-card>
</template>

WrapperClass

public with sharing class WrapperClass {

    @AuraEnabled(cacheable=true)
    public static List<wrapp> getWrapperList(String lead) {
        List<wrapp> wrapperList = new List<wrapp>();
            for(Lead led : [SELECT Id, Name FROM Lead Where Id=:lead]){
                wrapp obj = new wrapp(led);
                wrapperList.add(obj);
            }
            for(Account acc : [SELECT Id, Name, Master_Customer_ID__c FROM Account Where Name LIKE:'%ac%' LIMIT 5]){
                wrapp obj = new wrapp(acc);
                wrapperList.add(obj);
            }
            for(Contact con : [SELECT Id, Name, Email, Phone FROM Contact Where Name LIKE:'%adam%' LIMIT 5]){
                wrapp obj = new wrapp(con);
                wrapperList.add(obj);
            }

        return wrapperList;
    }

    public class wrapp{
        @AuraEnabled
        public String id{get;set;}
        @AuraEnabled
        public String name{get;set;}
        @AuraEnabled
        public String phone{get;set;}
        @AuraEnabled
        public String email{get;set;}
        @AuraEnabled
        public String mdm{get;set;}

        public wrapp(Account acct){
            id = acct.Id;
            name = acct.Name;   
            mdm = acct.Master_Customer_ID__c;     
        }
        public wrapp(Contact cont){
            id = cont.Id;    
            name = cont.Name; 
            phone = cont.Phone;   
            email = cont.email;  
        }
        public wrapp(Lead lead){
            id = lead.Id;    
            name = lead.Name; 
        }
    }
}

Best Answer

I changed the javascript function to following and it worked:

navigateToRecordViewPage(event) {
        this.record = event.detail.row;
        // View a custom object record.
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.record.id,
                //objectApiName: 'Lead', // objectApiName is optional
                actionName: 'view'
            }
        });
    }