DataTable - Sticky Header

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

IdYearBrandColor
bded58c21983RenaultBrown
1876dc0b1983VolvoYellow
67f3b67e2001BMWMaroon
2cb934b62002MercedesGreen
cff97bf51973FordWhite
b5f954ef1990HondaMaroon
51a149131963JaguarOrange
48d5d15a1961MercedesWhite
14ceb3681970VolkswagenWhite
e9a51f561971FordRed
1aece4231976AudiSilver
3dc542991978JaguarSilver
8cc3f37d1978FiatGreen
033c63f51967MercedesRed
7b52997d1989JaguarRed
ec5bc58e2006JaguarBlue
83b8b28c1960RenaultBlack
4740c8c61983JaguarSilver
ebb646a21999HondaSilver
442359ce1974BMWBlack
0ee2f4052002JaguarBlack
6d4421181988VolvoSilver
f954058d1989AudiBrown
cf002c881971FiatMaroon
881613d21985MercedesOrange
f8a7ec2b2007AudiYellow
eced8d6f1976FordBlack
665f6ea11962BMWYellow
e088241f1997JaguarSilver
2d8d47ab1987JaguarMaroon
665409fd1992VolkswagenRed
3c2bbfad2001FiatMaroon
6cbed73a1983VolkswagenYellow
1f4777181998RenaultOrange
c4ea98c01969FordBlack
7d18e1472000RenaultSilver
2a3164b82006MercedesGreen
9e2b704f1986RenaultBlack
c0a3974c1986VolkswagenYellow
753f7e531964MercedesRed
20f13d201992HondaBlue
5ad252a92006FiatBlack
e26db6cf2006FiatRed
7a54b6c61993FordSilver
b194c6751998RenaultBlue
e316c2f61976FiatMaroon
b3564d602003JaguarSilver
77ac16be1988FiatBlack
ff7a7d381998RenaultBlack
fe8ebc7e1974VolkswagenMaroon
<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>