DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
bdfccdaf2000RenaultBlack
72325ed61994JaguarBrown
9a7d78412008MercedesBlue
1733d6a71968VolkswagenSilver
cd9b7dda1965FordBrown
43264cf41969HondaYellow
820d60ab1976JaguarBlue
080fd1c31979AudiOrange
1c2d53511986VolvoBrown
bb4acc091996HondaYellow
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
e68506931990HondaRed
5d865a1e1978JaguarWhite
61f227631997FiatRed
902ed68e1977RenaultSilver
4bf2df351967JaguarBrown
59c720c42004VolvoSilver
39606ff42006RenaultBlack
dceecfd81999VolkswagenBrown
1a37ef581997RenaultOrange
bbb1e8262007VolkswagenSilver
3e1e677b1992VolvoOrange
367b2ec71998JaguarSilver
8087db131989JaguarBlack
8538fddd1987JaguarBlue
c9aaa6641967BMWYellow
8c4785db1993FordWhite
5a3ddd522007HondaBlue
1907dc071984FiatYellow
831dc5f31966VolvoGreen
3fcd513e1966AudiSilver
7ab770641988VolkswagenYellow
1b1a29801981FordYellow
142309c81969HondaBrown
d4a3dc442006VolkswagenMaroon
177031311960VolkswagenGreen
ef3f8f512004AudiRed
28f6c6051974MercedesSilver
0b0160f21982RenaultWhite
9b842d4d1999BMWBlack
0c4100be1969VolkswagenWhite
1b23e4a81987RenaultWhite
e8a1dccc1970RenaultSilver
8bdf8d1e1981RenaultWhite
64f6baa02002VolvoBlack
1bbf0a451981RenaultOrange
67a765d22009FordRed
d9a494ca1975VolvoMaroon
1e2e4fcb1988MercedesOrange
9a254ac21968BMWBlue
2656af542000VolvoOrange
f56b33d71988BMWWhite
a1e33b441972MercedesBlue
42d51fd52009AudiOrange
1a5ae5762002AudiBrown
1581533f1983RenaultWhite
aaa58abe1987MercedesOrange
101a766a1985VolvoOrange
33cf8a5e1989VolvoSilver
c3088e181998VolkswagenYellow
2f55fbb11990MercedesMaroon
<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.