lightning:datatable with wrapper object rows question

Question

I am trying to set a list of string values from a wrapper object dataClass

        @AuraEnabled public List<String> plannedDates;

Relevant column of the datatable I am using is below:

{label: 'Dates', fieldName: 'plannedDates', type: 'String'},

How can I set the property values to this column most efficiently? I tried putting the field name of the object but it didn't work, I think it's because the property is a list.

Use case is I need to show these formatted (formula field dates) as shown in the image, as a list of planned dates on a single row.

Any help is greatly appreciated!

Answer 1

Lightning-datatable does not support the type "List". What you can do is, instead of returning a string list, returns a string containing the dates separated by this operator "\n". You can use the String.join (iterableObj, separator) method for that in your wrapper class.

Here is the code:

In your Apex class:

@AuraEnabled public String plannedDatesStr; 
...
plannedDatesStr = String.join(plannedDates, '\n')

HTML

<template>
    <lightning-datatable key-field="id" data={records} columns={columns} hide-checkbox-column="true">
    </lightning-datatable>
</template>

JS

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {

  @track columns = [
        { label: 'Name', fieldName: 'name', type: 'text'},
        { label: 'Planned Dates', fieldName: 'plannedDatesStr', type: 'text' }
    ];

    @track records = [
        {Id:1, name: 'Accedo-10001681', plannedDatesStr: '14/12/18\n18/12/2018\n20/12/2108'},
        {Id:2, name: 'A Call To Action Medi..', plannedDates: '14/12/18\n18/12/2018\n20/12/2108'}
    ];

}

Here is a playground for you