DataTable - Sort

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

Single Column Sort
IdYearBrandColor
8e671ea62007VolkswagenBlack
402965c61975BMWOrange
1f7029131987HondaMaroon
13dcf4592009AudiMaroon
e1a2ece32005RenaultBrown
353e89c61999HondaOrange
0ea1f4a32009VolvoMaroon
29754f3b1977VolvoBlack
1eab5a191976RenaultBlack
feadfcdb1967VolvoRed
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
a8ebfbf21992BMWGreen
84dc495a1963BMWSilver
afbddba01968RenaultGreen
75bf20af1995RenaultOrange
f8a12d3c1981RenaultBlack
3f7c32451980FordBrown
cd879b171990VolvoRed
9432d6731977BMWGreen
3ab6d2381984VolvoRed
d65a7ccc1992FordWhite
5dbca08e1987MercedesOrange
3cd359e31980VolvoGreen
710667a11979BMWSilver
b2490afc2000FiatYellow
654781831973FordBlack
afd128752008MercedesWhite
128d45751989AudiSilver
7daf19a72001MercedesOrange
937cd81c2007BMWBlue
77977d0f1997AudiMaroon
bf554d062001VolkswagenBrown
d0689ae31994FordYellow
61e0b3761974RenaultYellow
4da2294a2004HondaGreen
fbec2e6d1991BMWRed
ff8532b41988HondaMaroon
1cee378f1960VolvoGreen
5d4542781986FiatRed
a3ddca731988FordMaroon
257ae73a1968HondaBrown
0d387a7c1981JaguarWhite
3557ee272004FiatBrown
1db0c22c1983FiatRed
f0372bf41965VolvoGreen
5b0be2be1970VolkswagenOrange
5d4ea8a11979AudiGreen
2b0f2c411974BMWBlack
44592f2a2007HondaBlue
e130807a1966HondaOrange
444351bf1991VolvoBlue
24acccc21981RenaultGreen
5a2bdf7d1971FiatBrown
cd9502c92008HondaBlue
ba2e3f0c2002MercedesYellow
fb33293c1971VolkswagenMaroon
c6c762dc1992MercedesWhite
4efec9c72004FiatOrange
7273c4f71972MercedesOrange
349a1a7b2008VolkswagenBrown
958b8be91969VolkswagenWhite
<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>