DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
51deb61a1995AudiWhite
eb099c331972JaguarBlack
8163b4171970AudiWhite
b400442e1966BMWMaroon
b4cefe4d1986AudiMaroon
1e2ddbe21961VolkswagenBrown
be2dbc681985RenaultYellow
4f132fea2001VolkswagenSilver
b79875271986MercedesYellow
04b9af831962AudiRed
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
dc3f26001960FiatGreen
b25133c71983MercedesRed
49c7a3e01974JaguarSilver
c74053e22001FiatRed
bc619a0a2007MercedesWhite
84f23ab41986VolvoSilver
6f663af21965VolkswagenMaroon
8db561441981AudiWhite
fcdbb03b1964MercedesWhite
ed250c612002BMWRed
309b48c72003JaguarGreen
479837c51964MercedesBlack
9f5b0d1f1997FordGreen
b9e310d91973BMWSilver
d78515b81981BMWSilver
c2f5a2391971VolkswagenBlue
bde6e1e21963FordWhite
ca539fc81991JaguarBlack
5b3409342000AudiOrange
6597348d1989VolvoSilver
fdad4bd81986AudiBrown
e8ddfee31973AudiWhite
d0bfa7b41995HondaGreen
7e7bc2f71962VolkswagenMaroon
95a2318f1975BMWBrown
9f011e312007HondaWhite
7d7cc4071966BMWRed
8ca49a781969RenaultBlue
4abb06d41970RenaultSilver
0d34fe882002FiatMaroon
d05fe0262008MercedesOrange
64a8f0892000RenaultGreen
b4e707e92005FiatMaroon
d4f2f2bf1964AudiMaroon
755c10271977VolvoRed
1f05542b1967FordBlack
082348241971RenaultWhite
2314997f1989JaguarOrange
9f5929581985RenaultBlack
453a72232008FordBlue
0485b2221993VolkswagenMaroon
28e3caa21970RenaultMaroon
5242a1702007FiatRed
cac7149e1975BMWBlack
f5fec5972000JaguarWhite
c49ae0f41997BMWOrange
f5f9431c1969BMWOrange
d1aadffe1972AudiRed
c91d235b1988AudiSilver
9563de1b1999FordSilver
<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.