JSF RichTable merging rows / columns in a header

Question

What I want to do is do this layout with RichTable in its header to have 3 columns:

+---+---+-------+
|   |   | 3   5 |
| 1 | 2 |-------+
|   |   | 4   6 |
+---+---+-------+

I got used this (8.2) resource to get it done. Rich-faces 4.0.0

But instead I end up having plain table-row with no any merging.

Could you please shed a light on this?

Update:

About the answer from Vasil Lukach. In my case (if I do copy paste of those code), I have this result (I use hard coded values to keep it simple):

My code looks like this:

 <rich:dataTable id="mydatatable"
                                    value="#{applicationListBean.data}" >

                    <f:facet name="header">
                        <h:outputText value="msg.txnLineItems" />
                        <rich:columnGroup>
                            <rich:column rowspan="2">
                                <h:outputText value="msg.item" />
                            </rich:column>
                            <rich:column rowspan="2">
                                <h:outputText value="msg.department" />
                            </rich:column>
                            <rich:column rowspan="2">
                                <h:outputText value="msg.purchaseAmount}" />
                            </rich:column>
                            <rich:column rowspan="2">
                                <h:outputText value="msg.quantity" />
                            </rich:column>
                            <rich:column colspan="5">
                                <h:outputText value="msg.promotions" />
                            </rich:column>

                            <rich:column breakRowBefore="true">
                                <h:outputText value="msg.promoName" />
                            </rich:column>
                            <rich:column>
                                <h:outputText value="msg.promoCode" />
                            </rich:column>
                            <rich:column>
                                <h:outputText value="msg.promoCategory" />
                            </rich:column>
                            <rich:column>
                                <h:outputText value="msg.discount" />
                            </rich:column>
                            <rich:column>
                                <h:outputText value="msg.points" />
                            </rich:column>
                        </rich:columnGroup>
                    </f:facet>

                </rich:dataTable>

Answer 1

I use <rich:column rowspan="2"> and <rich:column breakRowBefore="true"> for similar table:

Code

    <f:facet name="header">
        <h:outputText value="#{msg.txnLineItems}" />
        <rich:columnGroup>
            <rich:column rowspan="2">
                <h:outputText value="#{msg.item}" />
            </rich:column>
            <rich:column rowspan="2">
                <h:outputText value="#{msg.department}" />
            </rich:column>
            <rich:column rowspan="2">
                <h:outputText value="#{msg.purchaseAmount}" />
            </rich:column>
            <rich:column rowspan="2">
                <h:outputText value="#{msg.quantity}" />
            </rich:column>
            <rich:column colspan="5">
                <h:outputText value="#{msg.promotions}" />
            </rich:column>

            <rich:column breakRowBefore="true">
                <h:outputText value="#{msg.promoName}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{msg.promoCode}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{msg.promoCategory}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{msg.discount}" />
            </rich:column>
            <rich:column>
                <h:outputText value="#{msg.points}" />
            </rich:column>
        </rich:columnGroup>
        </f:facet>