+ 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