DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
1eaeedd41964FordWhite
c9d8c5a31989BMWRed
e535c8341973AudiRed
518696561995HondaBlack
dfbf54e31961FiatBlue
9b936ae81995HondaMaroon
aaa4edc21997BMWYellow
fe3fe5931974JaguarBlack
c67a93cf1967BMWOrange
a7261a591990HondaBrown
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
0401a9061966BMWYellow
2025b4111974HondaMaroon
19e0bcfb2003BMWWhite
5aca09c21967FordYellow
f7409d621996VolkswagenGreen
e92068022005BMWYellow
81ea80e71976AudiGreen
210a72271962JaguarWhite
b11d5d6b1995FiatGreen
bff5253f1974FiatBlue
a655c84e1979AudiSilver
46058b961985JaguarGreen
4839d4241967MercedesWhite
066903e01976VolvoYellow
30990a611971AudiRed
ff7985b32006FordBlack
c8a78a531968JaguarSilver
0eb6d4111989VolvoGreen
52f772251960VolkswagenBlack
c731297f1976MercedesBrown
8bc6f8ec1972VolvoRed
92c6bf9c2005RenaultMaroon
aff529921978VolvoWhite
0188d5342003MercedesWhite
be0a92b31972AudiBlue
413cbb7f1997VolkswagenOrange
51b6d5161978FiatBlue
9db253241985BMWOrange
6d0c98b52001RenaultMaroon
5fb1ac962009AudiWhite
9b797d181989RenaultYellow
a629869c1967AudiMaroon
8067f3ac1970JaguarSilver
2ef8ba071967FiatYellow
3772047d2001RenaultBrown
50fdd6d21990AudiBlack
e1929a131980FiatYellow
6550b4ce1996AudiRed
10ed803f1991FordYellow
f717169c2008AudiSilver
b3b181c41966VolvoMaroon
b9398bf91993FiatYellow
3b38ad1b1983HondaBrown
6111c4fb1985JaguarOrange
a50c4f571982HondaOrange
86f0c0491995BMWYellow
975a61951972VolkswagenBlue
ac8528d11979BMWWhite
14f1000f1983FordOrange
4c28d80b2002VolkswagenBlack
<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.