How to partially split each row of a Primefaces datatable?

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 € |
|        |           |             |                     |         |
|------------------------------------------------------------------|

Jasper de Vries · Answer 1 · 2020-10-15T05:53:22.757

3

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:

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?

edited Oct 15 '20 at 05:53

answered Oct 12 '20 at 06:29

Jasper de Vries

19,370
6
64
102

No, this is not what I'm looking for. I don't need to group by a column. What I need is to partially divide a row in two per record. Is not the same. – MrCode Oct 14 '20 at 17:18
2

Then, all you need is a CSS rule with `white-space:nowrap` and some `
` tags, right? – Jasper de Vries Oct 16 '20 at 06:13
Agreed. Stop thinking of it as "splitting rows" you need to return an object for 1 row that represents your data nad then in the cells do as @JasperdeVries mentioned and use `white-space:nowrap` and `
` tags to make the columns that have more than 1 value appear that way – Melloware Oct 18 '20 at 12:31

How to partially split each row of a Primefaces datatable?

1 Answers1