ADF Basics: Reorder ADF table column using DisplayIndex property

This post is about a very simple use case that is reordering of af:table column at run time. 

Ordering of columns in af:table is controlled by DisplayIndex property of af:column
Check what docs says-

Default Value: -1

The display order index of the column. Columns can be re-arranged and they are displayed in the table based on the displayIndex. Columns are sorted based on the displayIndex property, columns without displayIndex are displayed at the end, in the order in which they appear. The displayIndex attribute is honored only for top level columns, since it is not possible to rearrange a child column outside of the parent column.
Not supported on the following renderkits: org.apache.myfaces.trinidad.core

We can set DisplayIndex property for all columns in a sequence (1,2,3 etc) that we want to see on page

Here i am using a HashMap to change DisplayIndex of columns at runtime

Let's see implementation part-

• Prepare Model using Departments table of HR Schema and dropped viewObject as table on page 



  Page structure window -


• Next step is - Create a HashMap and it's acceessors in managed bean



    private HashMap reOrderMap = new HashMap();

    public void setReOrderMap(HashMap reOrderMap) {
        this.reOrderMap = reOrderMap;
    }

    public HashMap getReOrderMap() {
        return reOrderMap;
    }



• Now we will use this HashMap as part of expression in DisplayIndex property
  See af:table xml source-






<af:table value="#{bindings.Departments1.collectionModel}" var="row"
                              rows="#{bindings.Departments1.rangeSize}"
                              emptyText="#{bindings.Departments1.viewable ? 'No data to display.' : 'Access Denied.'}"
                              rowBandingInterval="0"
                              selectedRowKeys="#{bindings.Departments1.collectionModel.selectedRow}"
                              selectionListener="#{bindings.Departments1.collectionModel.makeCurrent}"
                              rowSelection="single" fetchSize="#{bindings.Departments1.rangeSize}" id="t1"
                              partialTriggers="::b1 ::b2">
                        <af:column sortProperty="#{bindings.Departments1.hints.DepartmentId.name}" sortable="true"
                                   headerText="#{bindings.Departments1.hints.DepartmentId.label}" id="c1"
                                   displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['DepartmentId']}">
                            <af:outputText value="#{row.DepartmentId}"
                                           shortDesc="#{bindings.Departments1.hints.DepartmentId.tooltip}" id="ot1">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.DepartmentId.format}"/>
                            </af:outputText>
                        </af:column>
                        <af:column sortProperty="#{bindings.Departments1.hints.DepartmentName.name}" sortable="true"
                                   headerText="#{bindings.Departments1.hints.DepartmentName.label}" id="c2"
                                   displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['DepartmentName']}"
                                   width="120">
                            <af:outputText value="#{row.DepartmentName}"
                                           shortDesc="#{bindings.Departments1.hints.DepartmentName.tooltip}" id="ot2"/>
                        </af:column>
                        <af:column sortProperty="#{bindings.Departments1.hints.ManagerId.name}" sortable="true"
                                   headerText="#{bindings.Departments1.hints.ManagerId.label}" id="c3"
                                   displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['ManagerId']}">
                            <af:outputText value="#{row.ManagerId}"
                                           shortDesc="#{bindings.Departments1.hints.ManagerId.tooltip}" id="ot3">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.ManagerId.format}"/>
                            </af:outputText>
                        </af:column>
                        <af:column sortProperty="#{bindings.Departments1.hints.LocationId.name}" sortable="true"
                                   headerText="#{bindings.Departments1.hints.LocationId.label}" id="c4"
                                   displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['LocationId']}">
                            <af:outputText value="#{row.LocationId}"
                                           shortDesc="#{bindings.Departments1.hints.LocationId.tooltip}" id="ot4">
                                <af:convertNumber groupingUsed="false"
                                                  pattern="#{bindings.Departments1.hints.LocationId.format}"/>
                            </af:outputText>
                        </af:column>
                    </af:table>



• Added a button on page to change dispaly index (to set value in HashMap), see managed bean code



    /**Method to change display order of af:table
     * @param actionEvent
     */
    public void changeOrderAction(ActionEvent actionEvent) {
        reOrderMap.put("DepartmentId", 2);
        reOrderMap.put("DepartmentName", 4);
        reOrderMap.put("ManagerId", 1);
        reOrderMap.put("LocationId", 3);

    }



• Run and check application, by default column ordering is this



       On click of Change Order button-




• Now again to reset columns ordering set DisplaIndex to -1 for all columns



    /**Method to reset display order of af:table by setting all values to -1
     * @param actionEvent
     */
    public void resetOrderAction(ActionEvent actionEvent) {
        reOrderMap.put("DepartmentId", -1);
        reOrderMap.put("DepartmentName", -1);
        reOrderMap.put("ManagerId", -1);
        reOrderMap.put("LocationId", -1);

    }

Sample ADF Application-Download
Cheers:) Happy Learning