DataTable - Sticky Header

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

IdYearBrandColor
fe7cbc0f1969AudiOrange
c44110f51999HondaMaroon
c8d0a3721971HondaGreen
1642ca291987HondaWhite
8b2b0de81999AudiBrown
6c05ff1b1961FordMaroon
a7914d152002MercedesYellow
95ab35551991MercedesWhite
b16dcf7d1974FordMaroon
56c7b66e1982FiatSilver
52c372a11991RenaultYellow
5d4b85c91968HondaBlue
95e263bb1984FiatOrange
47d275ab1994VolvoBrown
82b401481989AudiRed
ccfe6c092003AudiOrange
9407ea211990FordRed
efc273c92004VolkswagenBlue
3e8c3d9d1966JaguarWhite
1f9bd06c1977MercedesGreen
4a8cd15e1966RenaultOrange
46bf95ff2009VolkswagenYellow
ac78941b1967VolvoWhite
62a566bd1999VolkswagenWhite
ac6fae9a1987VolvoWhite
f27a3c801968VolvoBrown
2d5605431966HondaYellow
18a4f6791973BMWMaroon
1cd6e6652005JaguarGreen
b61b66331983FiatSilver
8b3e86882000BMWBlue
1e96ba972007VolkswagenBlack
115197881991BMWOrange
de5fac6b1978JaguarRed
7fdf30ff2007JaguarGreen
89a0f3be1989VolvoBlue
2ce79b0b1967JaguarMaroon
152cfbf31961VolkswagenWhite
c8cbb70f2006AudiGreen
69e632ce1970HondaYellow
031201b21988BMWYellow
aacf06e01977HondaWhite
9dc53d4c2000HondaSilver
80df1b5d1967FiatBrown
17637b2c2000MercedesSilver
447fab242003VolvoOrange
10f105021962FiatMaroon
ec4af7a31985HondaRed
0f1643c52001VolkswagenWhite
5ef427601982AudiRed
<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>