Lightning Web Component Create DataTable

Question

I have a very simple LWC(just learning) I am trying to create something like a datatable(.net) or like the old visualforce page(PageBlockSection) like structure such as the related list and display it.

I can get data to display using the template however instead of just displaying it i want it displayed in a grid. Is there a very simple example anywhere?

Apex Class

public with sharing class ContactData {
@AuraEnabled(cacheable=true)

public static List<Contact> getContacts(String accId) {
    return [SELECT Id, Name ,Email, Phone, Account.Name from Contact where AccountId = :accId];
}

}

HTML

<template>
    <lightning-card title="Account Collection" icon-name="custom:custom14">
<div class="boarder"> 
    <template if:true={myContacts.data}>

            <ul class="slds-list_ordered">



                    <template for:each={myContacts.data} for:item="contact">


                    <li key={contact.Id}>
                            {contact.Name}
                            {contact.Email}

                    </li> 

                    </template>

        </ul>




    </template>

</div>

JavaScript

import { LightningElement,api,wire } from 'lwc';
//Reads the Controller Class Get Contacts. Must Specify the file path - Class and Function returned. 
import getContacts from '@salesforce/apex/ContactData.getContacts';

export default class RecordIdExample extends LightningElement {
//Passes a Record Id from the page to the Class. 
 @api recordId;
@wire(getContacts, {accId:'$recordId' })
//returns MyContacts as a variable that is then used in the HTML.
  myContacts;
}

Answer 1

This could be done in a couple of ways. If you are wanting a data table, then you would do as already mentioned https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example

HTML

<template>
    <lightning-card title="Contacts" icon-name="standard:contact"> 
           <template if:true={data}>
                   <lightning-datatable data={data}
                                    columns={columns}
                                    key-field="id"
                                    onrowselection={getSelectedRecords}>
                    </lightning-datatable>
           </template>
   </lightning-card>   

JS

import {LightningElement, track, wire, api } from 'lwc';

// importing apex class methods
import getContacts from '@salesforce/apex/LWCContactController.getContacts';


// datatable columns
const columns = [
    {
        label: 'First Name',
        fieldName: 'FirstName',
        editable: true
    }, {
        label: 'Last Name',
        fieldName: 'LastName'
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'phone'
    }, {
        label: 'Email',
        fieldName: 'Email',
        type: 'email'

    }
];

export default class contactTableLWC extends LightningElement {

    @track data;
    @track columns = columns;
    @track isTrue = false;
    @track recordsCount = 0;
    @api recordId;



    // retrieving the data using wire service
    @wire(getContacts, {conId: '$recordId'})
    contacts(result) {
        this.refreshTable = result;
        if (result.data) {
            this.data = result.data;
            this.error = undefined;

        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }

}

If it is not a data table that you are looking for, then you can utilize the LDS grid system to control how the elements are displayed in the component. https://www.lightningdesignsystem.com/utilities/grid/#site-main-content

HTML Example

<template>
    <lightning-card title="Account Collection" icon-name="custom:custom14">
<div class="boarder"> 
    <template if:true={myContacts.data}>
       <div class="slds-grid slds-wrap">
          <template for:each={myContacts.data} for:item="contact">
             <div key={contact.Id}>  
                <div key={contact.Id} class="slds-col">  
                  {contact.Name}      
                </div> 
                <div class="slds-col">  
                  {contact.Email}    
                </div> 
             </div> 
           </template>
      </div>
    </template>
</div>

Answer 2

I found a simple Example for anyone else that has the same issue I did.

JavaScript:

<template>
    <lightning-card title="Account Collection" icon-name="custom:custom14">
<div class="boarder"> 
    <template if:true={myContacts.data}>

        <lightning-datatable
            key-field="Id"
            data={myContacts.data}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}>
        </lightning-datatable>


    </template>

</div>

HTML

<template>
    <lightning-card title="Account Collection" icon-name="custom:custom14">
<div class="boarder"> 
    <template if:true={myContacts.data}>

        <lightning-datatable
            key-field="Id"
            data={myContacts.data}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}>
        </lightning-datatable>


    </template>

</div>
</lightning-card>
</template>

Answer 3

Working for me, use this code-- ContactController.cls----------

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [
            SELECT FirstName,LastName,Email
            FROM Contact
            WITH SECURITY_ENFORCED
        ];
    }
}

---

<template>
<lightning-card>
    <lightning-record-form
        object-api-name={objectApiName}
        fields={fields}
        onsuccess={handleSuccess}>
    </lightning-record-form>
</lightning-card>

---------------

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class ContactCreator extends LightningElement {
    objectApiName = CONTACT_OBJECT;
    
    fields = [FIRSTNAME_FIELD, LASTNAME_FIELD, EMAIL_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Contact created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

---

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