Is there any way to update PrimeFaces data table without updating the table headers?

Question

This is a clumsy question!!! :)

Can this be made possible somehow? Can <p:dataTable> (whatever lazily loaded or otherwise) be updated without updating its headers (The contents (rows) inside the table along with the footer should be updated without updating the table headers)?

Updating of <p:dataTable> may be triggered by any UICommand like <p:commandButton> , <p:commandLink> and alike.

Something like this can be visualized, when we edit/update rows using <p:cellEditor> in conjunction with <p:rowEditor/> in <p:dataTable> (not sure about single cell editing).

<p:dataTable id="dataTable" var="row" value="#{bean}" ...>
    <p:column headerText="Header 1" sortBy="#{row.property1}" filterBy="#{row.property1}">
        ....
    </p:column>
    <p:column>
        <!--They may be our own headers-->
        <f:facet name="header">
            Header 2
            ...
        </f:facet>
        ....
    </p:column>
    ...
</p:dataTable>

Answer 1

Easiest way is to use PrimeFaces Selectors (PFS) for this. This only requires the desired cell content being wrapped in another component with an ID and a style class — so that jQuery can find and collect them.

Eg

<p:dataTable ...>
    <p:column>
        <f:facet name="header">...</f:facet>
        <h:panelGroup id="col1" styleClass="cell">...</h:panelGroup>
    </p:column> 
    <p:column>
        <f:facet name="header">...</f:facet>
        <h:panelGroup id="col2" styleClass="cell">...</h:panelGroup>
    </p:column> 
    <p:column>
        <f:facet name="header">...</f:facet>
        <h:panelGroup id="col3" styleClass="cell">...</h:panelGroup>
    </p:column> 
    ...
</p:dataTable>
<p:commandButton value="update" update="@(.cell)" />

That wrapping is clumsy, yes, but that's best you can get without homebrewing a custom renderer. You can always create a <my:column> tagfile to reduce the boilerplate.

See also:

• How do PrimeFaces Selectors as in update="@(.myClass)" work?