Datatable VS Repeat

A long long time ago, in an office not far away I pondered the need for so much variety in the VisualForce ‘structural’ component library. I mean, dataTables, pageBlockTables, outputPanels, panelGrids, repeats, panelBars.. jeez Louise. And when would I use them all? How should I combine them? If I type google in google will I break the Internet? Okay, I didn’t really ponder the last one, everyone knows that’s true.

Nowadays I’d like to think I have a feel for what to use, and when. More specifically I’m going to dig into when to use dataTables over repeats, and vice versa(The only real difference I can find between pageBlockTable and dataTable is that dataTable has a cool onhover JS handler that highlights the currently onhovered row, so I’m totally going to ignore pageBlockTable. Speak to the hand pageBlockTable, because the face ain’t listening).

DataTable is an excellent component for creating tabular lists of data, and as such I expect it would be the more commonly used of these two components. You can do some snazzy things with dataTables including using lists of classes as your value attribute(very useful when ‘extending’ objects through wrapper classes), and as mentioned above, the row the mouse pointer is above is highlighted, making for easy reading.

Repeat on the other hand is quite useful when used in conjunction with outputPanels(I like to set layout=”block” to make them render as divs) to create non-tabular repetitions of data. Sounds pretty obvious now that I’ve actually typed it:$ Oh well. Let’s consider the following example, you’re creating a clothing catalogue and need to output the image and name of each item in a single page. My would code would go something like this

<apex:outputPanel layout=”block”>

<apex:repeat value=”{!items}” var=”item>

<apex:outputPanel layout=”block” style=”width:100px;height:100px;float:left”> <!– the styling is important –>

<apex:image url=”{!imageViewUrl}{!item.imageId}” width=”100px” height=”80px”/>

<apex:outputText value=”{!item.name}” />

</apex:outputPanel>

</apex:repeat>

</apex:outputPanel>

Obviously you can combine repeat with most of the other ‘structural’ components, but the above example can be adapted for most(of my) situations. As an exercise you might want to try the above with panelGrids.  I find them useful when I have a predetermined number of columns that I wish to display. If we add the restriction that we can only display four items per row to the above example I would recommend replacing the outputPanels with panelGrids.

Feel free to experiment and combine these structures in any devilish manner you see fit. If you find any combination that works especially well for you I’d love to hear about it.