How to display multiple object records in a single lightning data table of Salesforce

In this blog post, find a sample code to display multiple objects' data in a single lightning-datatable base component in the Salesforce lightning CRM.

In this example, Subject and Activity Date fields of Task and Event objects are wrapped into a single list in the Apex and passed to the lightning web component.

Create a new Apex class

TaskAndEventController.apxc

public class TaskAndEventController {
    @AuraEnabled(cacheable=true)
    public static list<TaskAndEventWrapper> getTaskandEvents(){
        list<TaskAndEventWrapper> taskAndEventRecords = new list<TaskAndEventWrapper>();
        string userId = UserInfo.getUserId();      
        List<Task> taskList = [SELECT Subject, ActivityDate FROM Task WHERE OwnerId=:userId ORDER BY ActivityDate];
        List<Event> eventList = [SELECT Subject, ActivityDate FROM Event WHERE OwnerId=:userId ORDER BY ActivityDate];   
        for(Task t: taskList){
            TaskAndEventWrapper tWrap = new TaskAndEventWrapper();
            tWrap.Subject = t.Subject;
            tWrap.ActivityDate = t.ActivityDate;
            taskAndEventRecords.add(tWrap);
        }
        for(Event e: eventList){
            TaskAndEventWrapper eWrap = new TaskAndEventWrapper();
            eWrap.Subject = e.Subject;
            eWrap.ActivityDate = e.ActivityDate;
            taskAndEventRecords.add(eWrap);
        }
        system.debug('taskAndEventRecords >> ' + taskAndEventRecords);
        return taskAndEventRecords;
    }
    public class TaskAndEventWrapper{
        @AuraEnabled
        public string Subject{get; set;}
        @AuraEnabled
        public Date ActivityDate{get; set;}
    }

}

Create a new lightning web component

taskAndEvents.html

<template>
    <lightning-card title="Related Activities ">
        <lightning-datatable data={activities} columns={columns} key-field="Id">
        </lightning-datatable>
    </lightning-card>
</template> 

taskAndEvents.js

import { LightningElement, api, wire, track } from 'lwc';
import getActivities from
'@salesforce/apex/TaskAndEventController.getTaskandEvents';
export default class TaskAndEvents extends LightningElement {
    @api recordId;
    @track activities;
    @track columns = [
        { label: 'Subject', fieldName: 'Subject', type: 'text' },
        { label: 'Activity Date', fieldName: 'ActivityDate', type: 'date' }
    ];
    @wire(getActivities)
    WireActivityRecords({error, data}){
        if(data){
            this.activities = data;
            this.error = undefined;
        }else{
            this.error = error;
            this.activities = undefined;
        }
    }
} 

taskAndEvents.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Ensure that the variable name in the Apex wrapper class matches with the columns variable fieldName attribute value of the LWC JavaScript file.

Save or deploy the lightning web component to the sandbox, add the new component to the Flexi page and test the functionality.

It should display the records from task and event objects as shown below

If you find any issues in implementing this, debug your lightning web component and add your queries or feedback in the comments section below.

Until next time...