DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
74dadcfe1961BMWRed
112e71e41987VolkswagenBrown
504ca9641996MercedesBlue
835b1df22006VolkswagenOrange
8839ec781976HondaOrange
ab885e581962VolkswagenBlue
d57ea0561980JaguarOrange
adab4efe1983MercedesGreen
23abdc6b1988VolkswagenRed
330dca7e2002BMWBrown
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
c9d4b8641992RenaultBrown
87623f821978VolvoWhite
2f773b8a1967RenaultBlack
1fb061de2005RenaultOrange
bee099fa1981FiatOrange
624b62b41985HondaMaroon
076b236a1961AudiRed
31421f951996VolvoBlack
b3fde0a81991FordMaroon
2634bf3d1978VolkswagenSilver
b67824d41984BMWBrown
41fb32ca2004VolkswagenBrown
6f8e83031962HondaBlack
45458bd21976JaguarBrown
35092da61990AudiBrown
c5938d5f1982MercedesBrown
473c262b1980MercedesMaroon
ce68c11a1977JaguarBrown
63a2d2001991VolvoOrange
377898d21984JaguarYellow
8333e8cd2005RenaultBlack
79471ce51960RenaultOrange
30620c861991AudiGreen
04e47f551968HondaYellow
c80c74ee1974RenaultBrown
98656a461985AudiBlue
d2b772b72000FordBlue
8385e95a2003VolkswagenOrange
bec04f601987BMWMaroon
06fb55c92000HondaWhite
161921b71985VolvoRed
e9c95f0a1964HondaYellow
6e19ced51989FordGreen
7322861c1989FordYellow
6d54450d1978FiatBlack
91ad67771985VolvoWhite
5711130e1970FiatBlue
8c3f32221962BMWSilver
9a91a79d1960JaguarRed
bd508f8d1999MercedesYellow
f2b20a2a1987VolkswagenMaroon
7362142c1981BMWBlack
d1d4d6111968RenaultSilver
cf82296a1998VolkswagenMaroon
cc99998f1965VolkswagenMaroon
7686f55e1973HondaSilver
a36c263b2000RenaultGreen
63fc20061966AudiSilver
706bdd151979VolkswagenGreen
9c1f3f161977VolkswagenOrange
<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.