4

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"
                     keyField="Id"
                     hideCheckboxColumn="true"
                     columns="{!v.FamilyDetailColumns}"
                     data="{!v.FamilyDetailData}"
                     onrowaction="{! c.handleRowAction }"/>
    </div>

CSS--

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

3 Answers 3

3

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.

13

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

3
  • 1
    This also works!!
    – mvk1991
    Jul 27, 2019 at 10:15
  • 2
    This should be the correct answer.
    – apz
    Jan 21, 2021 at 21:50
  • 1
    worked like magic, the selected answer didn't justify the text columns like I wanted but this one did Aug 26, 2022 at 15:55
0

use slds-align_absolute-center

const columns = [
    {  
        label: 'Action',
        type: 'button', 
        typeAttributes: {
            label: 'Try me'
        },
        cellAttributes: {
            class: 'slds-align_absolute-center' // Center the button within the cell
        }
    }
];

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .