DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
5e9afc851998AudiGreen
20714edb1979FordBlue
6774c0f12007VolvoYellow
d15c816e1962AudiMaroon
8adce2f31984RenaultBlack
7036dc6c1972FiatMaroon
5bcfd7e21981HondaBlack
7edf01051998RenaultYellow
05055c251960AudiBlack
21df26ea1980FordBlack
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
0089c5091996BMWOrange
2d731d451980FiatBrown
9496a77a1994HondaSilver
658aa1621967AudiOrange
12eb6e821974VolvoRed
9ab3655c1987HondaRed
a2ff1a141984FordSilver
49d944811960VolvoGreen
123f52fa1990VolvoGreen
2c50ed8a2004RenaultRed
8fb6dd661998JaguarMaroon
0bb7975e1991VolvoGreen
f5d01f2b1993JaguarYellow
a03f8bb71967AudiBrown
4d3860e61998BMWBlue
a333df781968FordSilver
bdd7458e1966AudiSilver
bd4e3a201978VolkswagenSilver
015cf4961986VolvoRed
a5cb852f1971VolvoGreen
1fbb0c781980BMWBrown
928c12702004RenaultSilver
e95fcf411971MercedesBlue
7cd877622009MercedesWhite
eabad88a2002FordGreen
705be86d1996JaguarYellow
245ca0ea2005RenaultBrown
6d5c764e1993VolkswagenYellow
f832b3cd2008HondaOrange
68d223371989RenaultSilver
92dbbceb1968BMWGreen
98e3b2691987RenaultGreen
f3b6ee9e1987BMWSilver
3da9366c1989VolvoBlack
e52fef2c1971RenaultGreen
34c168031991VolvoGreen
d44af0691998FordWhite
5dd5d8122006RenaultOrange
50eccc741962AudiMaroon
077219631967HondaMaroon
761177d11968VolkswagenOrange
c022c9b81999HondaGreen
dc5712491966RenaultMaroon
49004e391993MercedesMaroon
b0e0dfa32000JaguarOrange
77fd5ad52004JaguarBlack
9898faa61994RenaultBrown
7d2257891967MercedesRed
dae342fd1976VolvoYellow
e17a7eab1979BMWOrange
<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.