LWC Data table returning blank rows

Question

I am trying to display opportunity share records in lwc data table, I am getting blank rows even though when i execute the query in the workbench, records are being returned with values.

Code below:

import {LightningElement, track, wire} from 'lwc';
import getOppdata from '@salesforce/apex/LWCExampleController.retriveOpportunities';
const columns = [
    {
        label: 'User',
        fieldName: 'UserOrGroupName',
        type: 'text',
    },
     {
        label: 'AccessLevel',
        fieldName: 'OpportunityAccessLevel',
        type: 'text'
    }
]
export default class OpptyAccountLWC extends LightningElement {
    @track data = [];
    @track columns = columns;

    @wire(getOppdata)
    opp({error, data}) {
        if(data) {

            let currentData = [];

            data.forEach((row) => {

                let rowData = {};

                rowData.User = row.UserOrGroup.Name;
                rowData.AccessLevel = row.OpportunityAccessLevel;
                //window.alert('########## '+row.UserOrGroup.Name );
                //console.log('########### '+ row.UserOrGroup.Name);

                currentData.push(rowData);
            });

            this.data = currentData;
        }
        else if(error) {
            window.console.log(error);
        }
    }
}

HTML:

<template>
    <lightning-card title="OpptyShareRecords">
        <lightning-datatable columns={columns} 
                            data={data} 
                            key-field="id"
                            hide-checkbox-column="true"
                            show-row-number-column="true"></lightning-datatable>
    </lightning-card>
</template>

Controller class:

public class LWCExampleController {    
    @AuraEnabled(cacheable=true)
    public static list<OpportunityShare> retriveOpportunities() {
        return [SELECT OpportunityAccessLevel,UserOrGroup.Name
                FROM OpportunityShare];
    }
}

Answer 1

Your fieldName properties are incorrect:

const columns = [
    {
        label: 'User',
        fieldName: 'User', // Was UserOrGroupName
        type: 'text',
    },
     {
        label: 'Access Level',
        fieldName: 'AccessLevel', // Was OpportunityAccessLevel
        type: 'text'
    }
]

The label is what's used for the header value, and fieldName is what's used for the data.

Also, you can use Array.prototype.map instead of pushing to an array:

this.data = data.map((row) => ({ User: row.UserOrGroup.Name, AccessLevel: row.OpportunityAccessLevel }));