Multiple jsf tables in one

Question

I would like to create a table that looks like this:

---

                 Table Header

---

SubHeader 1 | SubHeader 2

---

InfoType1.Info1 | InfoType1.Info2

---

SubHeader 3

---

InfoType2.List.get(0).var1 | InfoType2.get(0).var2

---

...

---

InfoType2.List.get(N).var1 | InfoType2.get(N).var2

---

I've tried to do this with jsf subtables, but I'm not sure whether it's possible, and I so far haven't found any way of including multiple subtables into one datatable, sharing the same header. Please note that the information below SubHeader3 comes from a different data source than the information of SubHeader 1 and 2. Any help would be greatly appreciated! Please excuse the ugly formatting, but I don't know how to preserve ascii when posting, and I have no image examples.

Answer 1

You could do it with some panelGrid nested together.

XHTML page :

<h:body>
    <style>
.hide-column-names table thead tr {
    display: none;
}
</style>
    <h:form>
        <p:panelGrid columns="1" border="1">
            <p:panelGrid columns="2" border="1" style="width:100%;">
                <f:facet name="header">
             Table Header
        </f:facet>
                <p:panelGrid columns="1" border="1" style="width:100%;">
                    <f:facet name="header">
             SubHeader 1
        </f:facet>
                    <h:outputLabel value="#{bean.info1}" />
                </p:panelGrid>
                <p:panelGrid columns="1" border="1" style="width:100%;">
                    <f:facet name="header">
             SubHeader 2
        </f:facet>
                    <h:outputLabel value="#{bean.info2}" />
                </p:panelGrid>
            </p:panelGrid>
            <p:dataTable var="list" value="#{bean.listInfoType}" styleClass="hide-column-names">
                <f:facet name="header">
             SubHeader 3
        </f:facet>
                <p:column>
                    <h:outputText value="#{list.info1}" />
                </p:column>
                <p:column>
                    <h:outputText value="#{list.info2}" />
                </p:column>
            </p:dataTable>
        </p:panelGrid>
    </h:form>
</h:body>   

Bean :

@ManagedBean(name = "bean")
@ViewScoped
public class bean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String info1;
    private String info2;
    private List<InfoType> listInfoType;

    public bean() {
        info1 = "info1";
        info2 = "info2";
        listInfoType = new ArrayList<InfoType>();
        listInfoType.add(new InfoType("var 1 1", "var 1 2"));
        listInfoType.add(new InfoType("var 2 1", "var 2 2"));
        listInfoType.add(new InfoType("var 3 1", "var 3 2"));
        listInfoType.add(new InfoType("var 4 1", "var 4 2"));
        listInfoType.add(new InfoType("var 5 1", "var 5 2"));
        listInfoType.add(new InfoType("var 6 1", "var 6 2"));
        listInfoType.add(new InfoType("var 7 1", "var 7 2"));
        listInfoType.add(new InfoType("var 8 1", "var 8 2"));
        listInfoType.add(new InfoType("var N 1", "var N 2"));
    }

    public List<InfoType> getListInfoType() {
        return listInfoType;
    }

    public void setListInfoType(List<InfoType> listInfoType) {
        this.listInfoType = listInfoType;
    }

    public String getInfo1() {
        return info1;
    }

    public void setInfo1(String info1) {
        this.info1 = info1;
    }

    public String getInfo2() {
        return info2;
    }

    public void setInfo2(String info2) {
        this.info2 = info2;
    }

}

Result :

I hope this example can help you ! If is not the case just let me know.