JSF Showcase

h:dataTable

HtmlDataTable is a UIData (iterator) component that renders a table element with tabular data and is designed to be used in conjunction with h:column child component tags.

General Usage

The value attribute tag must be bound via EL to a model bean property (which is wrapped implicitly by JSF with a DataModel). The var attribute is used to introduce a variable name into the EL when iterating over the model.
Customers
First Name Last Name Date of Birth Country
Footer
John Adams Nov 30, 1735 United States
Samuel Adams Oct 27, 1722 United States
Josiah Bartlett Dec 21, 1729 United States
Carter Braxton Oct 16, 1736 United States
Charles Carroll Oct 19, 1737 United States
Benjamin Franklin Feb 17, 1706 United States
Elbridge Gerry Mar 03, 1701 United States
John Hancock Feb 23, 1737 United States
Thomas Jefferson May 13, 1743 United States
Francis Lewis Apr 21, 1713 United States

Source Code

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

	<h:form>
		<h:dataTable  rows="10"
			value="#{dataTableBacking.customerDataModel}" var="customer" headerClass="text-center"
			footerClass="text-center">
			<f:facet name="header">
				<h:outputText value="#{i18n['customers']}" />
			</f:facet>
			<h:column>
				<f:facet name="header">
					<h:outputText value="#{i18n['first-name']}" />
				</f:facet>
				<h:outputText value="#{customer.firstName}" />
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="#{i18n['last-name']}" />
				</f:facet>
				<h:outputText value="#{customer.lastName}" />
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="#{i18n['date-of-birth']}" />
				</f:facet>
				<h:outputText value="#{customer.dateOfBirth}">
					<f:convertDateTime pattern="MMM dd, yyyy" />
				</h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="#{i18n['country']}" />
				</f:facet>
				<h:outputText value="#{customer.country.countryName}"/>
			</h:column>
			<f:facet name="footer">
				<h:outputText value="#{i18n['footer']}" />
			</f:facet>
		</h:dataTable>
	</h:form>

</ui:composition>
@ManagedBean
@ViewScoped
public class DataTableBacking implements Serializable {

	// serialVersionUID
	private static final long serialVersionUID = 1715081848553221866L;

	// Injections
	@ManagedProperty(value = "#{customerService}")
	private transient CustomerService customerService;

	// Private Data Members
	private List<Customer> customerDataModel;
	private DataModel<Customer> customerOnDemandDataModel;
	private int rowsPerPage = 10;
	private String selectionMode = "checkbox";
	private String summaryPosition = "bottom";

	public List<Customer> getCustomerDataModel() {

		if (customerDataModel == null) {
			customerDataModel = customerService.getAllCustomers();
		}

		return customerDataModel;
	}

	public DataModel getCustomerOnDemandDataModel() {

		if (customerOnDemandDataModel == null) {
			customerOnDemandDataModel = new CustomerOnDemandDataModel(getRowsPerPage());
		}

		return customerOnDemandDataModel;
	}

	public int getRowsPerPage() {
		return rowsPerPage;
	}

	public String getSelectionMode() {
		return selectionMode;
	}

	public String getSummaryPosition() {
		return summaryPosition;
	}

	public void setCustomerService(CustomerService customerService) {

		// Injected via @ManagedProperty annotation.
		this.customerService = customerService;
	}

	public void setRowsPerPage(int rowsPerPage) {
		this.rowsPerPage = rowsPerPage;
	}

	public void setSelectionMode(String selectionMode) {
		this.selectionMode = selectionMode;
	}

	public void setSummaryPosition(String summaryPosition) {
		this.summaryPosition = summaryPosition;
	}
}
public class CustomerOnDemandDataModel extends OnDemandDataModel<Customer> implements Serializable {

	// serialVersionUID
	private static final long serialVersionUID = 1715725381634521866L;

	// Transient Data members
	private transient CustomerService customerService;
	private int rowsPerPage;

	public CustomerOnDemandDataModel(int rowsPerPage) {
		this.rowsPerPage = rowsPerPage;
	}

	@Override
	public int countRows() {
		return getCustomerService().getCustomerCount();
	}

	@Override
	public List<Customer> findRows(int startRow, int finishRow, List<SortCriterion> sortCriteria) {

		CustomerComparator customerComparator = new CustomerComparator(sortCriteria);
		List<Customer> customers = getCustomerService().getCustomers(startRow, finishRow, customerComparator);

		FacesMessage facesMessage = new FacesMessage("OnDemandDataModel: Fetched row index range " + startRow + "-" +
				finishRow);
		FacesContext facesContext = FacesContext.getCurrentInstance();
		facesContext.addMessage(null, facesMessage);

		return customers;
	}

	@Override
	public int getRowsPerPage() {
		return rowsPerPage;
	}

	protected CustomerService getCustomerService() {

		if (customerService == null) {

			// In order to accommodate clustered environments, the CustomerService is transient and therefore must be
			// self-injected.
			FacesContext facesContext = FacesContext.getCurrentInstance();
			Application application = facesContext.getApplication();
			ELResolver elResolver = application.getELResolver();
			ELContext elContext = facesContext.getELContext();
			customerService = (CustomerService) elResolver.getValue(elContext, null, "customerService");
		}

		return customerService;
	}
}
Liferay Faces Bridge Implementation 4.1.0 + Showcase Common 3.0.1 + Liferay Faces Util 3.1.0 + Mojarra 2.2.14