row number column not appearing in lightning-datatable

Question

Row number column is not showing on UI:

Here is my code:

HTML

<template>
<div class="slds-p-left_x-large slds-p-right_x-large">
    <lightning-card class="slds-p-left_x-large slds-p-right_x-large">
        <lightning-record-view-form record-id={recordId} object-api-name="Case">
            <div class="slds-p-left_x-large slds-p-right_x-large">
                <lightning-datatable
                    key-field="id"
                    data={marqueeData}
                    show-row-number-column
                    row-number-offset={rowOffset}
                    hide-checkbox-column
                    columns={columns}>
                </lightning-datatable>
            </div>
        </lightning-record-view-form>
    </lightning-card>
</div>

JS

    import { LightningElement, api, track } from 'lwc';
import getCaseRecord from '@salesforce/apex/NtnxCaseMarqueeExtension.getCaseRecord';
import getSupportMarquee from '@salesforce/apex/NtnxCaseMarqueeExtension.getSupportMarquee';

const COLUMNS = [
    {label:'Click for Details',fieldName:'Name_Clickable__c' ,type : 'url', typeAttributes: {label: { fieldName: 'Name' },target: '_blank'}},
    {label:'Summary',fieldName:'Summary__c' },
    {label:'Link',fieldName:'Link__c', type: 'url' },
    {label:'Support Marquee Type',fieldName:'Support_Marquee_Type__c' },
];
export default class NtnxSupportMarqueeLWC extends LightningElement {
    @api recordId;
    @api componentContainer;


    marqueeData = [];
    isLightning = false;
    caseRecord;
    columns = COLUMNS;
    connectedCallback(){
        if(this.componentContainer === undefined)
            this.isLightning = true;
        getCaseRecord({caseId:this.recordId})
        .then(result=>{
            console.log(result);
            this.caseRecord = result;
            if(this.caseRecord !== undefined)
                this.loadMarquee();
        })
        .catch(error=>{
            console.log(error);
        });
    }

    loadMarquee(){
        return getSupportMarquee({caseRec:this.caseRecord})
        .then(result => {
            console.log('line 39 ');
            console.log(result);
            let updatedRecords = [...this.marqueeData, ...result];
            console.log(updatedRecords);
            try{
            this.marqueeData = updatedRecords.map(element=>{
                return {...element,
                    Name_Clickable__c : (element.Detail__c !== undefined ? element.Name_Clickable__c:''),
                    
                };
            });
            console.log(this.marqueeData);
        }catch(error){
            console.log('WOW '+error);
        }
            console.log(this.marqueeData);
        })
        .catch(error => {
            this.marqueeData = undefined;
        });
    }

    
}

What is wrong ?

Answer 1

You probably need to set a value for rowOffset in your class. For example,
rowOffset = 0;