Data table components

The data table is a Faces component you can add to a Faces JSP page to display application data. It is a table-like control for displaying data from multiple database records. It consists of one or more columns, each with a header area and a data area. It is the data area of the column that repeats for each record.

You typically bind a data table to a record list or other data source, and the data table displays the data belonging to that record list. The data table contains columns, which act as containers for Faces components.

There are multiple ways to create a data table.

• Drag a record list from the Page Data View if the data source has already been defined. This is the easiest way to create a data table, record list, array, java.lang.Collection, or javax.faces.model.DataModel object.

• Drag a record list from the Data and Services drawer of the Palette and then define the data source.

• Drag a data table from the Faces components drawer of the palette to the Faces JSP page. Then, create the columns you'll need, add input, output, or other components to the columns, and bind data to the components in the table. This last method of creating a data table usually takes the most time but does give you design flexibility.

The data table offers great flexibility in how it is rendered on the user interface of your application. You can customize it in a variety of ways:

• Add, remove, and change the order of columns

• Format text and background, Can also modify the css classes for dataTable itself, the columns, rows, header and footer

• Modify the CSS classes for the data table itself and for the columns, rows, header, and footer

• Add header, footer, and margins

• Add paging for results display

You can perform actions such as Read, Update, and Delete on the data displayed in a data table, and you can also create new data records. There are several ways to associate actions with a data table:

• Associate an action with the data table, so that when a user clicks anywhere within a row of a table, the action is applied to the relational record for that row.

• Enable row selection for the data table, and then add buttons to perform actions on the selected rows. You should enable row selection when you want an action to apply to one or more rows. If you want an action to apply to just one row, you can associate an action with the data table (see previous bullet).

• Add a Link - Command component to another component already in the data table. When the user clicks the Link - Command component, a different page might open. A Link - Command component is typically used for a transactional operation to manipulate data.

• Add an Actions column and then drag Link - Request components into each row of the column. When the user clicks the Link - Request component, an action is applied to the selected row. Optionally, the user can go to a different page (for example, a confirmation page). A Link - Request component is typically used to navigate.

• Enable row categorization for the data table so that you can group similar rows together so that the end user clicks a twistie to expand or collapse the similar rows.

• Enable row edit for the data table so that the end user has the ability to edit a row.

Important: If the component, whose value you want to use as a parameter is contained by a data table, manually add $$AJAXROW$$<component client id> to the parameter set. Where <component client id> is a client ID of the component whose value you want to send as the parameter. For example,

		
<h:form id="form1" styleClass="form">
     <hx:dataTableEx border="0" cellpadding="2" cellspacing="0" 
        columnClasses="columnClass1" headerClass="headerClass" 
        footerClass="footerClass" rowClasses="rowClass1, rowClass2" 
        id="tableEx1" styleClass="dataTableEx" value="#{company.employeeList}" 
        var="varEmployee">
          <hx:columnEx id="columnEx1">
               <f:facet name="header">
                    <h:outputText id="text1" styleClass="outputText" value="Id">
                    </h:outputText>
               </f:facet>
               <h:outputLink id="link1">
                    <h:outputText id="text2" styleClass="outputText" 
                       value="#{varEmployee.name}">
                    </h:outputText>
                    <hx:behavior event="onclick" behaviorAction="get;stop" 
                       targetAction="detailsBox"/>
               </h:outputLink>
               <h:inputHidden id="empId" value="#{varEmployee.Id}"/>
          </hx:columnEx>
     </hx:dataTableEx>
     <hx:panelBox id="detailsBox" styleClass="panelBox">
          <h:outputText id="text2" styleClass="putText" 
             value="#{company.employeeList[param.empId].department}">
          </h:outputText>
     </hx:panelBox>
     <hx:ajaxRefreshRequest id="ajaxExternalRequest1" target="detailsBox" 
 params="$$AJAXROW$$form1:tableEx1:empId" >
     </hx:ajaxRefreshRequest>
</h:form>

The parameter set is a list of IDs separated by semicolons. The value of these components are retrieved and appended as params to the URL used to get the new content. The name of the param is the ID of the component.

 

Related tasks

Adding data to a JSF page using data viewing components

Editing a property template for JSF library components

Binding data to a JSF component

Adding and configuring a data table

Adding a header and footer to a data table

Managing columns in a data table

Adding paging to a data table

Adding row actions

Adding row category support to a data table

Passing parameters with data tables

Passing parameters between JSP files

---