p:dataTable AutoComplete and ColumnToggler combination - primefaces

Question

When using autoComplete and columnToggler within a dataTable, I get a broken column-list in the column toggler.
That means, the column-list doesn't show the column-names but some javascript code instead (for each column).
Here is an example:
<p:commandButton id="showColsButton" type="button" value="Show Columns" />
<p:columnToggler datasource="myDataTable" trigger="showColsButton" />
<p:dataTable id="myDataTable" var="row" ...>
<p:column sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
</p:dataTable>
Is this a bug or is there any solution for this specific problem?

Answer 1

Putting an input in the header facet is not valid. If you want to use it as a filter or something, put it in a f:facet name="filter".
<p:dataTable id="myDataTable" var="row" ...>
<p:column filterBy="#{row.myCol1}" sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
</f:facet>
<f:facet name="filter">
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
But you might need to improve on the way the filter is used by not using the p:ajax but use an onchange=PF('dataTableWidget').filter(), adding a widgetVar attribute and adding filter attributes
See also
PrimeFaces showcase dataTable filter