Mirage LIVE PREVIEW

DataTable - Sticky Header

Header of the datatable can be fixed to keep it in viewport during scroll.

Documentation
IdYearBrandColor
c4c8fa8a1964FordOrange
2c02c4e31966BMWBlack
ee492fa51964AudiGreen
d09f7f142008VolvoGreen
9ee0c0b12009RenaultYellow
4897565e1994FordBlack
fcff1ed82002AudiOrange
d02ae40a1998VolvoGreen
8716fd1c2009RenaultBlack
37210a041988RenaultSilver
868eb2491960BMWBrown
933c080a2007FiatBlack
31de76191993MercedesYellow
b841cc1b1961VolvoBlack
1b7467f52000MercedesGreen
360930f71979HondaGreen
53a146dd2004FiatBrown
75af39991987RenaultBlack
fe75c6da1982HondaRed
d7c3b8531963FiatWhite
bf213bea1992JaguarYellow
94d6d5941966BMWOrange
f7372dab2003MercedesBlack
d2761b571971MercedesMaroon
41584d2e1988RenaultOrange
cdf0c4b91971VolkswagenBlue
44b98d171998VolvoMaroon
84bef6081988VolvoGreen
fc76f3301986JaguarMaroon
055583a81974JaguarRed
997bdb731962VolkswagenYellow
d7c886ff2008MercedesBrown
a53633ed2000JaguarBlue
4fcff0521995FiatYellow
67ad520b1982JaguarMaroon
b8a34cc21977FordWhite
232993541990FiatBlack
5ac0427e1962RenaultSilver
12fb5a1e1994FiatGreen
addb44dc1960BMWYellow
9cadce6b2007AudiWhite
166c2a8d1999BMWRed
66c9a9941979MercedesRed
e3b3350c1981FiatRed
dc03efaa1986AudiBrown
24b114611993BMWSilver
1fd3cb021967VolkswagenWhite
f1089c942009BMWBlack
4ddf5fea1999VolkswagenBlack
010d00f51967MercedesYellow
<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true" stickyTopAt=".layout-topbar">
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>
    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>
    <p:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>
    <p:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>