DataTable - Sort

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

Single Column Sort
IdYearBrandColor
9e2d99ba1961HondaWhite
548fee581971VolvoGreen
0073713d2005VolkswagenBrown
9e0947912000VolvoGreen
efa0b9a71992VolkswagenBlue
2b8e95302001VolvoBlue
2530f35c1990VolvoBlue
a63b31571979FiatWhite
53c96cde1986JaguarYellow
c1221ab61992RenaultBlue
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
5500fdea2001FiatBrown
ca2e3ae51969JaguarBlack
720957bf1986FiatWhite
4d9b07541991FiatGreen
b6e278a41976VolkswagenWhite
fd75ce121983JaguarBlack
85a9f1962002RenaultMaroon
db677c7d1988VolkswagenYellow
8d97e49e1962HondaSilver
6cd516811978JaguarGreen
731970211962AudiYellow
d510bbf81963BMWWhite
a4c9b6911965HondaBlack
99a33b601994VolkswagenWhite
ee84ec071979BMWBlue
84b3196c1998JaguarGreen
29be860e1970HondaGreen
ea5874051986VolvoSilver
ad5d828a1979FiatRed
2904cef71988MercedesSilver
692e39e11966HondaBrown
8d0475e71971VolkswagenOrange
d97e6cab1975HondaBlack
42bf269c1992VolvoYellow
b8e01e7c1970FordBlue
b6b7cc7a1991JaguarYellow
e075b8d81993AudiSilver
45bed44a1970JaguarBlue
79d839ad1989VolvoBlue
c944f79d1963RenaultMaroon
c7f65fa81972AudiBrown
1267b4b11989VolkswagenBlack
633a07071990RenaultGreen
a588b5101998BMWMaroon
3f79f3a62007JaguarWhite
65bcf3871962AudiWhite
96b1f5c31995MercedesGreen
55106f161983AudiBlack
1b23e7fd1972RenaultBlue
451d1a592006RenaultBlue
4e700bf41968BMWBlue
e2abfbe21961JaguarRed
4255b0781977FiatWhite
34509deb1996FiatGreen
67db36861969MercedesBlue
f062d46b1981RenaultWhite
849dcc392009BMWOrange
a35cbff62009MercedesOrange
fb611f421995HondaOrange
76f8bd961993RenaultBlack
<style type="text/css">
    .ui-datatable input {
        box-sizing: border-box;
        width: 100%;
        -webkit-box-shadow: none;
        box-shadow: none !important;
    }
</style>


<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>