Edit 4
I'm using a lightning-datatable
implementation where I'm populating the data and columns from a wrapper Apex object properties.
Parent component call server-side method, that returns a List of my wrapper object:
Apex Wrapper Object:
public class ColumnAndDataWrapper {
@AuraEnabled
public List<SObject> recordList;
@AuraEnabled
public List<Column> columns;
@AuraEnabled
public String objectPluralLabel;
@AuraEnabled
public String iconName;
public ColumnAndDataWrapper(List<SObject> recordList, List<Column> columns, String objectPluralLabel, String iconName) {
this.recordList = recordList;
this.columns = columns;
this.objectPluralLabel = objectPluralLabel;
this.iconName = iconName;
}
}
Apex object Column:
public class Column {
@AuraEnabled
public String label;
@AuraEnabled
public String fieldName;
@AuraEnabled
public String fieldType;
public Column(String label, String fieldName, String fieldType) {
this.label = label;
this.fieldName = fieldName;
this.fieldType = fieldType;
}
}
Lightning Datatable implementation
<template>
<template for:each={records} for:item="record">
<div class="slds-var-m-top_medium" key={record.key}>
<lightning-card icon-name={record.iconName} title={record.objectPluralLabel}>
<div class="slds-card__body slds-card__body_inner">
<c-icrm-rich-datatable
key-field={record.key}
data={record.recordList}
columns={record.columns}
onrowaction={handleRowAction}
show-row-number-column
hide-checkbox-column
enable-infinite-loading
>
</c-icrm-rich-datatable>
</div>
</lightning-card>
</div>
</template>
</template>
Client-side controller
From Jake's answer, if do
record.columns.push(newCol)
, I get an error because therecord.columns
is a Javascript Object and not an Array/Map.
I have tried to parse the object to an array by implementing the Object.entries() method like this:
export default class RetireContactDatatable extends LightningElement {
@api objectRecordsMap = [];
@track records = [];
connectedCallback() {
let _map = this.objectRecordsMap;
let newCol = { type: 'action', typeAttributes: { rowActions: actions } };
for (let _key in _map) {
if (_map.hasOwnProperty(_key)) {
let record = {
key: _key,
iconName: _map[_key].iconName,
objectPluralLabel: _map[_key].objectPluralLabel,
recordList: Object.entries(_map[_key].recordList),
columns: Object.entries(_map[_key].columns)
};
record.columns.push(newCol);
this.records.push(record);
}
}
}
}
This is how it looks:
From the debug console:
[
[
"0",
{
"fieldName":"Name",
"fieldType":"text",
"label":"Grant Report Name"
}
],
[
"1",
{
"fieldName":"Award_Amount__c",
"fieldType":"currency",
"label":"Award Amount"
}
],
[
"2",
{
"fieldName":"Docket_Record__c",
"fieldType":"reference",
"label":"Docket Record"
}
],
{
"type":"action",
"typeAttributes":{
"rowActions":[
{
"label":"Edit",
"name":"edit_record",
"iconName":"utility:edit"
},
{
"label":"Delete",
"name":"delete_record",
"iconName":"utility:delete"
}
]
}
}
]
I'd say I'm close, but as you see the data is not rendering.
At this point I've tried several approaches and non of them seems to work as I expect.
I took another approach by using Object.assign({}, data) method instead of parsing, this way I should be able to update the column value.
connectedCallback() {
let _map = this.objectRecordsMap;
let newCol = { type: 'action', typeAttributes: { rowActions: actions } };
for (let _key in _map) {
if (_map.hasOwnProperty(_key)) {
let record = {
key: _key,
iconName: _map[_key].iconName,
objectPluralLabel: _map[_key].objectPluralLabel,
recordList: _map[_key].recordList,
columns: _map[_key].columns
};
record.columns = Object.assign(newCol, record.columns);
this.records.push(record);
}
}
}
But this is not working either, just shows the card header with title and icon.
this.keyValue.value.columns
instead? Probably thekeyValue
will need to be decorated with@track
.columns
array (with your added values). It's not going to detect any other method of addition.