[SalesForce] 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;
 }

Best Answer

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.

Related Solutions

[SalesForce] Help with working with lightning:dataTable

Must have been user error... not sure what I did, but it works now. See code above in the question. And a screenshot. The code I showed is only for the nested table.

[SalesForce] Insert a link in lightning datatable Column Value

Your Type Attributes, and likely the underlying data, aren't set up properly for a url type entry.

Your url item should correspond to the column in your data that contains a URL value (not the link's title or the column title). You can use the typeAttributes map to supply three additional parameters:

label
target
tooltip

Your columns entry should look something like this:

{
    label: 'Customer Name', 
    fieldName: 'CustomerName__c', // This field should have the actual URL in it.
    type: 'url', 
    sortable: "false", 
    typeAttributes: {
        label: {
            fieldName: 'UserReadableName__c' 
            // whatever field contains the actual label of the link
        },
        target: '_blank', // or as desired
        tooltip: 'Open the customer page' // or as desired
    }
}

Then, your CustomerName__c column in your data must contain an actual URL (not a Salesforce Id or anything else). If it doesn't, you can add a synthetic column to your data, such as

contactsList.forEach(function(contact) {
    contact.SearchURL = 'https://google.com/search?q=' + contact.CustomerName__c;
}

Best Answer

Related Solutions

[SalesForce] Help with working with lightning:dataTable

[SalesForce] Insert a link in lightning datatable Column Value

Related Topic