DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
a666b7cb1977RenaultOrange
140ec1c71970RenaultRed
ee699c7d1974FiatBlue
26acc03a1994AudiBlack
ca8431a51960VolkswagenGreen
68209bbc2001HondaRed
5fbb05321968BMWBlack
34b07cb91996HondaBlue
77abe3341969JaguarMaroon
ad01ae9a1967MercedesGreen
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
dbd379551993HondaRed
c2a5e7d21985VolvoBrown
2f635caf1960MercedesWhite
ef5ac9b02000BMWGreen
3c3c03d51966JaguarMaroon
49f952931973FordWhite
e2d1ca191985VolkswagenBlue
db67bf351977JaguarBlue
80634c9f1981VolvoBrown
1424ce231974JaguarRed
447741aa1995RenaultYellow
780484581995HondaBrown
9cf011d71985MercedesRed
c58a1a431971JaguarRed
bedeb9e81993FiatBlack
502899231983AudiRed
936ac7ed1984VolvoSilver
1bcc67bb2005HondaBlack
4066b2861989BMWRed
7fa238a71978HondaMaroon
2d608ab01970HondaMaroon
32411d271962FiatMaroon
a644862c1971JaguarGreen
0d03e7d11962RenaultSilver
9250ddd62004HondaSilver
43ec09281972MercedesSilver
e9cecd771985FiatBlack
b6cd7e2a1993JaguarBlue
d6992e672006FiatBlue
10d9b0aa1961VolvoMaroon
7e89182e2007HondaMaroon
fa275a311995RenaultBlack
c292a94f1998HondaSilver
5fdd287b1963FordBlack
2f6b489f1981VolkswagenSilver
511a6e4d1976RenaultWhite
9f95e06f1971HondaMaroon
14fba84d1975JaguarBlue
faadb3141990VolkswagenSilver
ee5f52811965JaguarYellow
942a2a901987VolkswagenRed
c52b802b1993RenaultBrown
806954a92001HondaBlack
541e67c02006JaguarOrange
0b3976561987JaguarBrown
4fdb00f21985VolvoBrown
7eab4a841966VolvoSilver
ce14b2c71986FordWhite
7cbd05231997AudiOrange
9ff9aac21967MercedesSilver
<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.