How to visualize PanelGrid components inside DataTable

Question

I am trying to create a DataTable (because of pagination) with PanelGrid like this.

My code for the grid is taken from PrimeFaces website:

<p:panelGrid style="margin-top:20px">
        <f:facet name="header">
            <p:row>
                <p:column colspan="7">1995-96 NBA Playoffs</p:column>
            </p:row>
            <p:row>
                <p:column colspan="2">Conf. Semifinals</p:column>
                <p:column colspan="2">Conf. Finals</p:column>
                <p:column colspan="2">NBA Finals</p:column>
                <p:column>Champion</p:column>
            </p:row>
        </f:facet>
        <p:row>
            <p:column style="font-weight: bold;">Seattle</p:column>
            <p:column style="font-weight: bold;">4</p:column>

            <p:column rowspan="2" style="font-weight: bold;">Seattle</p:column>
            <p:column rowspan="2" style="font-weight: bold;">4</p:column>

            <p:column rowspan="5">Seattle</p:column>
            <p:column rowspan="5">2</p:column>

            <p:column rowspan="11" style="font-weight: bold;">Chicago</p:column>
        </p:row>
        <p:row>
            <p:column>Houston</p:column>
            <p:column>0</p:column>
        </p:row>
    </p:panelGrid>

When i put the code for the grid between DataTable tags, it just show the header and pagination line. Some idea how to make such PanelGrids with pagination?

Answer 1

You don't need p:panelGrid for that. You can use p:dataTable and p:row with p:column rowspan="2" and p:column colspan="2" like you have in your code. In case if table is more complicated use p:subTable. Example of subtable is here.