Thursday, March 1, 2012

ADF 11g: Hide table column headers

Sometimes, you want to display a table, but hide the column headers. This can easily be done with ADF Skinning. First, we need to create a skin. This can be done by creating a trinidad-skins file in your META-INF folder. Since we only want to adjust our table in this simple example, we'll extend from the default Fusion desktop skin

<?xml version="1.0" encoding="UTF-8" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
 <skin>
  <id>mySkin.desktop</id>
  <family>mySkin</family>
  <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
  <extends>fusion.desktop</extends>
  <style-sheet-name>/css/mySkin.css</style-sheet-name>
 </skin>
</skins>


As you can see, we refer to a css file there. Create it, and add this line to it:

.tableNoColumnHeaders af|column::column-header-cell {display: none}

Your skin has now been created, now we need to tell our application it has to use that skin. This is done in the trinidad-config.xml file, located in your WEB-INF folder. There, refer the skin-family to your own skin

<skin-family>mySkin</skin-family>

That's it. Your skin has been created. All that is left now is configure your table to use the style you just defined. Add following attribute to your <af:table> instance:

styleClass="tableNoColumnHeaders"

No comments:

Post a Comment