Display row number in af:table

Environment (JDeveloper 11.1.1.5.0, ADF Faces)

In this post, I will explain how to add an extra leading column to display the row’s number. This example assumed that we have oracle.adf.RichTable in our page and we need to add extra column to hold the row’s number for each row. The steps to do this are:

1. From the structure window, right click on your first column and choose Insert before af:column → column from the menu.
2. Still in the structure window, right click the newly created column and choose Insert inside af:column → Output Text from the menu.
3. The oracle.adf.RichTable component has an attribute called varStatus.  The VarStatus provides contextual information about the state of the component to EL expressions. For components that iterate, varStatus also provides loop counter information. The common properties on varStatus include:
   • “model” – returns the CollectionModel for this component.
   • “index” – returns the zero based row index. we will use this property later.
4. Still in the structure window, click on the table, and from the property inspector expand the column group and check the name of the EL variable used to reference the varStatus information(default value is vs) as shown below.
   

   Table's varStatus attribute

5. Still in the structure window, click on the output text which was created on step 2, and from the property inspector set the value attribute to #{vs.index+1}.
6. Your column source should be like this:
   <af:column id=”c5″>
   <af:outputText value=”#{vs.index+1}” id=”ot1″/>
   </af:column>
7. Run your page, and you will see the row number for each row.