Image separator for rows in jsf data table - jsf-2

Question

I want to display an line/image as separator ( as shown here - image attached) between rows conditionally, and I have no idea on how to achieve this, please suggest, this is my sample that I have written to replicate the actual scenario,
<h:panelGrid columns="1" >
<h:dataTable value="#{testBean.myBeanList}" var="myBean">
<h:column>
<f:facet name="header">
<h:outputText value="EMPLOYEE NAME" />
</f:facet>
<h:outputText value="#{myBean.empName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="EMPLOYEE DEPARTMENT" />
</f:facet>
<h:outputText value="#{myBean.empDept}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="EMPLOYEE HR NAME" />
</f:facet>
<h:outputText value="#{myBean.empHRName}"/>
</h:column>
</h:dataTable>
</h:panelGrid>
public TestBean() {
myBeanList = new ArrayList<MyBean>();
for(int i =0;i<8;i++){
MyBean mb = new MyBean();
if(i == 2 || i == 4){
mb.setEmpName("NAME"+i);
}else{
mb.setEmpName("EMPLOYEE NAME"+i);
mb.setEmpDept("EMPLOYEE DEPT"+i);
mb.setEmpHRName("EMPLOYEE HR NAME"+i);
}
myBeanList.add(mb);
}
}

Answer 1

Use the rowClasses attribute of the <h:dataTable>. It takes a commaseparated string of CSS class names which are applied on the subsequent generated <tr> elements. You can then use CSS to put a top border in every cell (<td>) of the <tr> in question (those with "NAME2" and "NAME4" in your example).
<h:dataTable ... rowClasses="#{bean.rowClasses}">
At the same time of populating the data model, you should also populate the row classes. It should for the particular exapmle in the screenshot return something like this:
none,none,separator,none,separator,none,none,none
Then you just have to provide the necessary CSS:
tr.separator td {
border-top: 1px solid gray;
}
No need for an ugly and old fashioned separator image.