PrimeFaces 3 dimensional DataTable - jsf

Question

I have a 2D DataTable which I would like to insert a variable number of panels inside, essentially creating a 3D DataTable.
The 2D table looks as follows:
ll
<p:dataTable var="rowName" value="#{tableBean.rowNames}">
<p:column headerText="" styleClass="ui-widget-header">
<h:outputText value="#{rowName}"/>
</p:column>
<p:columns var="columnName" value="#{tableBean.colNames}" headerText="#{columnName}">
<p:panel>
<h:outputText value="panel"/>
</p:panel>
</p:columns>
</p:dataTable>
And Java:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.ArrayList;
import java.util.List;
#ManagedBean
#RequestScoped
public class TableBean {
private List<String> rowNames = new ArrayList<String>();
private List<String> colNames = new ArrayList<String>();
private ArrayList<ArrayList<ArrayList<String>>> data3D = new ArrayList<ArrayList<ArrayList<String>>>();
public TableBean() {
rowNames.add("row1");
rowNames.add("row2");
colNames.add("col1");
colNames.add("col2");
colNames.add("col3");
// Setup 3 dimensional structure
for (int i = 0; i < rowNames.size(); i++) {
data3D.add(new ArrayList<ArrayList<String>>());
for (int j = 0; j < colNames.size(); j++) {
data3D.get(i).add(new ArrayList<String>());
}
}
// row 1, col 1, 3 items
data3D.get(0).get(0).add("item1");
data3D.get(0).get(0).add("item2");
data3D.get(0).get(0).add("item3");
// row 1, col 2, 1 items
data3D.get(0).get(1).add("item1");
// row 1, col 3, 2 items
data3D.get(0).get(2).add("item1");
data3D.get(0).get(2).add("item2");
// row 2, col 1, 2 item
data3D.get(1).get(0).add("item1");
data3D.get(1).get(0).add("item2");
// row 2, col 2, 1 item
data3D.get(1).get(1).add("item1");
}
public List<String> getRowNames() { return rowNames; }
public void setRowNames(List<String> rowNames) { this.rowNames = rowNames; }
public List<String> getColNames() { return colNames; }
public void setColNames(List<String> colNames) { this.colNames = colNames; }
public ArrayList<ArrayList<ArrayList<String>>> getData3D() { return data3D; }
public void setData3D(ArrayList<ArrayList<ArrayList<String>>> data3D) { this.data3D = data3D; }
}
But I would like to achieve the following, where p1, p2, p3, etc are PrimeFaces panels:
+------+--------+--------+--------+--
| | Col1 | Col2 | Col3 | .... .... .... ....
+------+--------+--------+--------+--
| | +----+ | +----+ | +----+ |
| | | p1 | | | p1 | | | p1 | |
| | +----+ | +----+ | +----+ |
| Row1 | | p2 | | | | p2 | |
| | +----+ | | +----+ |
| | | p3 | | | |
| | +----+ | | |
+------+--------+--------+--------+
| | +----+ | +----+ | |
| | | p1 | | | p1 | | |
| Row2 | +----+ | +----+ | |
| | | p2 | | | |
| | +----+ | | |
+------+--------+--------+--------+
| .... |
| .... |
....
Is it possible to use the 3rd dimension (list of strings) to create a panel for each string, within each cell of the DataTable?

Answer 1

The solution as RongNK suggested is to use ui:repeat.
By using the brace notation [][], the array from the 3rd dimension can be specified. The index of the row and column can be accessed from the rowIndexVar and colIndexVar attributes from <p:dataTable> and <p:columns> respectively.
<p:dataTable var="rowName" value="#{tableBean.rowNames}" rowIndexVar="rowIdx">
<p:column headerText="" styleClass="ui-widget-header">
<h:outputText value="#{rowName}"/>
</p:column>
<p:columns var="columnName" value="#{tableBean.colNames}" headerText="#{columnName}"
columnIndexVar="colIdx">
<ui:repeat value="#{tableBean.data3D[rowIdx][colIdx]}" var="data">
<p:panel>
<h:outputText value="#{data}"/>
</p:panel>
</ui:repeat>
</p:columns>
</p:dataTable>