Reorder ADF table column using DisplayIndex property

Sharing is Caring
This post is about a very simple use case that is reordering of ADF table column at runtime.

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 display index attribute is honoured 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 the 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 the implementation part-

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

 

Page structure window –

    • Next step is – Create a HashMap and it’s accessors in the managed bean

 

private HashMap reOrderMap = new HashMap();

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

public HashMap getReOrderMap() {
return reOrderMap;
}

 

<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 the page to change display 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 order 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

Related Posts

0 thoughts on “Reorder ADF table column using DisplayIndex property”

Leave a Reply

Your email address will not be published. Required fields are marked *