lightning-datatableで参照関係のリンクをつける

ひとまず下書き的に書いておきます

AccountListWithLinks.html

<template>
  <lightning-card title="Account List with Links" icon-name="custom:custom63">
      <lightning-datatable
          key-field="Id"
          data={data}
          columns={columns}
          hide-checkbox-column
      ></lightning-datatable>
  </lightning-card>
</template>

AccountListWithLinks.js

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

const COLUMNS = [
    { label: 'Account Name', fieldName: 'Name' },
    {
        label: 'Owner Name',
        fieldName: 'OwnerLink',
        type: 'url',
        typeAttributes: {
            label: { fieldName: 'OwnerName' }, 
            target: '_blank'
        }
    },
    { label: 'Industry', fieldName: 'Industry' },
];

export default class AccountListWithLinks extends LightningElement {
    data = [];
    columns = COLUMNS;

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.data = data.map((record) => {
                const ownerId = record.OwnerId;
                const ownerName = record.Owner.Name

                return {
                    ...record,
                    OwnerLink: `/lightning/r/User/${ownerId}/view`, 
                    OwnerName: ownerName, 
                };
            });
        } else if (error) {
            console.error(error);
        }
    }
}

AccountController.cls

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [
            SELECT Id, Name, Industry, OwnerId, Owner.Name
            FROM Account
            LIMIT 10
        ];
    }
}

実行結果