Lightning datatable column value misaligned

Question

I have a lightning datatable with column as type number

The row value in it is getting right aligned, while everything else is left aligned, I need to make it uniform.

Here is what I tried --

    <div class="empFamilyTable">
    <lightning:datatable aura:id="accountTable"
                     keyField="Id"
                     hideCheckboxColumn="true"
                     columns="{!v.FamilyDetailColumns}"
                     data="{!v.FamilyDetailData}"
                     onrowaction="{! c.handleRowAction }"/>
    </div>

CSS--

 .THIS .empFamilyTable td {
   text-align: left !important;
 }

Answer 1

Number data types cell are aligned with css class slds-grid_align-end. It basically used to grow from the end of the horizontal axis. so if you override below style for slds-grid_align-end class then it will left align all number fields.

.THIS .slds-grid_align-end
{
    justify-content: left !important; 
}

Refer SLDS guide for this.

Answer 2

In the attribute FamilyDetailColumns , try to use cellAttributes and apply alignment for the number column like this:

var columns = [{ label: 'Amount', fieldName: 'amount', type: 'currency', 
    cellAttributes: { alignment: 'left' }}
            // other column data
        ];

For more details refer to documentation below in section Aligning Data in a Column https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation