commandSortHeader

The commandSortHeader component is used in conjunction with a dataTable. The commandSortHeader renders a clickable column header facet allowing the user to toggle the sort order of data in the table, either ascending or descending based on the values in the column.

The commandSortHeader can be used to provide a user-controlled data sorting capability to a dataTable.

The following code shows how to create a basic commandSortHeader component:

<ice:dataTable
        var="car"
         value="#{list.cars}"
         sortColumn="#{list.sort}"
         sortAscending="#{list.ascending}"
         preserveDataModel="true"
         preserveSort="true">
  
        <f:facet name="header">
                 <ice:outputText value="(header table)"  />
         </f:facet>
 
        <f:facet name="footer">
                 <ice:outputText value="(footer table)"  />
         </f:facet>
  
        <ice:column>
 
                <f:facet name="header">
                         <ice:commandSortHeader columnName="type" arrow="true">
                                 sort Type
                         </ice:commandSortHeader>
                 </f:facet>
 
                <ice:outputText value="#{car.type}" />
 
                <f:facet name="footer">
                         <h:outputText id="ftr1" value="(footer col1)"  />
                 </f:facet>
 
        </ice:column>
  
        <ice:column>
 
                <f:facet name="header">
                        <ice:commandSortHeader columnName="color" arrow="true">
                                sortColor
                        </ice:commandSortHeader>
                </f:facet>
 
                <h:outputText value="#{car.color}" />
 
                <f:facet name="footer">
                        <ice:outputText id="ftr2" value="(footer col2)"  />
                </f:facet>
 
        </ice:column>
 
</ice:dataTable>