DataTable - Sort

Sorting is enabled with sortBy expressions. Both single and multiple column sorting are supported.

Single Column Sort
IdYearBrandColor
699119a01983FordGreen
03db89cf1961HondaBrown
1f5caf952009AudiBrown
e8fcb16b1992AudiBrown
acb79aea2005VolkswagenYellow
6702334d1989FiatMaroon
bd61f8441995FiatWhite
bd4d85e32001JaguarOrange
868e33cd1992VolvoBlack
6f3cb00b1989FiatWhite
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
678d70fe1963VolkswagenMaroon
54c8e55d1964AudiRed
88406a7c2008VolvoMaroon
51fd11b81968JaguarRed
23f5f18d1964RenaultWhite
8f07ccd91971VolvoWhite
aa75a4b51962VolvoBlack
841a108c1976FiatBlue
423e4d1f1986FiatBlue
344f5bb92000FordSilver
<h:form>
    <p:dataTable var="car" value="#{dtSortView.cars1}" style="margin-bottom:40px">
        <f:facet name="header">
            Single Column Sort
        </f:facet>
        <p:column headerText="Id" sortBy="#{car.id}">
            <h:outputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year" sortBy="#{car.year}">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand" sortBy="#{car.brand}">
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color" sortBy="#{car.color}">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dataTable var="car" value="#{dtSortView.cars2}" style="margin-bottom:40px">
        <f:facet name="header">
            Editable Values
        </f:facet>
        <p:ajax event="sort" skipChildren="false" />
        <p:column headerText="Id" sortBy="#{car.id}">
            <p:inputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year" sortBy="#{car.year}">
            <p:inputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand" sortBy="#{car.brand}">
            <p:inputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color" sortBy="#{car.color}">
            <p:inputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dataTable var="car" value="#{dtSortView.cars3}" sortMode="multiple">
        <f:facet name="header">
            Multiple Column Sort with Metakey
        </f:facet>
        <p:column headerText="Id" sortBy="#{car.id}">
            <h:outputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year" sortBy="#{car.year}">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand" sortBy="#{car.brand}">
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color" sortBy="#{car.color}">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
</h:form>