PrimeFaces V8, How to add a row on the top of the table?

28 Views Asked by At
<ui:composition xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui">




<div class="mt-5 mb-5 tabela-retorno">

    <p:dataTable var="item" 
                 resizableColumns="false"
                 value="#{MB.basesRetorno}"  
                 emptyMessage="#{sessionMB.getLabel('label_nenhum_registro_encontrado')}">

            <p:column styleClass="columnAlignCenter"
                           style="width: 12%; text-align: center; font-size: 12px;">

                <f:facet name="header">
                    <p:selectBooleanCheckbox >
                        
                    </p:selectBooleanCheckbox>
                </f:facet>

                
                <p:selectBooleanCheckbox styleClass="checkbos-itens">
                </p:selectBooleanCheckbox>

            </p:column>

            <p:column headerText="Bases" style="text-align: center; width: 25%; font-size: 12px;">
        
                <h:outputText value="#{item.base}" />
            
            </p:column>



            <p:column headerText="Qtd. Retornos"
                      style="text-align: center; width: 50%; font-size: 12px;">

                      <h:outputText value="#{item.qtdRetornos}"/>
            </p:column> 

            <p:column headerText="Taxa %" 
                      style="text-align: center; width: 17%; font-size: 12px;">

                      <h:outputText value="#{item.taxa}" />
            </p:column> 


       </p:dataTable>   

</div>
    

</ui:composition>   

The picture bellow shows us how my tables is currently working

enter image description here

I need to add a fixed line on a table I developed using JF

The picture below shows us how I need it to look like, can you help me to solve it? I need that first row bolded like in the picture.

enter image description here

1

There are 1 best solutions below

0
Jasper de Vries On

As you can see in the showcase, there is a DataTable Sticky Header option. Simply set the stickyHeader attribute to true. See also the DataTable documentation. This option is also available in PrimeFaces 8.