Adding sorting to a data table

With the Data Table component, you can display data from a database or other data source in a table format.

Before you begin

About this task

You can use the sorting function in the data table component to make individual columns in a data table sortable. First you will use the sort function to add a sort icon to the column header and make the column header clickable. Then you will write the code that performs the data sorting in the Quick Edit view. You will also create a new command button in order to reset multiple columns at the same time.

Procedure

To add sorting to a data table:

Right-click a column in the data table for which you want to sort and select Properties.
In the hx:columnEx tab of the Properties view, select a sort order from the Sort order list. For information about each sort option, refer to Sort order options.
Repeat the steps for each column for which you want to sort. You have added the sortHeader tag to each of the columns that you want to sort. The sortHeader tag provides a visual representation of the current sort state and passes that information to the server when requesting a particular sort order.
When a user clicks the arrow in the column header, a server-side method is called. To write this method, right-click the column header and select Edit Events to write the code to sort the data. The Quick Edit view opens.
When writing the code for this method, you can use one of two public sortHeader component APIs to find out which column is being sorted and what sorting order is requested. These methods are UISortHeader.getSortHeaderId() and UISortHeader.getCurrentSortOrder() respectively.

The code that you write performs the data sorting, so that when the page re-renders, the order of the rows in the data table changes to reflect the sort selected.

Tip: To learn more about how to sort data in a data table, refer to the article Creating a sorted JavaServer Faces Widget Library dataTable using Rational® Application Developer V7.0.

Results

For more information on sorting, see:

Sort order options
Configuring the sort attributes
Resetting multiple columns

Sort order options

Each sortable column can have a default value of one of the values shown in Table 1. The default value is the initial sort order of the column when the page with the data table opens. The third column, Attribute Value, shows the value to set in the JSP for each sort order.

About this task

Table 1. Sort order options
Sort Order	Description	Attribute Value
Ascending Off	Sort can be toggled between Sort Ascending and Not Sorted. Sorting not turned on when the page loads.	sortasc
Ascending On	Sort can be toggled between Sort Ascending and Not Sorted. Sorting is turned on when the page loads.	sortascon
Descending Off S	Sort can be toggled between Sort Descending and Not Sorted. Sorting is not turned on when the page loads.	sortdesc
Descending On	Sort can be toggled between Sort Descending and Not Sorted. Sorting is turned on when the page loads.	sortdescon
Bidirectional	Sort can be toggled among Sort Ascending, Sort Descending, and Not Sorted. Sorting is not turned on when the page loads.	sortbi
Bidirectional Up	Sort can be toggled among Sort Ascending, Sort Descending, and Not Sorted. Sort Descending is turned on when the page loads.	sortbiup
Bidirectional Down	Sort can be toggled among Sort Ascending, Sort Descending, and Not Sorted. Sort descending is turned on when the page loads.	sortbidown

Only one column can be sorted at a time. When you sort one column, all of the other columns automatically revert to the default sort orders.

Configuring the sort attributes

You can set all of the <hx:sortHeader> attributes in the Properties view.

About this task

Table 2. Sort attributes
Attribute	Description
id	In the sorting action that you write, you can use this attribute to identify which `sortHeader` the user has selected.
defaultSortOrder	Default sort order for this column.
srcAscending, srcAscendingOn, srcDescending, srcDescendingOn, srcBi, srcBiUp, srcBiDown	The sort arrow image comes from the `<hx:sortHeader>` style class by default. You can use these attributes to override the images specified in the stylesheet.
styleClass	The style class that the sort header uses.

Resetting multiple columns

You can create a new command button in order to reset multiple columns at the same time.

Procedure

To create a new command button and reset multiple columns:

Create a new command button (commanExButton) in a page.
Configure the action of the button and reset the backing beans values for all the columns to UISortHeader.SORT_BI, UISortHeader.SORT_ASC or UISortHeader.SORT_DESC. Based on the type of sorting used in the columns, the three backing beans values mean sorting is off. For example, in the case of bidirectional sorting, the method in charge of resetting the columns inside the backing beans would look like this:
```
public String resetSorting(){
	columnA_SortOrder = UISortHeader.SORT_BI;
	columnB_SortOrder = UISortHeader.SORT_BI;
	columnC_SortOrder = UISortHeader.SORT_BI;
	return "outcome";
}
```
See the Sort order options table for more description.
Add a parameter to the button of the page, which resets the sort arrow icons. Depending on the type of sorting selected, the value of the parameter can be sortbi, sortasc or sortdesc. For example, in the case of bidirectional sorting, the sorting off value is sortbi. The parameter would look like this:
```
<f:param name="sort_order" id="param1" value="sortbi"></f:param>
```
The whole button tag would look like this:
```
<hx:commandExButton
		 type="submit"
    value="Reset"
    styleClass="commandExButton"
    id="button1" action="#{backingBean.resetSorting}">
	<f:param name="sort_order" id="param1" value="sortbi"></f:param>
</hx:commandExButton>
```

Feedback