EnhancedLightningGrid icon indicating copy to clipboard operation
EnhancedLightningGrid copied to clipboard

Numbers should be right-aligned

Open lawgoch opened this issue 5 years ago • 0 comments

The base sdgDatagridCell.cmp has the layout for the individual cells:

<td data-label="{#v.renderfield.FieldLabel}" class="pullleft pullup">
    <div class="slds-truncate">{!v.body}</div>
</td>

There is no included definition for the pullleft class, but text defaults to left-aligned, so that's the default for all fields, with no way to customize or change.

This can be fixed quickly with a quick customization - add an attribute for cellStyleClass to the .cmp file and set it in the contoller based on field type.

New sdgDatagridCell.cmp:

aura:component <aura:handler name="init" value="{!this}" action="{!c.onInit}" /> <aura:attribute name="renderfield" type="object" access="global" /> <aura:attribute name="sdgAgo" type="String" access="public" default="{!$Label.c.sdgAgo}" /> <aura:attribute name="sdgIn" type="String" access="public" default="{!$Label.c.sdgIn}" /> <aura:attribute name="cellStyleClass" type="String" access="public" default="slds-text-align_left pullup" />

<td data-label="{#v.renderfield.FieldLabel}" class="{!v.cellStyleClass}">
    <div class="slds-truncate">{!v.body}</div>
</td>

</aura:component>

And for each type that needs to be aligned right, in the controller (I would use Percent, Integer, Currency, and Double):

case "INTEGER":
          helper.renderNumber(component, datachunk, 0);
          cmp.set("v.cellStyleClass", "slds-text-align_right pullup");
          break;

lawgoch avatar Aug 06 '18 14:08 lawgoch