Added orderable=true to Liferay search container, controls appeared but order does not change

Question

I have written a Liferay search container, it works great.
Now I want columns to be sortable by alphabetical order, so I added orderable="true":

<liferay-ui:search-container
    <liferay-ui:search-container-results
        results="<%= BicycleLocalServiceUtil.getBicyclesByCompanyId(
                                         themeDisplay.getCompanyId()) %>"
        total="<%= BicyleLocalServiceUtil.getBicyclesCount() %>" />

    <liferay-ui:search-container-row
        className="com.example.portal.portlet.navigation.model.Bicycle"
        keyProperty="bicycleId"
        modelVar="bicycle"
        escapedModel="<%= true %>">

        <liferay-ui:search-container-column-text
            name="name"
            property="name"
            value="<%= bicycle.getName() %>"
            orderable="<%= true %>"
        />

        <liferay-ui:search-container-column-text
            name="nickname"
            property="nickname"
            orderable="<%= true %>"
        />

        <liferay-ui:search-container-column-jsp
            align="right"
            path="/html/bicycle/bicycle_actions.jsp" />
    </liferay-ui:search-container-row>

    <liferay-ui:search-iterator />
</liferay-ui:search-container>

The results looks good: but when I click on the name or any of the small arrows, the order of the rows below does not change.

Am I missing something?
I don't need any custom comparator as the value are simple Strings such as "Bob" and "Joe".

Answer 1

You need to specify the oderableProperty:

<liferay-ui:search-container-column-text
            name="nickname"
            property="nickname"
            orderableProperty="nickname"
            orderable="<%= true %>"
        />