| There are two ways to scroll through tables with lots of rows: with a scrollbar or with some other type of control that moves through the rows. We explore both techniques in this section. Scrolling with a Scrollbar Scrolling with a scrollbar is the simplest solution; simply wrap your h:dataTable in an HTML div, like this:
<div style="overflow:auto; width:100%; height:200px"> <h:dataTable...> <h:column> ... </h:column> ... </h:dataTable> </div>
The application shown in Figure 5-16 is identical to the application discussed in "Database Tables" on page 179, except that the data table is placed in a scrollable DIV as shown above. Figure 5-16. Scrolling Tables with Scrollable DIVs 
Scrollbars are nice from a usability standpoint, but they can be expensive for large tables because all the table data is loaded at once. A less resource-intensive alternative is to scroll through tables with page widgets, an approach that requires only one page of data at a time. Scrolling with Page Widgets Scrolling with page widgets is more efficient than scrolling with a scrollable DIV, but it is also considerably more complex. In Chapter 12, we show you how to implement a pager widget that you can use with any table created with h:dataTable. Figure 5-17 shows an example of that pager. Figure 5-17. Scrolling with the Core JSF Pager 
The application shown in Figure 5-17 uses a data table that displays customer orders from a database. See Chapter 12 for implementation details of the pager widget. | 