Prime Community Forum

Hi all,
resizable Columns doesn't work with scrollable dataTable and a columnGroup (header).

Example:

Page:

<h:form>

<p:dataTable
var="value"
scrollable="true"
resizableColumns="true"
value="#{tableBean.list}">

<f:facet name="header">
Scrollable and Resizable with colGroup
</f:facet>

<p:columnGroup type="header">
<p:row>
<p:column style="width:150px;" rowspan="2" headerText="A" />
<p:column style="width:300px;" colspan="2" headerText="B" />
<p:column style="width:300px;" colspan="2" headerText="C" />
<p:column style="width:300px;" colspan="2" headerText="D" />
<p:column style="width:300px;" colspan="2" headerText="E" />
<p:column style="width:300px;" colspan="2" headerText="F" />
<p:column style="width:300px;" colspan="2" headerText="G" />
<p:column style="width:300px;" colspan="2" headerText="H" />
<p:column style="width:300px;" colspan="2" headerText="I" />
</p:row>

<p:row>
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
<p:column style="width:150px;" headerText="A" />
<p:column style="width:150px;" headerText="B" />
</p:row>
</p:columnGroup>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

<p:column style="width:150px;">
#{value}
</p:column>

</p:dataTable>

</h:form>

Bean:

public class TableBean implements Serializable {

public TableBean(){
list = new ArrayList<Integer>();
for(int i=0;i<10;i++){
list.add(i);
}
}

private List<Integer> list;


public List<Integer> getList() {
return list;
}

}

Someone has some workaround to fix this?

No workaround of fix for this issue ?

I'm trying some pure javascript solution... But it really would be nice a built in fix.

See labs showcase scrollable table demo, there have been many improvements in 3.3 about this.