DataTable - Sort

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

Single Column Sort
IdYearBrandColor
e35948112008BMWYellow
e5eb971b2003HondaWhite
71ff077b1977AudiYellow
4e0bbb471985VolkswagenOrange
25362f671996VolvoMaroon
9077e6921971FordBrown
867b38112000VolvoYellow
fa7dbc971960FiatBlack
1ee2e7a81976FordOrange
31d0bc1d1974RenaultSilver
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
3ff102e72000MercedesRed
cf57d79e1966RenaultRed
832a8a971990MercedesGreen
8829eb8c1979AudiRed
c0e90f1a2001MercedesSilver
b67c87dd2003FiatSilver
3c7eb0c21969VolkswagenMaroon
f63918601991VolvoWhite
1578e69f1982HondaRed
bdeb5a781978AudiBrown
b218b21c1963MercedesRed
a44da01d1995FiatSilver
239ccc6a1969HondaGreen
cff1424d2003AudiBlack
ffba06a41964MercedesYellow
ba1d3ba41966FiatWhite
b281e2522007MercedesSilver
c8af91331986FiatSilver
0738f6e01977FiatBlue
930954f92007HondaBlue
7e7593901999FordWhite
921cc7c11992MercedesBrown
51c1f02a2007FordBlue
f179eef71995AudiGreen
52470e131978HondaRed
e851c5f42000HondaGreen
da314c1b1987JaguarBrown
e53525451977VolkswagenOrange
1301d4061976HondaMaroon
dc41c4f01964VolvoBlack
971889cf1963BMWBrown
5b61ef771998FordBrown
861486751974VolvoBlack
9da53c2b1974FordYellow
18c470a31989MercedesYellow
4caec7632000VolkswagenBlack
45c4da031963MercedesOrange
0c674d3f1990VolkswagenGreen
04af45821982FordBlue
2fce677c1981VolvoGreen
1f8371ac1984RenaultBlue
f34831cf1962AudiBlue
8167a3cb2006FiatWhite
871951112003AudiRed
b8ede9bd1968MercedesBrown
e526d0921966FiatMaroon
c47164711964BMWSilver
5d9729972008HondaBrown
511de3461972AudiRed
55ca54681980FiatBrown
<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>