[SalesForce] 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.

enter image description here

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

My workaround for this issue was to hide the offending column using CSS. Try adding the following to your CSS to hide the first column containing the row numbers. Note: you must do this for the header and content--thus two styles. .THIS .yourTableClassName td:nth-child(1){ display:none !important; } .THIS .yourTableClassName th:nth-child(1){ display:none !important; }

Related Topic