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.

14

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!! Commented Jul 27, 2019 at 10:15
  • 2
    This should be the correct answer. Commented 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 Commented 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.