Problem Description

Table columns displaying numeric attributes (INT, FLOAT) are automatically formatted with right-alignment by adding the CSS class tblRight. When a user specifies custom CSS classes for such a column, the custom classes are additive rather than replacing the default behavior.

This means users cannot:

• Override the default right-alignment for numeric columns
• Remove alignment entirely (display as normal/left-aligned)
• Specify alternative alignments (e.g., center-aligned numbers)

The tblRight class remains applied alongside any user-specified classes, causing the numeric content to stay right-aligned regardless of user configuration.

Solution

Added an override option to CSS class configuration. When enabled, the specified CSS class replaces all existing classes instead of being added to them.

Usage

Column Configuration

In table column configuration, use the cssClassOverride property:

Example 1: Override with center alignment

#!xml
<css-classes 
    cssClass="tblCenter" 
    cssClassOverride="true"/>

Example 2: Remove alignment (display as normal/left-aligned)

#!xml
<css-classes 
    cssClassOverride="true"/>

Similarly for header classes:

#!xml
<css-classes 
    cssHeaderClass="myHeaderClass" 
    cssHeaderClassOverride="true"/>

Model Annotation

In the model definition, use the override property on the css-class annotation:

Example 1: Override with custom class

#!xml
<attribute name="price" type="tl.core:Float">
    <annotations>
        <css-class 
            value="tblCenter" 
            override="true"/>
    </annotations>
</attribute>

Example 2: Remove default alignment

#!xml
<attribute name="amount" type="tl.core:Integer">
    <annotations>
        <css-class override="true"/>
    </annotations>
</attribute>

Configuration Properties

WithColumnCssClasses (Column Configuration)

• cssClassOverride (boolean, default: false) When true, the cssClass replaces any existing CSS classes instead of being added to them.

• cssHeaderClassOverride (boolean, default: false) When true, the cssHeaderClass replaces any existing header CSS classes instead of being added to them.

TLCssClass (Model Annotation)

• override (boolean, default: false) When true, the specified CSS class replaces any existing classes instead of being added to them.

Behavior

== When override = false (default) ==

• CSS classes are additive (existing behavior)
• Custom classes are added to default classes
• Example: numeric column gets both tblRight and custom class

== When override = true ==

• CSS classes are replaced
• Custom class replaces all existing classes
• If no custom class specified, all existing classes are removed
• Example: numeric column loses tblRight class

Use Cases

This solution addresses scenarios where:

• Aesthetic alignment: Numbers should be centered for visual consistency
• Different data types: Numeric IDs or codes should align differently than financial values
• Mixed content: Text and numbers in a single column need uniform alignment
• Custom styling: User wants complete control over column appearance without default interference

Backward Compatibility

This change is fully backward compatible:

• Default value for all override flags is false
• Existing configurations continue to work with additive behavior
• No changes required to existing applications