DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
e25847842002FiatWhite
a1ea96d91978FordMaroon
b527597f2001JaguarBrown
722f11681977MercedesGreen
89d03caa1973FordOrange
a0759ee62002RenaultOrange
31a05bc81987FiatWhite
90128b311960FordBrown
10982fea1994FiatBlue
3d9d9eb61977VolvoRed
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
1e4f03691998RenaultBlack
8bbda9e81979JaguarWhite
b9cbc00a1967MercedesOrange
283148051966FiatYellow
c9f0a0851987JaguarBrown
87ff98851961AudiGreen
2b4068ca1993VolvoBrown
c5bcf4f12009HondaBrown
243314b11989FiatOrange
537a3e281985FordGreen
a1d8f86e1964AudiBlue
45eb30271992BMWBrown
479f91271967HondaGreen
fa52385e2003FordYellow
c4a448001987FiatGreen
f1a36e781976AudiWhite
006834951996BMWBrown
a5ef33db1985VolvoWhite
2edce3001989BMWMaroon
76a5be221969BMWRed
79562d9e1971FordRed
3a10fa1f1976FiatMaroon
5a56aba11991VolvoOrange
9079d09e2009VolkswagenMaroon
4716b6291961BMWGreen
eb7e3a081999FordOrange
ac9699f41969RenaultSilver
493738421980VolkswagenSilver
ae4874de1993FordMaroon
2f406ade1985VolvoWhite
13a96f851977VolvoRed
31db7ffe1966FordSilver
261fbfbc2001AudiBrown
a359ae5e1990MercedesBlue
626c6fa11981BMWBlack
527dcadd1987VolkswagenBlack
f73f1b9d1981FordSilver
6c46e8ba2003RenaultOrange
a6e458a71968HondaWhite
726125f81992HondaSilver
9cf0aa731994VolkswagenBlack
df8228821979MercedesMaroon
ad733c862003FiatWhite
a3517a932006FordYellow
922abeae1974MercedesBrown
7737cca31996BMWMaroon
62da70c01992MercedesGreen
899c45752002AudiWhite
c7dbcde41980JaguarSilver
447a66eb1963HondaBrown
<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.