How to merge two cells in a p:dataTable

Question

I'm using PrimeFaces 8.0 and I want to merge the header of the two cells in one header (Title). Is it possible with PrimeFaces to do that?

<p:dataTable>
<p:column>
<f:facet name="header">input</f:facet>
<p:outputLabl value="input" />
</p:column>

<p:column>
<f:facet name="header">output</f:facet>
<p:outputLabl value="output" />
</p:column> 
</p:dataTable>

score 1 · Answer 1 · answered Jan 24 '23 at 13:31

The p:dataTable should be used for, well, data. You should not use it for layout. Technically you could group headers, see the dataTable group example in the showcase, but it's probably not what you want. You could use p:panelGrid for layout, but still, it renders a table, and tables shouldn't be used for layout in general.

It's better to use PrimeFlex for layout. It even has a form layout to create responsive layouts easily.

Vasil Lukach · Answer 2 · 2023-01-25T20:49:55.280

Yes, you can do it. For that purpose can be used p:column with attribute colspan. Following is example how to use it:

    <p:dataTable id="tliTable"
        value="#{chTransactionsForm.tliList}" var="tli"
        resizableColumns="true"
        style="width: 930px; margin: 5px 5px 5px 5px;">
    
        <f:facet name="header">
            <h:outputText value="#{msg.txnLineItems}" />
        </f:facet>
        
        <p:columnGroup type="header">
            <p:row>
                <p:column rowspan="2" headerText="#{msg.item}" />
                <p:column rowspan="2" headerText="#{msg.nacs}" />
                <p:column rowspan="2" headerText="#{msg.department}" />
                <p:column rowspan="2">
                    <f:facet name="header">
                        <h:outputText value="#{msg.purchaseAmount}"
                            escape="false" style="white-space: pre-line;" />
                    </f:facet>
                </p:column>
                <p:column rowspan="2" headerText="#{msg.quantity}" />
                <p:column colspan="5" headerText="#{msg.promotions}" />
            </p:row>
            <p:row>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{msg.promoName}"
                            escape="false" style="white-space: pre-line;" />
                    </f:facet>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{msg.promoCode}"
                            escape="false" style="white-space: pre-line;" />
                    </f:facet>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="#{msg.promoCat}"
                            escape="false" style="white-space: pre-line;" />
                    </f:facet>
                </p:column>
                <p:column headerText="#{msg.discount}" />
                <p:column headerText="#{msg.points}" />
            </p:row>
        </p:columnGroup>
        
        <p:column>
            <h:outputText id="tliProduct" value="#{tli.productName}" />
        </p:column>
        
        <p:column>
            <h:outputText id="tliNacs" value="#{tli.nacsName}" />
        </p:column>
        
        <p:column>
            <h:outputText id="tliDepartment" value="#{tli.departmentName}" />
            <p:tooltip for="tliDepartment" trackMouse="true">
                <h:outputText value="#{tli.departmentCode}:#{tli.departmentName eq tli.departmentCode ? '' : tli.departmentName}" />
            </p:tooltip>
        </p:column>
        
        <p:column>
            <h:outputText value="$" />
            <h:outputText value="#{tli.amount}">
                <f:convertNumber pattern="#,##0.00" />
            </h:outputText>
        </p:column>
        
        <p:column>
            <h:outputText value="#{tli.quantity}" />
        </p:column>
        
        <p:column colspan="5">
    ...

Or even more reliable source - Column Group in PrimeFaces showcase

score 0 · Answer 3 · answered Feb 03 '23 at 16:50

I found the solution thank you all :

           <p:columnGroup type="header">
            <p:row>
               
                <p:column headerText="Title 1"/>
                <p:column colspan="2" headerText="Title 2"/>
                <p:column headerText="Title 3"/>
                
            </p:row>
        </p:columnGroup>

How to merge two cells in a p:dataTable

3 Answers3