dataTable frozen Rows

DataTable rows can be fixed in a scrollable table by using the frozenRows attribute that defines the number of rows to freeze from the start. Much the same way you can use the frozenColumns attribute to define the number of rows to freeze.

Let's see a practical example of it:

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
 
    
<h:form> 
     <p:dataTable var="c" value="#{dataScrollerView.countries}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
 
        <p:column headerText="Code" footerText="Code">
            <h:outputText value="#{c.code}" />
        </p:column>
        <p:column headerText="Name" footerText="Name">
            <h:outputText value="#{c.name}" />
        </p:column>
        <p:column headerText="Language" footerText="Language">
            <h:outputText value="#{c.language}" />
        </p:column>
         
    </p:dataTable>
</h:form>
</h:body>
</html>

As you can see from the following picture, the first column (frozenColumns = 1) is frozen so it will stay fixed as you scroll your dataTable to the right:

primefaces frozen columns

dataTable live scroll

Simple scrolling renders all data to client in one shot. When dealing with a huge set of data, live scrolling can be a lifesaver. In this case data is fetched whenever the scrollbar reaches bottom. Set liveScroll attribute of the dataTable to enable this option. Here is an example of it:

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>


	<h:form>
		<p:dataTable var="c" value="#{dataScrollerView.countries}"
			scrollRows="20" scrollable="true" liveScroll="true"
			scrollHeight="150" style="margin-bottom:0">

			<p:column headerText="Code" footerText="Code">
				<h:outputText value="#{c.code}" />
			</p:column>
			<p:column headerText="Name" footerText="Name">
				<h:outputText value="#{c.name}" />
			</p:column>

		</p:dataTable>
	</h:form>
</h:body>
</html>

Here is how the dataTable will be rendered:

datatable liveupload

Scrolling has 3 modes; x, y and x-y scrolling that are defined by scrollHeight and scrollWidth. These two scroll attributes can be defined using integer values indicating fixed pixels or percentages relative to the container dimensions.

Download code for this article

0
0
0
s2smodern