Fixed headers in rich:datatable

Question

I can't fix the headers from rich:datatable.

In my rich datatable load there are many columns. When scrolling, I lose the headers of the list. How can I fix the headers?

<div style="overflow:auto; height:500px; width:100%;" id="ere">
    <rich:dataTable id="solicitudMonitoreoVehicular"  headerClass="alignLeft" frozenColumns="2"
            value="#{listarServicioEnMonitoreoAsesoriaController.lstSolicitudMonitoreoVehicular}"
            var="item" >

            <rich:column  styleClass="#{item.color == null ? '' : item.color}">
                <f:facet name="header">
                    <h:outputText value="Placa" />
                </f:facet>
                <h:commandLink styleClass="no-decor" execute="@this"
                    value="#{item.placa}">
                    <f:setPropertyActionListener
                        target="#{listarServicioEnMonitoreoAsesoriaController.solicitudMonitoreoVehicular}"
                        value="#{item}" />                      
                </h:commandLink>
            </rich:column>
.....
....
...

Answer 1

frozenColumns attribute is there for rich:extendedDataTable.

Due to the complex mark-up involved in the rich:extendedDataTable component, it does not support the use of the rich:collapsibleSubTable component. The rich:collapsibleSubTable component is only available with the rich:dataTable component.

Similarly, complex row and column spanning using the breakRowBefore, colSpan, and rowSpan attributes is also not available with the rich:extendedDataTable component.

I am also searching for a solution, but i am thinking to implement with a bit different design, as @Vasil mentioned we can use row count and pagination.

The below code uses row count and pagination

    <div style="overflow:auto; height:500px; width:100%;" id="ere">
<p align="center">
    <rich:dataScroller for="table" maxPages="5" />
</p>
<rich:dataTable width="1200" var="record" id="table"  border="0" cellpadding="0" cellspacing="0" styleClass="tablemargin tableDetails"  
        value="#{customerController.topCustomer}" rows="2">


<f:facet name="header">
            <rich:columnGroup>
                <rich:column styleClass="width50">

                </rich:column>
                    ......
                    .......
                <rich:column styleClass="width70">
                    .......
                </rich:column>
            </rich:columnGroup>
</f:facet>
        <rich:collapsibleSubTable var="item" value="#{record.items}" rowKeyVar="rowKey" >
            ..........
            .........
        </rich:collapsibleSubTable>     

</rich:dataTable>
<p align="center">
    <rich:dataScroller for="table" maxPages="5" />
</p>
     </div>