EnhancedLightningGrid
EnhancedLightningGrid copied to clipboard
Numbers should be right-aligned
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;