Lightning datatable column value misaligned

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

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating