How to partially split each row of a Primefaces datatable? - jsf

Question

The problem I have is the following:
I have a datatable with a list of the class Producto, which internally consists of several fields of simple type and 2 objects of type Proveedor. Categoria and TipoProveedor are enums.
public class Producto {
private int idProducto;
private String nombre;
private Categoria categoria;
private Proveedor proveedorUno;
private Proveedor proveedorDos;
}
public class Proveedor {
private int idProveedor;
private TipoProveedor tipoProveedor;
private String nombre;
private BigDecimal precio;
}
My problem is that in each row of the datatable all the information must be displayed so that if a single filled provider comes, it will be displayed normal but if both fillings come, the part of the provider information is divided into 2 rows. Example:
|------------------------------------------------------------------|
| Nombre | Categoria | idProveedor | Nombre Proveedor | Precio |
|------------------------------------------------------------------|
| DIN-A4 | Papel | 10256 | Proveedor Manolito | 10.59 € |
| | | 24747 | Proveedor Fulanito | 10.75 € |
|------------------------------------------------------------------|
| DIN-A5 | Papel | 10256 | Proveedor Menganito | 4.77 € |
|------------------------------------------------------------------|
| DIN-A3 | Papel | 44787 | Proveedor Saturnino | 14.77 € |
|------------------------------------------------------------------|
I had tried to do it with a datatable like this but it does not look exactly as I need:
<p:dataTable id="listadoProductos" widgetVar="listadoProductos"
value="#{listadoProductosBean.listadoProductos}" var="producto"
emptyMessage="#{messages['tabla.VACIA']}">
<p:column headerText="#{messages['listado.NOMBRE']}">
<h:outputText value="#{producto.nombre}" />
</p:column>
<p:column headerText="#{messages['listado.CATEGORIA']}">
<h:outputText value="#{producto.categoria.desc}" />
</p:column>
<p:column headerText="#{messages['listado.ID_PROVEEDOR']}"
rendered="#{producto.proveedorUno != null && producto.proveedorDos != null}">
<p:panelGrid columns="1">
<p:row>
<h:outputText value="#{producto.proveedorUno.idProveedor}" />
</p:row>
<p:row>
<h:outputText value="#{producto.proveedorDos.idProveedor}" />
</p:row>
</p:panelGrid>
</p:column>
<p:column headerText="#{messages['listado.ID_PROVEEDOR']}"
rendered="#{producto.proveedorUno != null && producto.proveedorDos == null}">
<p:panelGrid columns="1">
<p:row>
<h:outputText value="#{producto.proveedorUno.idProveedor}" />
</p:row>
</p:panelGrid>
</p:column>
<p:column headerText="#{messages['listado.ID_PROVEEDOR']}"
rendered="#{producto.proveedorUno == null && producto.proveedorDos != null}">
<p:panelGrid columns="1">
<p:row>
<h:outputText value="#{producto.proveedorDos.idProveedor}" />
</p:row>
</p:panelGrid>
</p:column>
</p:dataTable>
Is it possible to do what I say?
My version of Primefaces is 6.2 but I could upgrade if I can get what I want.
Many Thanks.
NOTE: it could be worth it (although it is not desired) that the part of the providers divided into 2 appears even if there is only one. Example:
|------------------------------------------------------------------|
| Nombre | Categoria | idProveedor | Nombre Proveedor | precio |
|------------------------------------------------------------------|
| DIN-A4 | Papel | 10256 | Proveedor Manolito | 10.59 € |
| | | 24747 | Proveedor Fulanito | 10.75 € |
|------------------------------------------------------------------|
| DIN-A5 | Papel | 10256 | Proveedor Menganito | 4.77 € |
| | | | | |
|------------------------------------------------------------------|
| DIN-A3 | Papel | 44787 | Proveedor Saturnino | 14.77 € |
| | | | | |
|------------------------------------------------------------------|

Answer 1

You can use the groupRow attribute on the columns you want to group, so:
<p:column headerText="#{messages['listado.NOMBRE']}" groupRow="true">
<h:outputText value="#{producto.nombre}" />
</p:column>
<p:column headerText="#{messages['listado.ID_PROVEEDOR']}">
<h:outputText value="#{producto.proveedorUno.idProveedor}" />
</p:column>
See:
https://www.primefaces.org/showcase/ui/data/datatable/rowGroup.xhtml (rowspan)
https://primefaces.github.io/primefaces/8_0/#/components/datatable?id=row-grouping
To use a fixed row height, give your table a styleClass and style the table cells to have a min-height using CSS.
See:
How do I override default PrimeFaces CSS with custom styles?