Simple Example. Skinability

The following code snippet shows the simple table with h:column components as children:

     <rich:dataTable value="#{expenseReport.records}" var="record">
            <h:column>
                <f:facet name="header">
                     <h:outputText value="City Name" ></h:outputText>
                </f:facet>
                 <h:outputText value="#{record.city}" ></h:outputText>
          </h:column>
          <h:column>
                <f:facet name="header">
                     <h:outputText value="Meals" ></h:outputText>
                </f:facet>
                 <h:outputText value="#{record.totalMeals}">
                      <f:convertNumber  pattern="$####.00"  ></f:convertNumber>
                 </h:outputText>
          </h:column>
          <h:column>
                <f:facet name="header">
                     <h:outputText value="Transport" ></h:outputText>
                </f:facet>
                 <h:outputText value="#{record.totalTransport}">
                      <f:convertNumber  pattern="$####.00"  ></f:convertNumber>
                 </h:outputText>
          </h:column>
          <h:column>
                <f:facet name="header">
                     <h:outputText value="Hotels" ></h:outputText>
                </f:facet>
                 <h:outputText value="#{record.totalHotels}">
                      <f:convertNumber  pattern="$####.00"  ></f:convertNumber>
                 </h:outputText>
          </h:column>
          <h:column>
                <f:facet name="header">
                     <h:outputText value="Total" ></h:outputText>
                </f:facet>
                 <h:outputText value="#{record.total}">
                      <f:convertNumber  pattern="$####.00"  ></f:convertNumber>
                 </h:outputText>
          </h:column>
     </rich:dataTable>

The outcome (Example #1) appeared on the page

is similar to what you have using the standard h:dataTable except the look-n-feel.

The rich:dataTable is skinnable by default. The look-n-feel of each part of the dataTable might be customizable with set of CSS classes. This future is described later in this article.

Additional to the h:column, you can use rich:column that provides some features that h:column misses. Most important feature is ability to use rowspans, colspans and individual CSS classes.

Columns (both rich:column and h:column) can be united with rich:columnGroup. Using rich:columnGroup is very beneficial inside the facet as soon as JSF facet might have only one child. rich:columnGroup is enabling to use header and footer facets of the table not only like a united row, but like part of the table that might have various number of rows and columns.

Take a look at Example #2.

The header of this table emphasizes that three middle columns present the expense types. This is like this header is formed on the JSP page:

     <f:facet name="header">
          <rich:columnGroup>
               <rich:column rowspan="2">
                    <h:outputText value="City Name" ></h:outputText>
               </rich:column>

               <rich:column colspan="3">
                    <h:outputText value="Expenses" ></h:outputText>
               </rich:column>
          
               <rich:column rowspan="2">
                    <h:outputText value="Total" ></h:outputText>
               </rich:column>
          
               <rich:column breakBefore="true">
                    <h:outputText value="Meals" ></h:outputText>
               </rich:column>

               <rich:column>
                    <h:outputText value="Transport" ></h:outputText>
               </rich:column>
          
               <rich:column>
                    <h:outputText value="Hotels" ></h:outputText>
               </rich:column>
          
          </rich:columnGroup>
     </f:facet>

The meaning of the rowspan and colspan are the same as for standard HTML table cell. The fourth column has an attribute breakBefore equals true. This instructs the renderer to close the previous table row and start the new one. Therefore, using the rich:columnGroup and rich:column component you can construct the header of the table like putting tiles on the floor. The footer might be formed in the came manner.

Example #2 introduces the additional facet with name "capture". This facet is rendered to the <capture> tag in the result page.

    <f:facet name="caption">
        <h:outputText value="Example #2. Using rich:column and rich:columnGroup" ></h:outputText>
    </f:facet>

Last, but not least feature that the Example 2 shows is a skinability of the RichFaces table.  As most other RichFaces component, dataTable and its components support three level or skinability.

• Application level is supported by dynamically generated CSS classes that reference to the set of skin-parameters. Skin parameters are organized as property bundles. Each bundle has its own values for each of the parameters. RichFaces Component Library ships with half of dozen pre-defined Skins. At the same time, you can create your own bundle and defines the skin parameters you desire to use.