multiple f:facets for datatable

Question

I want to use two f:facets: the first row one as a 'header' for the table containing only text, and the second row containing a 'global filter' (label + inputbox).

I have tried countless combinations but failed.

How can I achieve this with JSF/Primefaces?

Here is one example of what I tried:

<p:dataTable var="customer" widgetVar="customerTable" id="dataTable" value="#{customerbean.customerList}" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,50,100" emptyMessage="#{text['table.customer.filter.notfound']}" filteredValue="#{customerbean.filteredCustomers}" editable="true"> 
<f:facet name="header">                       
<h:outputText value="#{text['table.customer.header']}" />                            
</f:facet>
<f:facet name="header2">                       
<h:outputText value="#{text['table.customer.filter.global']}" />
<p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />                                      

This is my second attempt based on the answer below:

            <f:facet name="header">                    
            <p:columnGroup type="header">
                <p:row>
                    <p:column colspan="4">
                        <h:outputText value="#{text['table.customer.header']}" />    
                    </p:column>
                </p:row>
                <p:separator/>
                <p:row>
                    <p:column colspan="4">
                        <h:outputText value="#{text['table.customer.filter.global']}" />
                        <p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />                         
                    </p:column>
                </p:row>
            </p:columnGroup>                  
            </f:facet>   

Whole datatable:

               <p:dataTable id="customersTable" var="customer" widgetVar="customerTable" value="#{customerbean.customerList}" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="10,20,50,100" emptyMessage="#{text['table.customer.filter.notfound']}" filteredValue="#{customerbean.filteredCustomers}" editable="true" draggableColumns="true" rowKey="#{customer.id}" selection="#{customerbean.selectedCustomer}" selectionMode="single"> 

                <f:facet name="header">                    
                    <p:columnGroup type="header">
                        <p:row>
                            <p:column colspan="4">
                                <h:outputText value="#{text['table.customer.header']}" />    
                            </p:column>
                        </p:row>
                        <p:separator/>
                        <p:row>
                            <p:column colspan="4">
                                <h:outputText value="#{text['table.customer.filter.global']}" />
                                <p:inputText id="globalFilter" onkeyup="customerTable.filter()" style="width:150px" />                         
                            </p:column>
                        </p:row>
                    </p:columnGroup>                  
                </f:facet>

                <p:ajax event="rowEdit" listener="#{customerbean.onEdit}" update="@this"/>  

                <p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}" filterMatchMode="contains">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{customer.name}" /> 
                        </f:facet> 
                        <f:facet name="input">  
                            <p:inputText value="#{customer.name}" style="width:100%"/>  
                        </f:facet> 
                    </p:cellEditor>
                </p:column>  

                <p:column headerText="CPR" sortBy="#{customer.cpr}" filterBy="#{customer.cpr}" filterMatchMode="contains">  
                    <h:outputText value="#{customer.cpr}" />  
                </p:column>  

                <p:column headerText="Passport No." sortBy="#{customer.passportno}" filterBy="#{customer.passportno}" filterMatchMode="contains">  
                    <h:outputText value="#{customer.passportno}" />  
                </p:column>  

                <p:column headerText="DOB" sortBy="#{customer.dob}" filterBy="#{customer.dob}" filterMatchMode="contains">  
                    <h:outputText value="#{customer.dob}" />  
                </p:column>   

                <p:column headerText="Options" style="width:50px">  
                    <p:rowEditor />  
                </p:column>                  

                <f:facet name="footer">  
                    There are #{fn:length(customerbean.customerList)} customers in total.  
                </f:facet>  
            </p:dataTable>  

Answer 1

You can't name the facet with whatever name you want. It must be something that the datatable understands. It understands "header", just like it understands "footer", but not "header2" or "footer2".

That said, you can use only one <f:facet name="header"> and inside that you can do whatever you want. You may use a <p:panelGrid columns="1">, or a <p:separator>, or even a simple table, it's just html/css formatting, like you would do anywhere in your page.

---

There's also a more complex way, if you want to try a little bit harder, using <p:columnGroup type="header"> and many <p:row>s inside it, for example:

<p:columnGroup type="header">
   <p:row>
      <p:column>
         <f:facet name="header">
             <h:outputText value="Your header" />
         </f:facet>
      </p:column>
   </p:row>
   <p:row>
      <p:column>
         <f:facet name="header">
             <h:outputText value="Filter: "/>
             <p:inputText value="#{filter}">
         </f:facet>
      </p:column>
   </p:row>
</p:columnGroup>

See a full example here.