DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
2d49e75b1963MercedesMaroon
d24386f72003FordSilver
364ef37f1987AudiWhite
1affcd8e1964JaguarWhite
70eb3f872009BMWYellow
5c40ef731991BMWWhite
99319f331981VolkswagenGreen
1a5272b21973FordBrown
836803a41986VolkswagenSilver
9d29386a1969RenaultRed
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
938958e61970BMWBlack
6d5711861968AudiBlue
936d23f41968VolkswagenGreen
ea944dcb1981HondaOrange
d74e07371966VolvoYellow
a1ff1c921974BMWWhite
e631f8ce1964VolkswagenGreen
924f653e1989RenaultSilver
846d8f3a1994MercedesBlue
b07ce6cb1975HondaYellow
6df80a0d1971VolvoOrange
1f1adedb1978HondaMaroon
02acf1ea1971JaguarRed
fbfc45371988VolvoWhite
449e33c82001VolvoSilver
0a0c0e2c2006VolvoYellow
0f6c0ae81964RenaultBlack
71641e541986MercedesBlack
546057ad1997VolkswagenWhite
89f2c7e41989BMWRed
f9d439d31981VolvoBlack
8c7679791992FordBlack
09f26b3d2008VolvoOrange
a7d9dec62002HondaWhite
7a97ab1d1974FiatMaroon
7802ac1c1988VolvoGreen
02a9b0421995AudiGreen
e92b551c2005BMWRed
609fad171971VolvoSilver
41bf31801975FordYellow
d29b77091993BMWGreen
a979ff191989JaguarBlack
8fff9c521966HondaSilver
977d683c1990RenaultOrange
58f498801997FiatMaroon
717860021961HondaGreen
a609d7761976AudiWhite
56816e172003HondaMaroon
573ed6351960MercedesBrown
8b5b04da1968MercedesWhite
0cf516da2005FordWhite
334ffd272001FiatSilver
11ca25e51993AudiSilver
25c76e5e1994BMWRed
020047ce1985AudiMaroon
d61194131989AudiSilver
b12f6d1f1989AudiRed
f7530d551988RenaultRed
566debf11980MercedesOrange
be4ff5301967AudiBlue
<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.