In this post I will explain how to remove default row number from lightning datatable in LWC and aura.
Method 1 :
Remove show-row-number-column attribute from the lightning datatable.
Method 2:
1.) Create csv file removeRow.css and paste the following code.
removeRow.css:
.slds-table tr th:first-child{
width:0 !important;
}
2.) Create new static resource with the following details:
- Name : removeRow
- File : Upload the removeRow.css file created in step 1.
- Cache Control : Public
3.) Refer the following code:
data_table.cmp:
<template>
<div>
<lightning-datatable
key-field="id"
data={caseData}
columns={caseColumns}>
</lightning-datatable>
</div>
</template>
data_table.js:
import { LightningElement,track,wire } from 'lwc';
import loadCases from '@salesforce/apex/data_table.loadCases';
import {loadStyle} from 'lightning/platformResourceLoader'
import REMOVEROW from '@salesforce/resourceUrl/removeRow'
export default class data_table extends LightningElement {
@track caseData;
@track caseColumns = [
{ label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},
{ label: 'Subject', fieldName: 'Subject', type: 'text'},
{ label: 'Priority', fieldName: 'Priority', type: 'text'},
];
@wire(loadCases)
getCaseRecord(result){
if (result.data) {
this.caseData = result.data;
}
}
renderedCallback(){
Promise.all([
loadStyle( this, REMOVEROW)
]).then(() => {
console.log( 'Files loaded' );
})
.catch(error => {
console.log( 'error',error );
});
}
}
data_table.apx:
public with sharing class data_table {
@AuraEnabled(cacheable=true)
Public static list<case> loadCases(){
list<case> c = new list<case>();
c = [Select id,CaseNumber,Subject, priority from Case];
return c;
}
}
Thanks,
Lovesalesforceyes
