FrozenColumns does not work well with ColumnGroup in DataTable

[mcuadradome]

Hi, I'm using the DataTable component with ColumnGroup, but it does not show the headers and the columns are uneven.

code .xhtml

Code: Select all

 <h:panelGroup id="tablaPanel" class="roundtablez" layout="block">
                    <p:dataTable id="dtProds" var="item" value="#{semanasRequeridasMB.lazyCategoria}" paginator="true" rows="10"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                 currentPageReportTemplate="{currentPage} de {totalPages}"
                                 selectionMode="single" lazy="true"
                                 styleClass="datatabledos roundtable" 
                                 scrollable="true"
                                 emptyMessage="#{msg['lbl_no_registros']}"
                                 editable="true" editMode="cell" 
                                 style="margin-bottom:0" frozenColumn="1" scrollWith="100%" >    

                        <p:ajax event="cellEdit" listener="#{semanasRequeridasMB.onCellEditCategoria}" />                                                           

                        <p:columnGroup type="header" >
                            <p:row>                            
                                <p:column rowspan="2" headerText="Categoria" style="width:250px" />
                                <ui:repeat value="#{semanasRequeridasMB.mesesTabla}" var="mes">
                                    <p:column colspan="5" headerText="#{mes}" style="width:400px" />                            
                                </ui:repeat>
                                <p:column rowspan="2" headerText="" style="width:25px" exportable="false"/>
                            </p:row>
                            <p:row> 
                                <ui:repeat value="#{semanasRequeridasMB.mesesTabla}" var="mes">
                                    <p:column headerText="Inv. Inicial"/>
                                    <p:column headerText="SellOut" />
                                    <p:column headerText="Sem. Reales" />
                                    <p:column headerText="Sem. Req." />
                                    <p:column headerText="SellIn" />                                                                                        
                                </ui:repeat>
                            </p:row>
                        </p:columnGroup>      

                        <p:column>
                            <h:outputText value="#{item.categoriaProducto.replaceFirst('0_', '')}"
                                          rendered="#{item.esProducto == false}"
                                          style="font-weight: bold" />
                        </p:column>

                        <c:forEach items="#{semanasRequeridasMB.mesesTabla}" var="mes">
                            <p:column>
                                <h:outputText value="#{item.informacionSemanasMes[mes].inventarioInicial}">
                                    <f:convertNumber maxFractionDigits="0" />
                                </h:outputText>
                            </p:column>

                            <p:column>
                                <h:outputText value="#{item.informacionSemanasMes[mes].sellOut}">
                                    <f:convertNumber maxFractionDigits="0" />
                                </h:outputText>
                            </p:column>

                            <p:column>
                                <h:outputText value="#{item.informacionSemanasMes[mes].semanasReales}"/>
                            </p:column>

                            <p:column>
                                <h:outputText value="#{item.informacionSemanasMes[mes].semanasRequeridas}" rendered="#{item.informacionSemanasMes[mes].esActual == false}"/>

                                <p:cellEditor id="outPorcentajeCat" rendered="#{item.informacionSemanasMes[mes].esActual}">
                                    <f:facet name="output">
                                        <h:outputText value="#{item.informacionSemanasMes[mes].semanasRequeridas}">
                                            <f:convertNumber minFractionDigits="2"/>
                                        </h:outputText>
                                    </f:facet>

                                    <f:facet name="input"> 
                                        <h:inputText value="#{item.informacionSemanasMes[mes].semanasRequeridas}" validatorMessage="El valor ingresado no puede ser inferior a : 0">
                                            <f:validateLongRange minimum="0"  /> 
                                        </h:inputText>
                                    </f:facet>                            
                                </p:cellEditor>
                            </p:column>

                            <p:column style="border-right-width: 3px;">
                                <h:outputText value="#{item.informacionSemanasMes[mes].sellIn}">
                                    <f:convertNumber maxFractionDigits="0"/>
                                </h:outputText>
                            </p:column>
                        </c:forEach> 
                        <p:column>
                            <p:commandButton actionListener="#{semanasRequeridasMB.cargarDialogo(item)}" icon="ui-icon-search" title="Visualizar" update="@form">
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                </h:panelGroup>

screenshot https://ibb.co/mNOvCz

screenshot without frozenColumn https://ibb.co/dF7GKe

PrimeFaces: 6.2
Servidor WildFly 13

Thank you.

[Ibrahim Siripe]

viewtopic.php?f=3&t=40580