Multiple Line JSF Data Tables

Ok, so you need to create a multi row data table right? Now you want to do this with JSF and you see that you're up a creek without a paddle. This doesnt fit the norm for most "grid" layouts on the web. The standard JSF just doesnt allow for this with a datatable but you can use the panelgrid to get the results that you want. Here is how.

<br /> <h:dataTable value="#{reportListingReports.claimsToWork}"<br /> var="ctwb" rowClasses="list-row-even, list-row-odd"<br /> style="text-align: left; border-color: blue;" border="1"<br /> cellpadding="0" cellspacing="0" columnClasses="list-column-all"><br /> <h:column id="FileName"><br /> <h:panelGrid columns="6" cellspacing="0"<br /> columnClasses="report_cell_normal,report_cell_small,report_cell_normal,report_cell_normal,report_cell_small,report_cell_currency"><br /> <h:outputText value="#{ctwb.carrierName}   "<br /> escape="false"></h:outputText><br /> <h:outputText value="#{ctwb.loadedDate}   "<br /> escape="false"></h:outputText><br /> <h:outputLink<br /> value="jsfReportDetail.jsp?reportEntryGUID=#{ctwb.id}"><br /> <h:outputText value="#{ctwb.patLastName}, #{ctwb.patFirstName}" /><br /> </h:outputLink><br /> <h:outputText value="#{ctwb.patAccountNumber}"></h:outputText><br /> <h:outputText value="#{ctwb.beginDOS}"></h:outputText><br /> <h:outputText value="#{ctwb.totalCharge}">$<f:convertNumber<br /> currencyCode="US" maxIntegerDigits="10" minFractionDigits="2"<br /> groupingUsed="true" maxFractionDigits="2" /><br /> </h:outputText><br /> </h:panelGrid><br /> <h:outputText value="#{ctwb.claimStatusCode}"></h:outputText>: <h:outputText<br /> value="#{ctwb.claimMessage}"></h:outputText><br /> </h:column><br /> </h:dataTable><br />

Why don't we break this down to see what we do here.

Line 1 is our standard data table layout using the backing bean reportListingReports.claimsToWork

There is nothing new here, standard call to a backing bean for the JSF information. We set the variable ctwb for use in the column.

Line 5 is where we introduce the column. As you can see here the matching tag for this is at line 25. We use one column so we continue to iterate through our row data.

Line 6 introduces our panel grid. We use this to construct the real table here. We continue to go down through the panelgrid and output the different elements using the ctwb variable.

Line 22 closes out the panelgrid.

Line 23 gives us a summary row underneath. I use this for outputting a status message on the previous row but you could introduce another panelgrid or whatever you like here.

So to summarize what we have here is 2 visible rows of data on the screen. Presentation goes something like this.

ROW1COL1     ROW1OL2    ROW1COL3
ROW2BUT BUT IS PART OF DATA ROW 1

ROW2COL1     ROW2OL2    ROW2COL3
ROW3BUT BUT IS PART OF DATA ROW 2

You should have the idea. This gives nice formatting for anyone that needs to output a text description on the row but doesnt have the space on the screen (or in the data table column.

Now, remember you'll need to use the column classes and style the table correctly or this may not look just right for you. It is easy enough to acomplish with some css code.