DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
eab9b5f92003AudiBlue
413b3a9f1993HondaBlue
cc2419d32009VolkswagenOrange
f9f347592008FiatBlack
fa783b971972AudiRed
b3270c7e1970BMWRed
2e18766a1997BMWGreen
1ac7ae731973BMWGreen
0d88f3fa1967VolvoGreen
2cd4c4531992VolkswagenBlue
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
43a37ef41989RenaultWhite
3388909c2009FiatOrange
6870caff1964VolvoSilver
55f23ff11977HondaMaroon
3687479d1999JaguarWhite
8709c0091993MercedesGreen
c95956c01990VolvoSilver
341e22e81974MercedesRed
a08213d11983FiatWhite
c8e3194b1976FiatGreen
1f2636fd2003RenaultRed
7ff556d41994MercedesYellow
193a4abf1964BMWOrange
544119e01967VolvoRed
6c8832a62002FiatWhite
19a52d891969VolvoYellow
e59dbd021998FordBrown
5a052b931960FiatBrown
aaffb8ef1986RenaultOrange
9c6031c22007FordMaroon
afe853ac1993AudiMaroon
04a0c9791963VolvoMaroon
0c7b33711985BMWMaroon
94a853ac1961FordSilver
94b850891979VolkswagenWhite
0b03f5391971FiatMaroon
1036da9a1973RenaultBlack
a1b568521969VolvoBlack
4bfd432a1995FiatMaroon
ac9d3acc1989HondaBlue
c3763a522001MercedesBlue
1a67f7dd1999JaguarBlue
aef0bf821997MercedesYellow
721e6a652009HondaOrange
5c31497d1987JaguarBlack
8b213ea01978FiatBlue
c33ed35a1997FordBlue
fffce05c1996HondaWhite
1bb4ca3a1974VolvoMaroon
caf0cd1c1980JaguarBlue
88cb60711995VolvoBlack
3f9be63d2005VolkswagenGreen
da38bc811964JaguarSilver
82e4bf7b1988RenaultBlue
a7c42a771984VolkswagenYellow
76c7adb31999VolkswagenRed
78d0083b2005RenaultYellow
76edafcd1976VolvoGreen
b3a6eaa81985MercedesMaroon
158714321974HondaYellow
<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.