DataTable - Sort

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

Single Column Sort
IdYearBrandColor
8b7ea55d2006VolvoMaroon
16436c711971AudiMaroon
901b9e1f1992AudiMaroon
0ed441e41991VolkswagenWhite
6f1bd01a1979FordWhite
a98edd9a1966MercedesMaroon
fbd57d081984AudiYellow
078f7ce11988RenaultOrange
1a289e5b1984VolvoBlack
6651d0ba1969HondaBlack
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
959fb8061972AudiOrange
ccbff5401974HondaBrown
f4c29be71977JaguarYellow
637983261987FiatBlack
1dcf4e2b1978FiatSilver
f923ece81996FordBrown
304604061984RenaultMaroon
b2b0f1ea1963JaguarBlack
0f3a23861973VolkswagenYellow
5ee12c731961HondaWhite
<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>