DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
a5293d291994FordSilver
c4b80eed2006JaguarRed
80b231a01960BMWRed
eb8cb9201979JaguarOrange
66a429481975MercedesBlue
849c83312004FordBlack
d3b12f571993FiatSilver
a608b46e2001RenaultBrown
b7080f0e1976BMWBlack
7c1bf6021985VolvoBlue
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
0d077a031998JaguarGreen
08aea53d2008HondaBlack
ce95527f1992BMWBrown
e22d1dc31982BMWBlack
b877012b1968MercedesBrown
ea9ca9de1995RenaultSilver
7d78de3a2008AudiSilver
2c9b62482000FiatYellow
8c5ddd5a2004FiatSilver
f610ff082001VolvoBlack
0f90173f1997MercedesRed
2925ef281964RenaultBrown
816f39452009VolkswagenSilver
bc909b741994FiatBlue
85288e571960JaguarOrange
c8ba82f51999FiatBrown
8c1545ee1982VolvoBrown
2a1cd8671971JaguarRed
d36a7b9f2006VolkswagenBlack
8f8343e82003FiatWhite
2de4811e2009FiatRed
75a616981991AudiRed
73e963a42008AudiGreen
54ee6ed22004HondaSilver
8397310a1972VolvoRed
5f3dc3281967MercedesMaroon
205f38911992JaguarBlack
4023d34b1996VolkswagenMaroon
2d24207b2009VolkswagenYellow
f2f1d8562009BMWBlack
ee3434471972VolvoBlue
849ef8fa2003FordGreen
6f0e4fa11986JaguarSilver
0078d29e1967FordBlue
0eabf0401989MercedesBlue
62f98f9e1995VolvoWhite
d75ef7821991HondaBlue
3a71b0921995HondaRed
2c2494881968AudiSilver
3fccb1861960VolkswagenOrange
fa23ca0d2001FordOrange
1865583c1971AudiGreen
75bf56271981FordGreen
3afff06c1995HondaMaroon
dbef86171978VolvoBlack
69e411192004HondaRed
bce1e8581969VolvoOrange
32d4fede1971JaguarMaroon
bf3876081981JaguarSilver
4f1bdcd71988VolkswagenMaroon
<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.