Show/add row number column to lightning datatable in LWC component Salesforce - Salesforce Globe For You

 Show/add row number column to lightning datatable in LWC component Salesforce  - Salesforce Globe For You 

Solution: Use the show-row-number-column="true" attribute for lightning datatable tag as shown in the example below.

Example:

public class LeadController {

    @AuraEnabled

    public static List<Lead> getLeads() {

        List<Lead> lstLead = new List<Lead>();

        lstLead = [Select id,name from Lead Limit 5];

        return lstLead;

    }

}

callApexMethodFromLWC.html

<template>

    <lightning-Card title="Call Apex method From LWC Component">

        <lightning-button variant="brand" label="Call Apex method" title="Call Apex method to display 5 Leads" onclick={callApexMethod} class="slds-m-left_x-small"></lightning-button>

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

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    show-row-number-column="true"

                    columns={columns}>

            </lightning-datatable>

        </div>    

    </lightning-Card>

</template>

callApexMethodFromLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

];

export default class CallApexMethodFromLWC extends LightningElement {

    @track lstLeads;

    columns = columns;

    callApexMethod() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

            })

            .catch(error => {

                this.error = error;

            });

    }

}

callApexMethodFromLWC.js-meta.xml

<?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__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: