With RichFaces you can create a data table like this:
<rich:dataTable id="myTable" value="#{myBean.values}" var="value">
<f:facet name="header">
<rich:columnGroup>
<rich:column />
<rich:column>Value 1</rich:column>
<rich:column>Value 2</rich:column>
<rich:column>Value 3</rich:column>
<rich:column>Value 4</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column />
<rich:column>#{value.val1}</rich:column>
<rich:column>#{value.val2}</rich:column>
<rich:column>#{value.val3}</rich:column>
<rich:column>#{value.val4}</rich:column>
<f:facet name="footer">
<rich:columnGroup>
<rich:column>TOTALS</rich:column>
<rich:column>#{myBean.totalVal1}</rich:column>
<rich:column>#{myBean.totalVal2}</rich:column>
<rich:column>#{myBean.totalVal3}</rich:column>
<rich:column>#{myBean.totalVal4}</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
This generates a basic HTML <table> with five columns, a header, and a footer.
However, if you do this instead (the <rich:dataTable> is exactly the same):
<div id="myTableHeader"></div>
<div id="myTableBody">
<rich:dataTable id="myTable" value="#{myBean.values}" var="value">
<f:facet name="header">
<rich:columnGroup>
<rich:column />
<rich:column>Value 1</rich:column>
<rich:column>Value 2</rich:column>
<rich:column>Value 3</rich:column>
<rich:column>Value 4</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column />
<rich:column>#{value.val1}</rich:column>
<rich:column>#{value.val2}</rich:column>
<rich:column>#{value.val3}</rich:column>
<rich:column>#{value.val4}</rich:column>
<f:facet name="footer">
<rich:columnGroup>
<rich:column>TOTALS</rich:column>
<rich:column>#{myBean.totalVal1}</rich:column>
<rich:column>#{myBean.totalVal2}</rich:column>
<rich:column>#{myBean.totalVal3}</rich:column>
<rich:column>#{myBean.totalVal4}</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
</div>
<div id="myTableFooter"></div>
RichFaces will place the <thead> inside the "myTableHeader" <div> and the <tfoot> inside the "myTableFooter" <div>, with the <tbody> remaining inside the <table> in the "myTableBody" <div>. RichFaces sets the width of every cell so that the columns still line up. Note that the ID's of these elements are important - they must start with the ID of the table element and end with these specific suffixes. The <table> actually contains a display:none copy of the header as well, and an empty footer.
I only know this works because I found it in some of our code, but I haven't been able to find any documentation on this feature. Is this feature documented anywhere? I don't really know what the rules are for it.
Related
Using PF 6.1, I have a Primefaces data table where I need to make certain cells editable. Most things are working fine, but when the page is refreshed, a duplicate empty element is inserted for each cell, and those elements disappear if I edit a row (even if I cancel editing). If I have normally 5 columns, I see 5 with class ui-editable-column and correct content, but when I refresh the page, I see additional 5 with class ui-panelgrid-cell that contain the data, and the original 5 with class ui-editable-column which are empty and make the table misaligned.
<p:panel>
<h:form>
<p:dataTable id="myTable" editable="true"
var="var"
value="#{ManagementBean.values}"
paginator="true"
paginatorPosition="top" rows="25"
paginatorTemplate="..."
tableStyle="table-layout: auto">
<p:ajax event="rowEdit" listener="#{ManagementBean.onRowEdit}" update="myTable"/>
<p:ajax event="rowEditCancel" listener="#{ManagementBean.onRowCancel}" update="myTable"/>
<!-- cells that dont need to be edited, have duplicate input and output fields-->
<p:column headerText="..." sortBy="...">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{var.name}"/></f:facet>
<f:facet name="input"><h:outputText value="#{var.name}"/></f:facet>
</p:cellEditor>
</p:column>
<!-- Example of cell that gets edited -->
<p:column headerText="...">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="..."/>
</f:facet>
<f:facet name="input">
<p:selectCheckboxMenu label="..." value="...">
<f:selectItems value="..." var="..."
itemLabel="..." itemValue="..."/>
</p:selectCheckboxMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:form>
</p:panel>
</p:panelGrid>
Not sure if this is relevant to the issue OP is facing, but I also encountered duplicated cells and I fixed it by changing:
<p:panelGrid></p:panelGrid>
to
<h:panelGrid></h:panelGrid>
this solves the duplication issue on my end.
Sample of my view page looks like the following:
<h:panelGrid>
<p:column>
<p:row>
<!-- contents... -->
</p:row>
</p:column>
</h:panelGrid>
Might be helpful to future readers.
I want to create a 2D Datatable Matrix with Primefaces.
I need to have fix columns and rows.
So far I'm here:
But that's not what I exactly want.
I want these kind:
My code looks like this one:
<p:dataTable value="#{testBean.zeilen}" var="zeile" style="width:75%;" editable="true" editMode="cell">
<p:column headerText="Exposition / Score"
styleClass="ui-widget-header" style="text-align:center;">
<h:outputText value="#{zeile}" />
</p:column>
<c:forEach items="#{testBean.werte}" var="w" >
<p:column headerText="#{w}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{w.entscheidung}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{w.entscheidung}" />
</f:facet>
</p:cellEditor>
</p:column>
</c:forEach>
</p:dataTable>
As you can see I got the data from my Bean, but in a wrong way.
Each row with 16 elements but I want 4 in each row like in the second picture.
I have to generate a dynamic table using JSF. I have a arraylist containing headers and another list containing list of strings for holding the actual data - each entry in the main list representing a row. Is it possible to generate a dynamic table using rich:datatable? Is rich:columns an option to be considered?
This code works -
<rich:dataTable
value="#{dataBean.getAttributeDetail().getAttributeRows()}"
var="dataValues" width="100%" border="1">
<rich:columns
value="#{dataBean.getAttributeDetail().getAttributeHeaders()}"
var="columns" index="ind" id="column#{ind}">
<f:facet name="header">
<h:outputText value="#{columns}" />
</f:facet>
<h:outputText value="#{warningValues[ind]} " />
</rich:columns>
</rich:dataTable>
If you are using RichFaces 4, it still does not support "rich:columns", so instead use "c:forEach", like this:
<rich:dataTable value="#{teamHandler.mitarbeiter}" var="m">
<rich:column>
<f:facet name="header">Mitarbeiter</f:facet>
<h:outputText value="#{m.name}" />
</rich:column>
<c:forEach items="#{datumsHandler.span}" var="d">
<rich:column>
<f:facet name="header">
<h:outputText value="d" />
</f:facet>
<h:outputText value="-" />
</rich:column>
</c:forEach>
</rich:dataTable>
More information here.
I'm a new developer in jsf1.2 & richfaces 3.3.3, i have a problem with my jsf page, when viewing a dynamic dataTable, i can't build the head with a group column, knowing that i use columns in ColumnGroup, column Span and Row have no effect even if i give values or not!
the code for the head part of the table:
<rich:dataTable cellpadding="0" cellspacing="0" width="700" border="0">
<f:facet name="header">
<rich:columnGroup>
<rich:columns var="column" value="#{xmlBean.tableModele.head.column}">
<rich:column breakBefore="#column.breakBefore}" rowspan="#{column.rowSpan}" colspan="#{column.colSpan}">
<h:outputText value="#{column.libelle}" rendered="#{column.champ.type=='text'}" />
</rich:column>
</rich:columns>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
I solved the problem :), it was necessary that i remove the "column" without 's', because the "columns" generate "column")
the code :
<f:facet name="header">
<rich:columnGroup>
<rich:columns var="column" value="#{xmlBean.tableModele.head.column}" rowspan="#{column.rowSpan}" colspan="#{column.colSpan}" breakBefore="#{column.breakBefore}">
<h:outputText value="#{column.champ.valeur}" rendered="#{column.champ.type=='text'}" />
</rich:columns>
</rich:columnGroup>
</f:facet>
thanks, its my fist post, i'm glad to be here ;)
I have List of items that needs to be displayed as a table. That table need to be repeated as a two-column grid where each cell contains the same table side by side where the right side is a continuation of the right side table, like so:
a|b|c a|b|c
-+-+- -+-+-
1|2|3 5|6|7
x|y|z n|m|o
..... .....
How can I achieve this?
Maybe you could make your managed bean return list of lists and use <ui:repeat> and <h:dataTable>. Each of your internal list is for one table, and contains table rows.
<ui:repeat value="#{bean.tablesLists}" var="tableList">
<h:dataTable var="tableRow" value="#{tableList}">
<h:column>
<f:facet name="header">
<h:outputText value="a" />
</f:facet>
<h:outputText value="#{tableRow.data1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="b" />
</f:facet>
<h:outputText value="#{tableRow.data2}" />
</h:column>
</h:dataTable>
</ui:repeat>