Why <h:dataTable> make all rows as same as "selected row" value? - jsf

Question

I've ArrayList Collection carry the values properly , but the problem when i rendered it in h:dataTable tag the rows become all same value like in the picture.
<h:dataTable value="#{contactController.contacts }" var="contact"
rowClasses="oddRow, evenRow" styleClass="contactTable"
headerClass="headerTable" columnClasses="normal,centered"
rendered="#{not empty contactController.contacts }">
<h:column>
<f:facet name="header">
<h:column>
<h:outputText value="Name" />
</h:column>
</f:facet>
<h:outputText
value="#{contactController.contact.firstName }#{ contactController.contact.secondName }" />
</h:column>
<h:column>
<f:facet name="header">
<h:column>
<h:outputText value="Action" />
</h:column>
</f:facet>
<h:panelGrid columns="2">
<h:commandLink value="remove"
action="#{contactController.remove }">
<f:setPropertyActionListener value="#{contact }"
target="#{contactController.selectedContact }" />
</h:commandLink>
<h:commandLink value="edit" action="#{contactController.read}">
<f:setPropertyActionListener value="#{contact }"
target="#{contactController.selectedContact }" />
</h:commandLink>
</h:panelGrid>
</h:column>
</h:dataTable>
Any suggestion? .

Answer 1

I think there are two problems with your code.
First you don't need the bean's name in your columns. Simply use the content of the var attribute (in your case "contact" and not "contactController.contact")
Second: The h:column inside f:facet is not correct. Put the h:outputText directly into f:facet.
Change your first column this way:
<h:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{contact.firstName} #{contact.secondName }" />
</h:column>