DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
0525f8db1966HondaSilver
d88adcdd1987HondaBlack
ba76b2772001AudiSilver
0126f02d1962RenaultBrown
62b805f31979JaguarSilver
8a9ef7992005VolvoBlack
7733d3961967MercedesBlue
97d1bc1e1997HondaBlue
b90d8bc91983VolvoOrange
432b14332003FiatMaroon
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
2ce42a6a2001VolvoWhite
4e5a0a342003HondaOrange
1ae42fc21990JaguarYellow
0a4b29631998AudiOrange
986f55352005AudiYellow
535293711995FiatGreen
ed96db8c1963HondaYellow
6ac881f61988RenaultBlue
1427dff92005RenaultBrown
81c189bf1964FiatRed
3e50c9ac2003HondaWhite
dcb6953f1995BMWSilver
33dd03c81992FiatOrange
3e4dcbd42002BMWBlue
ca4683332001MercedesSilver
a73078b92005FiatBlack
3305f5ee1971FiatBrown
c55814581987VolkswagenRed
10ba81f31966VolvoBrown
7c723d491987VolvoBlack
de1738412004AudiOrange
616548eb2007HondaBlue
eaf6aef11978JaguarRed
37a2b23f2001JaguarBrown
b20310771995JaguarOrange
bf13649b2006FiatRed
56c1a7541977FordRed
6ba561cb1984BMWGreen
399b3bbb1981RenaultGreen
40cb25d21964AudiOrange
88611a8a1990AudiBlue
b7dfd29e1994RenaultYellow
ccd0f49b1979MercedesBrown
ba2566f02006RenaultBlue
8e5d96ae1981AudiRed
2c8a2def1977RenaultYellow
b9b962511967AudiYellow
fb87b8861986JaguarYellow
cde084c41960FiatGreen
ba06bd591964HondaSilver
50c5b1fc1963MercedesBrown
5fc04bd71999JaguarYellow
c49225a21975RenaultBrown
e2f077901991JaguarSilver
9dfba5021995MercedesSilver
6abc481f2006MercedesYellow
5e8e01502005MercedesRed
7812c3491990RenaultBlue
5ab761cd1981BMWBrown
3eef68f41966VolvoMaroon
<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.