Monday, November 1, 2021

How to hide the default row number from lightning datatable salesforce

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


Hide the default row number from lightning datatable salesforce

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( thisREMOVEROW)
            ]).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

No comments:

Post a Comment

Get selected radio button value in LWC

This post explains how to get selected radio button in LWC. Below is demo of output : To use the radio button in LWC you have to use the  li...