DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
1c9fc8722006FiatGreen
e60b398b1969MercedesOrange
9736ff1a2003RenaultWhite
123576681975JaguarBlue
73b0979d1991RenaultBlack
a697a2611968VolvoWhite
a97b921a1993AudiSilver
d0af6eaf1967RenaultOrange
9f6b00ab1963HondaBlue
06f928221971VolkswagenBrown
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
cd10b8d51996VolvoOrange
26645a391985BMWGreen
62828f4a1981VolkswagenYellow
992608731969AudiGreen
0afc49531984MercedesSilver
939dbf721987FiatMaroon
9cd691f01969MercedesMaroon
e2b21f461963BMWBlack
86d2d2d61963JaguarBlack
406cc9261982VolvoOrange
dc271aff2004HondaGreen
628b34ff1981JaguarYellow
19bdf4502000BMWGreen
90b491f01975HondaGreen
0c211eac2009BMWOrange
55fe54531989AudiRed
ff6161df1960JaguarWhite
518e29661976AudiYellow
0bdef1862006MercedesGreen
fef7296a1973BMWRed
8377c6031970HondaBlack
6f3cccb61981VolkswagenOrange
21eb748a1988RenaultOrange
b98f3cff1983HondaBlue
349e747b2007MercedesRed
2ea8e1641982MercedesGreen
36a42ed51987VolvoBlue
5af3579a1977FiatYellow
ee256ec62000HondaGreen
e0fc5af01966FiatMaroon
e4a95c131996FiatSilver
964e72421966FordOrange
ba15c21a1975RenaultOrange
8f73587a1992VolkswagenBrown
9486bd961994AudiBlack
cb095ae42001AudiRed
bcb813211963JaguarOrange
0581b30a1968HondaBlack
7db423ee1967RenaultWhite
c0aedde81983AudiMaroon
1ca3e2f91994RenaultBrown
862d01772009AudiBrown
6b3a0ad42008RenaultBlack
c32394fb2004FordRed
8749dbfe1963JaguarWhite
35e5ab3a1977AudiOrange
c3641abe2005MercedesOrange
cb7d6e652009FiatMaroon
9e80c2e22009HondaRed
3cfc10d82000FiatMaroon
<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.