Mirage LIVE PREVIEW

DataTable - Sort

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

Documentation
Single Column Sort
IdYearBrandColor
00caa7991962BMWOrange
971c229d1963AudiSilver
94b782531983RenaultRed
1ffa2f2b1966HondaOrange
9745675b1965VolkswagenBlue
28911ffd1961FordYellow
140387621966JaguarBlue
07da7e8c1965VolvoOrange
3a609bdb1973FordSilver
a82c28362003HondaGreen
Editable Values
IdYearBrandColor
Multiple Column Sort with Metakey
IdYearBrandColor
4f1764a32002MercedesYellow
6ce94c871980AudiWhite
3384dcb81961HondaBlack
a9564a2d2007AudiBlack
1983b5491962HondaYellow
176a4cdd1990VolkswagenBlue
9e0341cf1984JaguarBlack
15cb03761981VolvoBrown
09b141dd1968FordBlue
da21569a1990MercedesMaroon
5ea0128f1969VolkswagenBlue
0f2ae3a51985AudiGreen
9a6b330f1986BMWBlue
2abf27371995AudiRed
b23165ea2000HondaSilver
f7a40bd32007RenaultMaroon
d14c24da1995BMWBlack
38d7180e1961AudiYellow
b163e57b1968MercedesGreen
1fb054ef1965AudiWhite
2786e56a1999VolkswagenWhite
eec6fa4d2001JaguarRed
ef6370611994JaguarBlack
e437632e1997VolkswagenWhite
b8139a341999JaguarOrange
4503a7d02004FordWhite
a4c364191975BMWBlack
c96ace681979VolkswagenSilver
df6211bb1973AudiRed
73aff6b61987HondaSilver
d40ed4671991RenaultMaroon
73dda0342002RenaultBlue
722bca031996BMWGreen
f601083e1983VolvoBlack
8aef08311986AudiBlue
34bf96e01979FiatGreen
3d7232b31977FordRed
d7edbf941993JaguarRed
c25a74701991VolkswagenYellow
7cd5bc4b2007MercedesBrown
2d917f461978HondaBrown
db2693de1998AudiOrange
1a8e67a41983FordBlue
e8bacd352008FordYellow
049718851985AudiBlue
2c08a39d1967RenaultSilver
75946b511993HondaMaroon
ccc501ce1981BMWWhite
8302f1101975BMWGreen
ddf017f31965BMWBlack
<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>