DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
64d1bb612007FordOrange
623cb1cc1975FiatGreen
8c360e701971AudiMaroon
7c20924f1988HondaBlue
cc4429dc2005VolvoYellow
33e66b762008AudiOrange
c0d346a21984RenaultMaroon
1f87c94c1982HondaBlue
9ccd81c11962AudiOrange
faa1ed341998JaguarBlack
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
ad43ce6e2001MercedesBrown
8a7a9fc32002VolvoBlue
fd403cce2007VolkswagenWhite
3e09bfac1985JaguarBrown
3e4056962001FordRed
9c1f030e1993JaguarMaroon
c9563fe21981VolkswagenGreen
949d22941962FordSilver
01b152a72007MercedesBrown
5f2d5b8f1976VolvoRed
192efd9a1961BMWWhite
87d768e11974RenaultOrange
8dc583441963VolvoWhite
0bbb82d91965VolkswagenBrown
1db0b4ec1994FiatMaroon
e88276301970FiatBlue
cafe2f221995HondaYellow
a2b25b6b1968VolvoSilver
7c92f4b61966VolvoBlue
96421f061999RenaultYellow
b01b93b41985FiatMaroon
5a3d45b81985FiatBlue
fecce5b41998FordBlue
3e5480331986JaguarBlack
00b9ea041999JaguarGreen
d5dcabe31994JaguarWhite
8c39fddf1966BMWBlue
d35325a41976HondaBrown
80d4b4d02008MercedesOrange
63a82cc41981HondaMaroon
13b841db2003HondaBlue
da71d43d1979AudiBlack
8a44d3e81994VolvoSilver
82c5938e1963FordMaroon
4f9ac4cb2004RenaultGreen
0d99ca101970AudiWhite
08c05fb62007AudiBlack
36f6817d1975AudiMaroon
0dcaee6d1980HondaMaroon
368f2d4b2005MercedesYellow
9aa147fe1963VolkswagenOrange
583eeaa42006RenaultBrown
d0afc9652007FordBrown
03c675751964BMWBlue
4d263e4d1973RenaultSilver
263142451972VolvoGreen
d81dd4421987MercedesOrange
52e3e9681972BMWYellow
43f8a5c51964FiatSilver
c4d9887d2009VolkswagenBlue
<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>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.