advanced code snippet search

Posted By

adriamooney on 07/22/10


Tagged

class header tables jsf


Versions (?)

Changing Header Class (CSS) in JSF Datatables - Codedrop™ Weblog

 / Published in: Java
 

URL: http://www.codedrop.ca/blog/archives/46

Something I have always found annoying about JSF datatables is the limitation to only apply one header class style to the entire table. This is un-functional for datatables that would display monetary amount or other data that is typically right aligned whereas descriptive columns are left aligned. The table doesn’t look very nice if the heading don’t match the columns.

Expand | Embed | Plain Text 
  1. <h:panelGrid width=”100%” id=”memberTransactionTableBody” border=”0″ cellspacing=”0″ cellpadding=”0″ columns=”1″>
  2. <h:column>
  3. <h:form id=”form”>
  4.  
  5. <h:dataTable rowClasses=”accountTransactionRowDefault, accountTransactionRowAlternate”
  6. headerClass=”accountColumnHeader StrongText”
  7. footerClass=”accountColumnFooter”
  8. width=”100%”
  9. cellpadding=”0″ cellspacing=”0″ border=”0″ columnClasses=”account-padding,account-date,account-description,account-debit,
  10.  
  11. account-credit,account-currency,account-status”
  12. styleClass=”accountTransactionText”
  13. var=”transaction”
  14. value=”#{transactionHandler.transactionBean.transactionHistory}”
  15. rows=”40″>
  16.  
  17. <h:column> </h:column>
  18.  
  19. <h:column>
  20. <f:facet name=”header”>
  21. <div style=”float: left;”>
  22. #{messages['message.account.column.date']}
  23. </div>
  24. </f:facet>
  25. <h:outputText value=”#{transaction.dateTimeStamp}”/>
  26. <f:facet name=”footer”> </f:facet>
  27. </h:column>
  28.  
  29. <h:column>
  30. <f:facet name=”header”>
  31. <div style=”float: left;”>
  32. #{messages['message.account.column.description']}
  33. </div>
  34. </f:facet>
  35. <h:outputText value=”#{transaction.description}”/>
  36. </h:column>
  37.  
  38. <h:column>
  39. <f:facet name=”header”>
  40. #{messages['message.account.column.debit']}
  41. </f:facet>
  42. <h:outputText value=”#{transaction.debit}”/>
  43. </h:column>
  44.  
  45. <h:column>
  46. <f:facet name=”header”>
  47. #{messages['message.account.column.credit']}
  48. </f:facet>
  49. <h:outputText value=”#{transaction.credit}”/>
  50. </h:column>
  51.  
  52. <h:column>
  53. <f:facet name=”header”>
  54. #{messages['message.account.column.currency']}
  55. </f:facet>
  56. <h:outputText value=”#{transaction.currency}”/>
  57. </h:column>
  58.  
  59. </h:dataTable>
  60.  
  61. </h:form>
  62. </h:column>
  63. </h:panelGrid>

Report this snippet  

You need to login to post a comment.