field not appearing in lightning-datatable from query in controller

I am working on a datatable to create a user view and bring in permissionSetAssignments related to the user record page for each user by AssigneeId

I am able to get the table to populate as if there was data there with the correct assignments but the PermissionSet.Name field is appearing blank as if the data is there, but invisible from the query.

Controller, method in question: getPermissionSets

public class UserDataTableController {

    @AuraEnabled(cacheable=true)

    public static List<User> getUsers(string str){

        String name ='%'+str+'%';

        return [SELECT Id, Name, Email, Username, ATTUID__c, FederationIdentifier FROM User

        WHERE Name like :name LIMIT 20];

    }



    @AuraEnabled(cacheable=true)

    public static List<PermissionSetAssignment> getPermissionSets(String recordId){

        return [SELECT Id, PermissionSetId, PermissionSet.Name, PermissionSet.ProfileId, PermissionSet.Profile.Name, AssigneeId, Assignee.Name

        FROM PermissionSetAssignment WHERE AssigneeId = :recordId];

    }

}

.js

import {LightningElement, wire, track, api} from 'lwc';

// importing apex class methods

import getPermissionSets from '@salesforce/apex/UserDataTableController.getPermissionSets';



// datatable columns with row actions

const columns = [

    {
        label: 'Permission Set Name',
        fieldName: 'PermissionSet.Name'
    }

];

export default class GetPermSetDisplay extends LightningElement {

    @track data;
    @track columns = columns;
    @api recordId;

    // retrieving the data using wire service

    @wire(getPermissionSets, {recordId: '$recordId'})
    permissions(result) {
        if (result.data) {
            this.data = result.data;
            this.error = undefined;

        } else if (result.error) {
            this.error = result.error; 
            this.data = undefined;
        }
    }
}

HTML:

<template>

    <lightning-card title="Permission Set Assignments">

        <lightning-datatable data={data} columns={columns} key-field="Id">

        </lightning-datatable>

    </lightning-card>

</template>

Output:

Datatable displays simple fields directly accessible in the row of data you're passing it. It doesn't understand dots to go "up". You'll need to simplify, flatten the data

• you could create helper wrapper class in apex, populate bunch of string etc. fields in that and return that

• or do similar flattening in js as you process the wire's results

• or consider rewriting the query. Maybe something like

  select name 
  from permissionset 
  where id in (select permissionsetid 
     from PermissionSetAssignment 
     where assigneeid =...)