Datatable in LWC #inSalesforce

Datatable in LWC

To return a simple list of records, use the getListUi wire adapter. To select certain accounts using SOQL, use an Apex method. 

This loads the first 10 accounts in the datatable using a SOQL query.

//Class

public with sharing class AccountController {

@AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name,Industry,Rating,Active__c FROM Account LIMIT 10];
    }
}

 

This template wires up the datatable to the contact records using the Id field.

//,html in LWC

<template>
    <lightning-datatable
    key-field="Id"
    data={accounts.data}
    columns={columns}>
    </lightning-datatable>
</template>

 

The below javascript is to load the columns like here it wires the getAccountList Apex method to the accounts property.

//.js in LWC

import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountController.getAccountList';
const columns = [
    { label: 'Id', fieldName: 'Id' },
    { label: 'Name', fieldName: 'Name' },
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Rating', fieldName: 'Rating' },
    { label: 'Active', fieldName: 'Active__c' },
];
export default class ApexDatatableExample extends LightningElement {
    error;
    columns = columns;
@wire(getAccountList)
    accounts;
}

//.xml in LWC

<?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__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>    
</LightningComponentBundle>

Reference: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation