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. Family Details

Here is what I tried --

    <div class="empFamilyTable">
    <lightning:datatable aura:id="accountTable"
                     onrowaction="{! c.handleRowAction }"/>


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

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.


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

  • This also works!!
    – mvk1991
    Jul 27 '19 at 10:15
  • 1
    This should be the correct answer.
    – apz
    Jan 21 '21 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.