When using @wire I can't get lightning-datatable to show the field value

Question

I am using @wire and getListUi to get a list view of accounts. I have a lightning-datatable where, for now, I just want to display the name of each account.

Relevant part of the template:

<template if:true={listView.data}>
    <lightning-datatable
        key-field="id"
        data={accounts}
        columns={columns}>
    </lightning-datatable>
</template>

Here is my JS code with @wire and getter for accounts:

import { LightningElement, wire } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

const columns = [
    {
        label: 'Account Name', 
        fieldName: 'Name',
        type: 'text'
    }
];
export default class AccountExample extends LightningElement {
    columns = columns;

    @wire(getListUi, {
        objectApiName: ACCOUNT_OBJECT,
        listViewId: '00B5I000001O1O3UAK',
        pageSize: 5
    })
    listView;

    get accounts() {
        console.log(JSON.stringify(this.listView.data.records.records, null, 4));
        return this.listView.data.records.records;
    }
}

In the console.log() statement I am seeing all of the values I expect. The lightning-datatable does appear to be populated but there is not text showing up. It's as if the text is the same colour as the datatable background.

I have seen a few questions on here with a similar problem however they are using uiRecordApi

Answer 1

If you look at the records data, the name is deep in the records returned by the wire method.

[{
    "apiName": "Account",
    "childRelationships": {},
    "id": "0012p00002NlX48AAF",
    "lastModifiedById": "0052p000009CZDSAA4",
    "lastModifiedDate": "2019-06-17T06:57:46.000Z",
    "recordTypeId": "012000000000000AAA",
    "recordTypeInfo": null,
    "systemModstamp": "2019-06-17T06:57:46.000Z",
    "fields": {
        "BillingState": {
            "displayValue": null,
            "value": null
        },
        "Name": {
            "displayValue": null,
            "value": "Burlington Textiles Corp of America"
        },

So the data is not directly compatible with the lightning-datatable, as the data table expects the name as a first level property.

You can use JavaScript map method to prepare appropriate array, changes to the accounts method as bellow gives me account names in the table.

get accounts() {
    console.log('accounts', JSON.stringify(this.listView.data.records.records, null, 4));

    const records = this.listView.data.records.records;

    // use map to prepare a new array of Accounts with Name property
    const accountsJson = records.map(record => {
        let newObject = {}
        newObject["Name"] = record.fields["Name"].value;
        return newObject;
    })
    return accountsJson;
}

---

Please note that you may have to do some exception handling while accessing records and the field values - record.fields["Name"].value.