Hide the default row number from 1st column

Question

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

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; }

Answer 1

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; }