Get that good looking ADF RichTable

Here are some suggestions to build a good looking ADF table.

1. Use a panelBox for the table. It makes the table stand out from the background.
2. Put a panelCollection inside the panelBox. This will provide some very neat out of the box features- like column selection, detach, column ordering, etc. Detach is very useful when displaying large number of columns under space constraint. It will let the table open up in a popup occupying the entire page width. PanelCollection will also open up a good toolbar area where actions can be added.
3. Use that toolbar facet inside panelCollection and add action components there.
4. Set 'AFStretchWidth' styleClass to panelCollection.
5. Add the table to the panelCollection and pick required columns.
6. Set a column or 'last'  for columnStretching property of the table
7. Set contentDelivery as immediate and autoHeightRows to an appropr1ate value. This setting will display the vertical scrollbar when required based on autoHeightRows value.
8. Set a width for all columns except for the column picked for columnStretching. eg: width="200px"
9. Set column width using the inlineStyle property of column. eg: inlineStyle="height:25px"

This should provide the basic framework for a nicely formatted ADF table. Work with other visual attributes like horizontalGridVisible, inlineStyle, etc. to make the table even better.

Code for the basic layout options mentioned above:


<af:panelbox id="pb1" text="My Company Contacts">
          <f:facet name="toolbar">
          <af:panelcollection id="pc1" styleclass="AFStretchWidth">
            <f:facet name="menus">
            <f:facet name="toolbar">
              <af:toolbar id="t4">
                <af:activecommandtoolbarbutton icon="/resources/edit.png" id="actb4" text="Edit Person">
                <af:activecommandtoolbarbutton icon="/resources/delete.png" id="actb5" text="Remove Person">
                <af:activecommandtoolbarbutton icon="/resources/add.png" id="actb6" text="Add Person">
              </af:activecommandtoolbarbutton></af:activecommandtoolbarbutton></af:activecommandtoolbarbutton></af:toolbar>
            </f:facet>
            <f:facet name="statusbar">
            <af:table autoheightrows="20" columnstretching="last" contentdelivery="immediate" emptytext="#{bindings.XXX.viewable ? 'No data to display.' : 'Access Denied.'}" fetchsize="#{bindings.XXX.rangeSize}" horizontalgridvisible="true" id="t3" partialtriggers=":::soc1" rowbandinginterval="1" rows="#{bindings.XXX.rangeSize}" rowselection="single" selectedrowkeys="#{bindings.XXX.collectionModel.selectedRow}" selectionlistener="#{bindings.XXX.collectionModel.makeCurrent}" value="#{bindings.XXX.collectionModel}" var="row" verticalgridvisible="false">
              <af:column headertext="#{bindings.XXX.hints.FirstName.label}" id="c5" inlinestyle="height:25px" sortable="true" sortproperty="FirstName" width="200px">
                <af:outputtext id="ot4" value="#{row.FirstName}">
              </af:outputtext></af:column>
</af:table></f:facet></f:facet></af:panelcollection></f:facet></af:panelbox>

End product: