Important notice: Richfaces framework reached End of Life in 2016. Therefore, you cannot expect fixes or enhancements unless you fork the project and upgrade yourself the framework. We recommend reading these guidelines, if you want to modernize your Richfaces application: How to migrate Richfaces Web applications to another Web UI
The Datatable is used to show tabular data. Additional to the standard <h:dataTable>, this component enables row and column spans for columns, a flexible layout for a header and a footer.
DataTable supports “master-detail” pattern and allows to show the combination of a master table and detail sub-tables.
The following example shows a rich:dataTable component in use:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head></h:head>
<h:body>
<rich:panel header="Richfaces dataTable">
<rich:dataTable value="#{TaskListBean.dataList}" var="dataItem"
rows="4" columnClasses="50,100,100,100"
onRowMouseOver="this.style.backgroundColor='#B5F3FB'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'"
width="350">
<f:facet name="caption">
<h:outputText value="This is the caption" />
</f:facet>
<f:facet name="header">
<h:outputText value="Trouble Ticket Systems" />
</f:facet>
<rich:column colspan="4">
<h:outputText value="Trouble Tickets opened" />
</rich:column>
<rich:column>
<f:facet name="header">Ticket Id</f:facet>
<h:outputText value="#{dataItem.taskInstanceId}" />
</rich:column>
<rich:column>
<f:facet name="header">Status</f:facet>
<h:outputText value="#{dataItem.taskNode}" />
</rich:column>
<rich:column>
<f:facet name="header">Actor</f:facet>
<h:outputText value="#{dataItem.actorId}" />
</rich:column>
<rich:column>
<f:facet name="header">Description</f:facet>
<h:outputText value="#{dataItem.description}" />
</rich:column>
<f:facet name="footer">
<h:outputText value="This is the footer" />
</f:facet />
</rich:dataTable>
</rich:panel>
</h:body>
</f:view>
</ui:composition>
The view needs a Backing bean to hold the Datalist of objects.
package com.sample;
import java.util.ArrayList;
import java.util.List;
@ManagedBean(name="manager")
public class TaskListBean {
private ArrayList dataList;
public void loadDataList() {
dataList = new ArrayList();
TaskListData data1 = new TaskListData();
data1.setTaskInstanceId(1000l);
data1.setActorId("Willy smith");
data1.setTaskNode("In Charge");
data1.setDescription("CR 123456");
TaskListData data2 = new TaskListData();
data2.setTaskInstanceId(1001l);
data2.setActorId("Frank Sinatra");
data2.setTaskNode("Rejected");
data2.setDescription("CR 654321");
dataList.add(data1);
dataList.add(data2);
}
public List <TaskListData> getDataList() {
loadDataList();
return dataList;
}
}
package com.sample;
public class TaskListData {
private String taskNode;
private long taskInstanceId;
private String actorId;
private String description;
public String getActorId() {
return actorId;
}
public void setActorId(String actorId) {
this.actorId = actorId;
}
public String getTaskNode() {
return taskNode;
}
public void setTaskNode(String currentNode) {
this.taskNode = currentNode;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public long getTaskInstanceId() {
return taskInstanceId;
}
public void setTaskInstanceId(long taskInstanceId) {
this.taskInstanceId = taskInstanceId;
}
}
As you can see the dataList holds a couple of TaskListData objects, which are diplayed in the view.
JSF 1.X users: You need to register the Bean into facesconfig.xml instead of using the @ManagedBean annotation
<faces-config> <managed-bean> <managed-bean-name>TaskListBean</managed-bean-name> <managed-bean-class>com.sample.TaskListBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> </faces-config>
This is the datatable created:
RichDatatable component is similar to the standard JSF Datatable: in this sample you defined two styles (row1,row2) which will be used to alternate the colour of the single rows. Also you define the width of the single columns with columnClasses and the background when you move Over/out with the mouse.
<rich:dataTable value="#{TaskListBean.dataList}" var="dataItem"
rowClasses="row1, row2" id="taskList" rows="4"
columnClasses="50,100,100,100"
onRowMouseOver="this.style.backgroundColor='#B5F3FB'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'"
width="350">
Notice at the bottom the datascroller which will be used to scroll between items when the items are more then the “rows” field of the datatable.
<rich:datascroller align="left" for="taskList" maxPages="20" />Found the article helpful? if so please follow us on Socials
