function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Pavushetti Abhilash 3Pavushetti Abhilash 3 

Display row number as seperate column in custom LWC datatable

Hi eveyone.
I need to display row number as seperate column with Row number as label in Custom LWC datatable. For every record should display serial number as seperate column with header. 
NOTE: I am not asking about show-row-number= true.
I should display row number as seperate field/column in table.

<c-custom-type-component
                            class="POdataTable slds-table_header-fixed_container slds-scrollable_x slds-border_top" 
                            key-field="Id" 
                            data={POrecords}
                            columns={columns} 
                            selected-rows={preSelectedRows} 
                            onrowaction={getPopUpInfo}
                            onpicklistchanged={tablePicklistChanged} 
                            onchangeofreturnqty={handelReturnQty}   
                            onselectedrow={handelSelectedRow}   
                            hide-checkbox-column                     
                        ></c-custom-type-component>

@track columns = [
{
            label: 'Row Number', cell: (row, index) => index + 1 
        }
]
If I am wrong PLEASE let me know. Thanks. 
Best Answer chosen by Pavushetti Abhilash 3
ravi soniravi soni
hi ,
try below code and take reference.
<template>
    <lightning-datatable
    key-field="id"
    columns={columns}
    data={lstRecords}
    >
</lightning-datatable>
</template>


---------------------------------
import { LightningElement,wire } from 'lwc';
import getRecords from '@salesforce/apex/fetchAccount.getRecords';
export default class ShowSeperateRowColumn extends LightningElement {
    columns = [{label : 'Row Number', fieldName : 'rowNumber',type : 'number'},
    {label : 'Name', fieldName : 'Name',type : 'text'},
    {label : 'Phone', fieldName : 'Phone',type : 'text'},
    {label : 'Type', fieldName : 'type',type : 'text'}];
    lstRecords;

    @wire (getRecords)fetchData(value) {
		const {
			data,
			error
		} = value;
		if (data) {
            let result = JSON.parse(JSON.stringify(data));
            console.log('result==> ' + JSON.stringify(result));
            

            for(var i=0; i<result.length; i++){
                result[i].rowNumber = i+1;
            }
this.lstRecords = result;
        }
        else if(error){
            console.log(error);
            this.lstRecords = [];
        }


    }
}
---------------------------------------------------

public with sharing class fetchAccount {
    
 @AuraEnabled(Cacheable=true)
    public static List<Account> getRecords(){
        return [SELECT Id,Name,Phone,type From Account];
       
    }
    
    
    
}

don't forget to mark it as best answer.
Thank you​​​​​​​

All Answers

ravi soniravi soni
hi ,
try below code and take reference.
<template>
    <lightning-datatable
    key-field="id"
    columns={columns}
    data={lstRecords}
    >
</lightning-datatable>
</template>


---------------------------------
import { LightningElement,wire } from 'lwc';
import getRecords from '@salesforce/apex/fetchAccount.getRecords';
export default class ShowSeperateRowColumn extends LightningElement {
    columns = [{label : 'Row Number', fieldName : 'rowNumber',type : 'number'},
    {label : 'Name', fieldName : 'Name',type : 'text'},
    {label : 'Phone', fieldName : 'Phone',type : 'text'},
    {label : 'Type', fieldName : 'type',type : 'text'}];
    lstRecords;

    @wire (getRecords)fetchData(value) {
		const {
			data,
			error
		} = value;
		if (data) {
            let result = JSON.parse(JSON.stringify(data));
            console.log('result==> ' + JSON.stringify(result));
            

            for(var i=0; i<result.length; i++){
                result[i].rowNumber = i+1;
            }
this.lstRecords = result;
        }
        else if(error){
            console.log(error);
            this.lstRecords = [];
        }


    }
}
---------------------------------------------------

public with sharing class fetchAccount {
    
 @AuraEnabled(Cacheable=true)
    public static List<Account> getRecords(){
        return [SELECT Id,Name,Phone,type From Account];
       
    }
    
    
    
}

don't forget to mark it as best answer.
Thank you​​​​​​​
This was selected as the best answer
ravi soniravi soni
hi Pavushetti,
did you try above solution? let me know if it helps you by marking it as best anwer.
don't forget to mark it as best answer. your one best mark give us motivation for helping others.
Thank you
Pavushetti Abhilash 3Pavushetti Abhilash 3
Thankyou Veer soni. Its working. Let me know ur linkedin Id
Aarti Thakur 13Aarti Thakur 13
Hi Abhilash,

I also have the same requirement.The above code is working for me also however the default show row column is still showing.I mentioned this as false.But If I remove this attribute from the datatable then in row number it showing nothing.So could u plz confirm do u also have the same issue or its showing perfect for you.
Thank You