Lightning data table with random data

We often get requirements to display the Salesforce object data in the lightning data table component where we query the data from apex and pass it to the component or we use lightning data service. What if we need to show the random data in the data table base component as shown below?

Salesforce lightning data table

Well, that is possible!

In this blog post, we will discuss the steps to create a lightning data table with random data.

1.    Aura framework

testComp.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

    <aura:handler name="init" value="{!this }" action="{!c.init }"/>

    <aura:attribute name="data" type="Object"/>

    <aura:attribute name="columns" type="List"/>   

    <div style="height: 200px" class="slds-m-top_medium">

        <lightning:datatable

                             aura:id="DataTable"

                             keyField="id"

                             data="{! v.data }"

                             columns="{! v.columns }"

                             hideCheckboxColumn="true"

                             />

    </div>

</aura:component>


testComp.js

//codekiat.com

({ 

    init : function(component, event, helper) {

        component.set('v.columns', [

            {label: 'User Name', fieldName: 'UserName', type: 'text'},

            {label: 'Role', fieldName: 'Role', type: 'text'},

            {label: 'Status', fieldName: 'UserStatus', type: 'text'},

        ]);

        var dtArray = [];

        let user1 = {UserName: 'Naveen', Role: 'Developer', UserStatus: 'Active'};

        let user2 = {UserName: 'Sunil', Role: 'Lead', UserStatus: 'Active'};

        let user3 = {UserName: 'Prem', Role: 'Architect', UserStatus: 'Active'};

        dtArray.push(user1);   

        dtArray.push(user2);

        dtArray.push(user3);   

        component.set("v.data", dtArray);

    },

})

 

2.    Lightning web component

lWCTest.html

<template>

    <div style="height: 300px;">

        <lightning-datatable

                key-field="id"

                data={contacts}

                columns={columns}

                hide-checkbox-column=true>

        </lightning-datatable>

    </div>

</template>

 

lWCTest.js

import { LightningElement, track } from 'lwc';

const columns = [

    { label: 'User Name', fieldName: 'UserName', type: 'text' },

    { label: 'Role', fieldName: 'Role', type: 'text' },

    { label: 'Status', fieldName: 'Status', type: 'text' }

];

export default class lWCTest extends LightningElement {

    @track contacts = [];

    columns = columns;

    connectedCallback() {

        let user1 = {'UserName':'Naveen''Role':'Developer''Status':'Active'};

        let user2 = {'UserName':'Sunil''Role':'Lead''Status':'Active'};

        let user3 = {'UserName':'Prem''Role':'Architect''Status':'Active'};

        this.contacts.push(user1);

        this.contacts.push(user2);

        this.contacts.push(user3);

    }

}

 

lWCTest.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

 

Result

Salesforce lightning data table


Please note that the fieldName property in the initial array declaration should match the key name in the JSON object literal  


Conclusion

We have seen how to create a data table with random data. In both the cases mentioned above, we have directly added values to an array. If required, you can extract the object data from the apex through iteration and map the values to an array as per the requirement.  

Please post your feedback or queries in the comments section below.