function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Upasana PaulUpasana Paul 

Hide the default row number from 1st column

I need to remove the 1st column from the lightning table which is the row number but not able to do it.
User-added image


My .cmp looks as follows
  
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="Order" type="Order__c" />
<aura:attribute name="OrderLines" type="Otter_FFA_Order_Line_Item__c" />
<aura:attribute name="Columns" type="List" />

<aura:handler name="init" value="{!this}" action="{!c.myAction}" />

<force:recordData aura:id="OrderRecord" recordId="{!v.recordId}" targetFields="{!v.Order}" layoutType="FULL" />


<lightning:card iconName="standard:contact" title="{! 'Order Items List for ' + v.Order.Otter_FFA_Order__c}">
    <!-- Order Line list goes here -->
        <lightning:datatable data="{! v.OrderLines }" columns="{! v.Columns }"  keyField="Id"/>

</lightning:card>

And .js is as below 
({ myAction : function(component, event, helper) {

    component.set("v.Columns", [
        {label:"#", initialWidth: 20, fieldName:"Otter_FFA_Ln__c", type:"number"},
        {label:"Item", initialWidth:80, fieldName:"Product_Name__c", type:"text"},
        {label:"Description", initialWidth: 110, fieldName:"Description_1_and_2__c", type:"text"},
        {label:"QTY", initialWidth: 70, fieldName:"Otter_FFA_Quantity__c", type:"number",editable: true},
    {label:"Net Price", initialWidth: 70, fieldName:"Otter_FFA_Net_Price__c", type:"number"},
        {label:"Add Disc%", initialWidth: 90, fieldName:"Otter_FFA_User_Discount__c", type:"number",editable: true},
        {label:"Order Price", initialWidth: 70, fieldName:"Otter_FFA_Applied_Net_Price__c", type:"number",editable: true},
        {label:"Total Before GST", initialWidth: 70, fieldName:"Otter_FFA_Total_Price__c", type:"number"}

    ]);
    var action = component.get("c.getOrderLines");

    action.setParams({
        recordId: component.get("v.recordId")
    });

    action.setCallback(this, function(OrderLines) {
        component.set("v.OrderLines", OrderLines.getReturnValue());
    });

    $A.enqueueAction(action);
}
})

with a stylesheet as below
.THIS .slds-th__action{ word-wrap: initial; font-weight: bold; font-size: 70% !important; }
 
Best Answer chosen by Upasana Paul
Raj VakatiRaj Vakati

showRowNumberColumn='"false" is not hiding in every case so i went with css and i am seeing it if we set  hideCheckboxColumn="true" 

  
<lightning:datatable
                             columns="{! v.columns }" 
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"  showRowNumberColumn="false"
                             hideCheckboxColumn="true"

User-added image​​​​​​​

  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"
                access="global"
                controller="AccountController">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordId" type="String"/>
    <!-- This attribute will hold the update records from data table-->
    <aura:attribute name="updatedRecord" type="Object[]" />
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <!-- You must define keyField as 'Id' to save the record back in Salesforce
'onsave' attribute will executed when user clicks on save button -->
    <lightning:card title="Account Editable Datatable">
        <lightning:datatable
                             columns="{! v.columns }" 
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"  showRowNumberColumn="false"
                             hideCheckboxColumn="true"
                 />
    </lightning:card>
</aura:component>

 

All Answers

Raj VakatiRaj Vakati
Use this css
  
.THIS .slds-table .slds-row-number:after {
    content: counter(none) !important ;
    display: none !important ;
}

User-added image
Upasana PaulUpasana Paul
Hi Raj,
Thanks the code works.
But now there is a blank space in place of the row number which is not getting removed.

User-added image
Raj VakatiRaj Vakati
Can you find the css and set the width to 0 ?
Maharajan CMaharajan C
Check do you have added any attribute as showRowNumberColumn in Lightning:datatable tag. becuase in the above code we are not seeing this attribute but try to to set the value as false to showRowNumberColumn in Lightning:datatable tag as like below.

<lightning:datatable data="{! v.OrderLines }" columns="{! v.Columns }" keyField="Id"/  showRowNumberColumn = "false">

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Maharajan.C
Raj VakatiRaj Vakati

showRowNumberColumn='"false" is not hiding in every case so i went with css and i am seeing it if we set  hideCheckboxColumn="true" 

  
<lightning:datatable
                             columns="{! v.columns }" 
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"  showRowNumberColumn="false"
                             hideCheckboxColumn="true"

User-added image​​​​​​​

  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"
                access="global"
                controller="AccountController">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordId" type="String"/>
    <!-- This attribute will hold the update records from data table-->
    <aura:attribute name="updatedRecord" type="Object[]" />
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <!-- You must define keyField as 'Id' to save the record back in Salesforce
'onsave' attribute will executed when user clicks on save button -->
    <lightning:card title="Account Editable Datatable">
        <lightning:datatable
                             columns="{! v.columns }" 
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"  showRowNumberColumn="false"
                             hideCheckboxColumn="true"
                 />
    </lightning:card>
</aura:component>

 
This was selected as the best answer
Rein Bauwens 37Rein Bauwens 37
Hi @Upasana Paul,

This css worked for me:
  
.THIS .slds-table tr th:first-child{
    width: 0px !important;
}


 
Butesh SinglaButesh Singla
Refer this post : https://lovesalesforceyes.blogspot.com/2021/11/hide-default-row-number-lightning-datatable-salesforce.html

Worked for me, hope will work for you as well. Good luck
Deepanshu Chauhan 7Deepanshu Chauhan 7
Hi @Upasna Paul,

It is working fine for me also

Thanks