Q: Lightning Datatable record opens blank URL I have created a LWC component in which some details from Opportunity object are to be displayed. When user clicks on a Name in the Name column, I want to relevant record page to be opened. Instead, a different URL gets opened. How can I fix this?

Img 1:https://imgur.com/Ch4WJuB
Img 2:https://imgur.com/DumdhlF
JS
import { LightningElement, api, wire } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
import NAME_FIELD from '@salesforce/schema/Opportunity.Name';
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';

const COLUMNS = [
  {label: 'Name', fieldName: NAME_FIELD.fieldApiName, type: 'url',sortable: true,typeAttributes: {label: { fieldName: NAME_FIELD.fieldApiName}}},
    { label: 'Amount', fieldName: AMOUNT_FIELD.fieldApiName, type: 'currency' },
    {label: ' ', fieldName:'Button', type: 'button', typeAttributes : {label:'Approve', variant:'brand'}}
];

export default class MiscRecord extends LightningElement {
    @api recordId;
    columns = COLUMNS;
    @wire(getOpportunities, {recordId: '$recordId'})
    opportunities;

 handleRowAction(event) {//Later}

}


A: I Hope this will work for you.
import { LightningElement, api, wire } from 'lwc';
    import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
    import NAME_FIELD from '@salesforce/schema/Opportunity.Name';
    import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';
    import { NavigationMixin } from 'lightning/navigation';

const COLUMNS = [
    {
      label: 'Name', fieldName: NAME_FIELD.fieldApiName, type: "button",sortable: true, typeAttributes: {
        label: { fieldName: NAME_FIELD.fieldApiName },
        name: NAME_FIELD.fieldApiName,
        disabled: false,
        variant: 'base',
        value: NAME_FIELD.fieldApiName,
      }
    },
    { label: 'Amount', fieldName: AMOUNT_FIELD.fieldApiName, type: 'currency' },
    {label: ' ', fieldName:'Button', type: 'button', typeAttributes : {label:'Approve', variant:'brand'}}
];

export default class MiscRecord extends NavigationMixin(LightningElement) {
    @api recordId;
    columns = COLUMNS;
    @wire(getOpportunities, {recordId: '$recordId'})
    opportunities;

 handleRowAction(event) {
    if (event.detail.action.name ==  NAME_FIELD.fieldApiName) {
      this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
          recordId: event.detail.row.Id, //console the id and put it here
          objectApiName: 'Opportunity',
          actionName: 'view'
        }
      });
    }
 }

}


A: If you want to show a label (i.e. opportunity name) in a url column, instead of showing the full URL, you should provide it via typeAttributes property as you did.
The issue is that the value of the main fieldName should be a field (i.e. recordURL) that holds a valid url (absolute or relative):
{label: 'Name', fieldName: 'recordURL', type: 'url', sortable: true, typeAttributes: {label: { fieldName: NAME_FIELD.fieldApiName}}},

Since data retrieved via @wire is immutable, you have to clone each record in order to be able to add this new field. You could leverage Array.map() and destructuring assignment:
opportunities;

@wire(getOpportunities, {recordId: '$recordId'})
fetchOpportunities({ data, error }) {
    if (data) {
        this.opportunities = data.map((oppty) => {
            return {
                ...oppty,
                recordURL: '/lightning/r/' + oppty.Id + '/view'
            };
        });
    } else if (error) {
        // do something
    }
}

Then in HTML you have to check just for opportunities, instead of checking for opportunities.data:
<template>
    <lightning-card>
        <template if:true={opportunities}>
            <lightning-datatable
                key-field="Id"
                data={opportunities}
                columns={columns}
                onrowaction={handleRowAction}
                hide-checkbox-column="true"
                show-row-number-column="true"
            >
           </lightning-datatable>
       </template>
    </lightning-card>
</template>

