PrimeFaces V8：如何在表格顶部添加固定加粗行？

需求说明 #

现有基于PrimeFaces 8的<p:dataTable>组件，需在表格顶部添加一行固定且加粗的行，实现目标展示效果。

方案一：添加数据行上方的固定加粗汇总行 #

利用PrimeFaces自带的<p:summaryRow>组件，设置position="top"将汇总行放在数据行顶部，配合CSS实现加粗和固定效果。

修改后的完整代码 #

<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:summaryRow position="top" styleClass="fixed-bold-row">
            <p:summaryColumn style="text-align:center; width:12%;">
                <h:outputText value="总计"/>
            </p:summaryColumn>
            <p:summaryColumn style="text-align:center; width:25%;">
                <h:outputText value="#{MB.totalBases}"/>
            </p:summaryColumn>
            <p:summaryColumn style="text-align:center; width:50%;">
                <h:outputText value="#{MB.totalQtdRetornos}"/>
            </p:summaryColumn>
            <p:summaryColumn style="text-align:center; width:17%;">
                <h:outputText value="#{MB.totalTaxa}"/>
            </p:summaryColumn>
        </p:summaryRow>

        <!-- 原表格列定义 -->
        <p:column styleClass="columnAlignCenter"
                   style="width: 12%; text-align: center; font-size: 12px;">
            <f:facet name="header">
                <p:selectBooleanCheckbox />
            </f:facet>
            <p:selectBooleanCheckbox styleClass="checkbos-itens"/>
        </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>

<style>
/* 固定加粗行样式 */
.fixed-bold-row td {
    font-weight: bold;
    background-color: #f8f9fa; /* 可选，与表头区分 */
    position: sticky;
    top: 40px; /* 需根据表头高度调整，确保行固定在表头下方 */
    z-index: 1;
}

/* 确保表头也固定（可选） */
.ui-datatable-thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}
</style>

</ui:composition>

关键说明 #

1. <p:summaryRow>的position="top"属性控制行显示在数据行顶部
2. 后台Bean（MB）需新增对应汇总字段（如totalBases、totalQtdRetornos等）
3. CSS的position: sticky实现固定效果，top值需根据实际表头高度调整，避免被表头遮挡
4. font-weight: bold直接实现加粗样式

方案二：添加表头上方的固定加粗标题行 #

如果需要在原有表头上方添加固定加粗行，可使用<p:columnGroup>构建多层表头：

修改后的核心代码片段 #

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

    <!-- 表头上方的固定加粗行 -->
    <p:columnGroup type="header">
        <p:row styleClass="fixed-bold-header">
            <p:column colspan="4" style="text-align:center;">
                <h:outputText value="自定义固定标题"/>
            </p:column>
        </p:row>
        <!-- 原有表头行 -->
        <p:row>
            <p:column>
                <f:facet name="header">
                    <p:selectBooleanCheckbox />
                </f:facet>
            </p:column>
            <p:column headerText="Bases"/>
            <p:column headerText="Qtd. Retornos"/>
            <p:column headerText="Taxa %"/>
        </p:row>
    </p:columnGroup>

    <!-- 原表格列定义 -->
    <!-- ... 省略原有列代码 ... -->
</p:dataTable>

<style>
.fixed-bold-header td {
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #e9ecef;
}
</style>

关键说明 #

1. <p:columnGroup type="header">用于构建多层表头，第一行即为新增的固定加粗行
2. colspan="4"需与表格列数一致
3. CSS样式直接实现固定和加粗效果

内容的提问来源于stack exchange，提问作者Dev_Edimar FUll stack