selectManyCheckbox into p:dataTable column - jsf

Question

I can not correctly view the contents of a column with selectManyCheckbox in p:dataTable.
Here my .xhtml:
<h:form id="projAccess" enctype="multipart/form-data">
<p:dataTable tableStyle="width:auto" id="i_dtb2" var="p" value="#{comBean.l_uSrcRes}" paginator="true" rows="5" rowsPerPageTemplate="5,10"
paginatorPosition="bottom">
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="User" />
<p:column rowspan="2" headerText="Asset" />
<p:column colspan="6" headerText="Roles" />
<p:column rowspan="2" colspan="2" headerText="Action" />
</p:row>
<p:row>
<p:column headerText="Project Manager"></p:column>
<p:column headerText="Project Manager Deputy"></p:column>
<p:column headerText="Business Analyst"></p:column>
<p:column headerText="Functional Analyst"></p:column>
<p:column headerText="Technical Analyst"></p:column>
<p:column headerText="Developer"></p:column>
</p:row>
</p:columnGroup>
<p:column>
<h:outputText value="#{p.usercd}" />
</p:column>
<p:column>
<h:outputText value="#{p.asset}" />
</p:column>
<p:column colspan="6">
<h:panelGroup layout="block" >
<p:selectManyCheckbox columns="6" value="#{p.rolesList}">
<f:selectItems value="#{comBean.l_roles}" var="role" itemLabel="#{role}" itemValue="#{role}" />
</p:selectManyCheckbox>
</h:panelGroup>
</p:column>
<p:column>
<p:commandButton action="#{comBean.m_updateAccess}" ajax="false" icon="ui-icon-pencil">
<f:setPropertyActionListener value="#{p}" target="#{comBean.f_selectedUser}" />
<f:param name="area" value="project" />
</p:commandButton>
</p:column>
<p:column>
<p:commandButton action="#{ubean.m_deleteUser}" ajax="false" icon="ui-icon-trash">
<f:setPropertyActionListener value="#{p}" target="#{comBean.f_selectedUser}" />
<f:param name="area" value="project" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
Here the result:
How can I adapt content to header columns?

Answer 1

You are using tableStyle="width:auto" in your p:dataTable.
Removing this will align the checkboxes to its respective columns but you can notice that the columns are still a little bit misaligned.
To solve this, you can add style="padding:0px;" on your checkbox p:column.
Your code will look something like this.
<p:dataTable id="i_dtb2" var="p" value="#{comBean.l_uSrcRes}" paginator="true" rows="5" rowsPerPageTemplate="5,10"
paginatorPosition="bottom">
// other codes
<p:column colspan="6" style="padding:0px;">
// other codes
</p:column>
// other codes
</p:dataTable>
On another note, if your functional specification allows it, you can remove [Project Manager, Project Manager Deputy, etc] headers, since your are displaying them right next to the checkboxes.
You will have to remove p:columnGroup and set the headerText to their respective columns with "Roles" as headerText for your checkBox column.
Hope this helps.