Lightning data table with random data set in salesforce lightning

We often get requirements to display the Salesforce object data in the lightning data table component where we query the data from the 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?

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

 

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.