Chapter 12. Tables and grids

⁠Chapter 12. Tables and grids

This chapter covers all components related to the display of tables and grids.

⁠12.1. `<a4j:repeat>`

The non-visual <a4j:repeat> component is used to iterate through a data model. The component renders child content for every iteration according to the current object data.

The <a4j:repeat> component extends the standard UIRepeat component to allow partial updates within iterations while sending Ajax requests. The component acts as a base for all the data iteration components detailed in this chapter.

⁠12.1.1. Basic usage

The contents of the collection are determined using Expression Language (EL). The data model for the contents is specified with the value attribute. The var attribute names the object to use when iterating through the collection. This object is then referenced in the relevant child components. Example 12.1, “<a4j:repeat> example” shows how to use <a4j:repeat> to maintain a simple table.

⁠

Example 12.1. <a4j:repeat> example

<table>
    <tbody>
        <a4j:repeat value="#{repeatBean.items}" var="item">
            <tr>
                <td><h:outputText value="#{item.code}" id="item1" /></td>
                <td><h:outputText value="#{item.price}" id="item2" /></td>
            </tr>
        </a4j:repeat>
    </tbody>
</table>

Each row of a table contains two cells: one showing the item code, and the other showing the item price. The table is generated by iterating through items in the repeatBeans.items data model.

⁠12.1.2. Limited views and partial updates

The <a4j:repeat> component uses other attributes common to iteration components, such as the first attribute for specifying the first item for iteration, and the rows attribute for specifying the number of rows of items to display.

Specific cells, rows, and columns can be updated without sending Ajax requests for the entire collection. Components that cause the change can specify which part of the table to update through the render attribute. The render attribute specifies which part of a table to update. The updated parts relate to where the action component is placed relative to the table:

Action components inside the table

Use render=componentID where the component identified by componentID is in the same row as the action component. The action component updates the single specified component, as demonstrated in Example 12.2, “Update a single component”.

⁠

Example 12.2. Update a single component

<rich:column>
   <a4j:commandButton render="col"></a4j:commandButton>
</rich:column>
<rich:column>
   <h:outputText value="#{car.model}" id="col"/>
</rich:column>

Action components outside the table

Use render=tableId:rowId:cellId to specify the cell to update. The action component updates the cell with an identifier of cellId, which is within the row with an identifier of rowId, which is within the table with an identifier of tableId.

Instead of a specific identifier, any of the references could be variables, as demonstrated in Example 12.3, “Use variables to specify references”.

⁠

Example 12.3. Use variables to specify references

render=tableId:@rows(bean.rowToUpdate):cellId

The @rows function accepts a collection of row keys to be updated. Similarly the table@body shorthand can be used to specify that the entire table body should be updated.

⁠12.1.3. Reference data

component-type: org.richfaces.Repeat
component-class: org.richfaces.component.UIRepeat
component-family: javax.faces.Data
renderer-type: org.richfaces.RepeatRenderer
handler-class: org.richfaces.taglib.html.RepeatHandler