Cfxtrjtrk

Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.

That being said, I have the following specification for a datatable that receives pricebook entries:

const columns = [

    { label: 'Name', fieldName: 'Product2.Name' }

]

The names do not display on the component, but if I use a forEach to list the data retrieved by the component, I get the products names, like in:

connectedCallback() {

    getProducts({ pricebookId: this.pricebookId, countLimit: 4 })

        .then(result => {

            this.products = result

            this.products.forEach(p => {

                console.log(p.Product2) // Proxy {} object is displayed

                console.log(p.Product2.Name) // The name is displayed

            });

            this.tableIsLoading = false

        })

        .catch(error => {

            console.error(error)

        })

}

If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?

For example, should I iterate the result data and add a productName attribute to the elements, and then set 'productName' as the attribute on the column variable?

Edit: just noticed that you can't iterate the data list and create a new productName property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'.

The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.

Consider this data:

[{ 'Product.Name': 'Hello' }, 'Product': { 'Name': 'World' }}]

If you had data like this, the output in lightning:datatable would be "Hello", not "World".

Here's a copy-paste example for you:

<aura:application extends="force:slds">

    <!-- attributes -->

    <aura:attribute name="data" type="List" default="[{'Product.Name':'Hello', 'Product':{'Name':'World'},'id':'5'}]"/>

    <aura:attribute name="columns" type="List" default="[{ 'label':'Product Name','fieldName':'Product.Name'}]" />



    <!-- the container element determine the height of the datatable -->

    <div style="height: 300px">

        <lightning:datatable

                             keyField="id"

                             data="{! v.data }"

                             columns="{! v.columns }"

                             hideCheckboxColumn="true"/>

    </div>



</aura:application>

This is true for both the Aura and Web component versions.

So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:

this.products = result.map(

  record => Object.assign(

    { "Product2.Name": record.Product2.Name },

    record

  )

);