DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
c1a424372002FiatRed
c7c6043a1971AudiOrange
53acf17c1988FordBlack
8fd455ff1979VolkswagenGreen
e3b145571986BMWBlack
baa1b2041995JaguarWhite
ee19dd2e1982FiatBlue
42f1fbcf1973FordBlack
a77f2ef41975MercedesBrown
c9c8b45a1992VolkswagenYellow
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
e2c211322001JaguarRed
f4ce6e491970HondaBrown
689154f71979RenaultMaroon
7e39bb2c1999VolvoBrown
7a21dca81987RenaultYellow
2de3d4941983VolvoBlue
e7c0e2171980VolvoRed
5d77cf812002MercedesBlue
e03a77602004FiatSilver
f3ebc7351987FiatYellow
d67bec6f1992FiatBlue
ee13e7e81992VolvoOrange
7a9e60c52001AudiOrange
26a54a1b1965MercedesYellow
8c6236031993VolkswagenWhite
38186a8b1961FordSilver
368924522000BMWBlack
b7d6535c1961FiatBlack
f98649de1974JaguarYellow
ff1e4d0e2003VolvoBrown
37449dcc2009FordWhite
3c68c00a1964MercedesWhite
d9edebd61999FordBlack
a3d7c2f71975VolkswagenBlack
10d5e6352001BMWBrown
e358360b1997JaguarBrown
bdbe32df1960AudiBlue
350a7d351982RenaultSilver
6e3cc4991979AudiWhite
033675411974VolvoGreen
d9d375dd1965BMWYellow
b3a01ce81980VolvoOrange
de1097c11995VolvoGreen
3dcfa8de1985AudiWhite
92651a862008VolkswagenBlack
a95d77df1963FiatOrange
76a11cd81990AudiBlack
3c5a0b152004HondaMaroon
cf23af4a2003JaguarBlue
a52702fb1980BMWGreen
ec3da64a1992MercedesWhite
d77fa6b12005VolkswagenRed
04aa02071965HondaMaroon
353b7b471970VolkswagenMaroon
999f46bd2001FordWhite
ecfa45bc1972RenaultSilver
870a0bd01997BMWGreen
da7a0eaf2002FiatBlue
710fe0f21966RenaultRed
30fa406b1988HondaBrown
<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.