Right aligning cell content in a datatable column

Question

I want to right align an outputText value (ie. fee.TableAmount below) and I want to keep the header for that column centered. What parameter do I have to pass to outputText below to achieve this?

<h:dataTable>
    ...
    (other columns)
    ...
    <h:column headerClass="columnCenter">
        <f:facet id="header_agency" name="header">
            <h:outputText value="Amount"/>
        </f:facet>
        <h:outputText value="#{fee.tableAmount}">
            <f:convertNumber maxFractionDigits="2" groupingUsed="true"
                currencySymbol="$" type="currency" />
        </h:outputText>
    </h:column>
</h:dataTable>

Answer 1

You can use the columnClasses attribute of <h:dataTable> to specify CSS classes on all cells of the same column. You can pass a commaseparated string of class names.

<h:dataTable columnClasses="column1,column2,column3">

The above renders <td class="column1"> for the first column, <td class="column2"> for the second and so on. This allows you to externalize and normalize the styles.

Imagine that you have 4 columns and the first, second and fourth column doesn't need to have a special style and that only the third column needs to be right-aligned, then do so

<h:dataTable columnClasses="none,none,right,none">

in combination with

td.right {
    text-align: right;
}

which is semantically more correct and technically more robust than a float: right;.

Answer 2

As you said, if you define a float: right directly on your <h:outputText>, like this:

<h:outputText style="float: right;" value="#{fee.tableAmount}"/>

then it will nest your text in a <span> that will then be moved to the right.

Unfortunately, the <h:column> component does not provide a way to specify the CSS class of the column itself. However, in case you are using another component for your table, such as the Richfaces <rich:column>, there is another solution is to specify this: first, set a CSS class:

.textOnRight {
    text-align: right;
}

Then, assign this CSS class to your column:

<rich:column styleClass="textOnRight" headerClass="columnCenter">
    <f:facet name="header">
        <h:outputText value="Amount"/>
    </f:facet>
    <h:outputText value="#{fee.tableAmount}">
        <f:convertNumber maxFractionDigits="2" groupingUsed="true"
            currencySymbol="$" type="currency" />
    </h:outputText>
</rich:column>

By the way, setting an id in your <f:facet> does nothing, as this attribute is not handled by this component.