DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
4607270b1992VolkswagenSilver
65fbaa4e1997JaguarSilver
db1b76e22006JaguarYellow
db6c43d71982VolkswagenWhite
4642e5d11985JaguarBlack
10fb6a6f1996VolkswagenGreen
93e885ea1968VolkswagenBrown
98f12f2e1983JaguarBlue
fb1008d51998JaguarMaroon
0ca12ec81994JaguarBlack
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
46eca62f1988MercedesBrown
df9c63021988AudiBlack
18e0ce151990JaguarMaroon
e283c6ef1960MercedesYellow
7cb4a7ce1991RenaultGreen
383e28b71994FordRed
31ae0b991987VolkswagenYellow
77c4aa3f1997FiatSilver
329c15e21983VolvoBlack
ec01d5db1974VolkswagenWhite
4fb64ce32000BMWSilver
02e400821992BMWRed
04c496e11973BMWSilver
5181a5d11993BMWYellow
897a2dc61986MercedesYellow
030041e31964VolkswagenGreen
2a2f5aa51974JaguarSilver
5077baf51997BMWOrange
3ed1a9521965VolkswagenSilver
642360df1999RenaultWhite
fb727c131960RenaultOrange
bd92334c1963FordYellow
2b877a731967VolvoSilver
7a019aae1995JaguarYellow
65fc5d082004FordWhite
836ecb532007FiatWhite
32a4813d2008BMWBlue
025b9fc81985JaguarBlue
34cb58841966BMWBlack
9da1e5fa1972AudiBlue
865905441998VolkswagenSilver
2deec6b52001JaguarBlue
0dc585ce2007RenaultWhite
0cbb24591982VolvoWhite
c33790821989FordBlue
61d7d0451967AudiGreen
b78bc5d31963FiatBrown
ffd711f71979AudiRed
09b82ba61974RenaultSilver
0924a3f72001AudiBlack
951a74df1997JaguarOrange
0b8f47ed1993HondaYellow
e470066d1995VolvoBlue
6e418d181971FordOrange
5867e8381978HondaBrown
505441a81960HondaWhite
f98c47141987RenaultYellow
ab58e22a2006VolvoBlue
1b125e511963RenaultRed
bb98a9b91963VolkswagenOrange
<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.