DataTable - Sort

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

Single Column Sort
IdYearBrandColor
38a45ee01969JaguarSilver
8b3159631977VolkswagenSilver
ae0bd4bc1983HondaGreen
dfe755041997FiatYellow
2343d3e61972MercedesGreen
4d2193872006MercedesSilver
35cec4fb1995FiatSilver
907813ef1977MercedesYellow
e0e7159f1986JaguarSilver
3d9b2fed1966JaguarBlue
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
12fe96e51964HondaGreen
61c4cad51962AudiYellow
57c62a441993FordBlue
707a3d1a1964BMWGreen
116034071977FordGreen
ba8e8aea1971RenaultRed
06cfd6331967VolvoYellow
6e2eba951996FordMaroon
a119d3481967RenaultBlue
ab1dc6942004FiatGreen
<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>