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:columncolumn 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.
About these ads

5 Comments

Filed under ADF

5 responses to “Display row number in af:table

  1. sdoulger

    Nice post!

  2. anonimous

    Great !!, it’s easy, and clare,

    Es facil y sencillo.

  3. Sura

    Thanks……
    Was searching for this…..very nice and simple way

  4. Don

    cool, very conveniently described

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s