Search code examples
javajsfjsf-2datatableprimefaces

How to represent nested data in a Primefaces datatable?


Here is my model :

User.java

public class User {
   //...

   public List<User> getFriends() {
      // ...
   }
}

I would like to build a table of user friends like this :

users.jsf

+----------+------------+
|   USER   |   FRIENDS  |
+----------+------------+
|          |    ALICE   |
|          +------------+        
|   ADAM   |    BOB     |
|          +------------+
|          |    PITT    |
+----------+------------+
|          |            |
....

Since there are many users, it's not possible to dump the user table in one go.

The datatable component is ideal in this case because it has built-in pagination support. It is ideal too because it's possible to sort columns...

Unfortunately, I wasn't able to find through the Primefaces examples a way for changing the rowspan in user columns.

How can I build this datatable ?

Some other OP having this similar issue:

EDIT
Here is the final solution I came up with.


Solution

  • Based on @Kerem's answer, here is the solution I came up with:

    In order to make the nested datable like own rows of main datatable, I have overriden the CSS class .ui-dt-c. Check in h:head the style tag for details.

    <?xml version="1.0" encoding="UTF-8"?>
    <html
        xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions"
        xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>USERS and their friends</title>
        <style>
           .ui-dt-c {
              padding: 0px !important;
           }
        </style>
    </h:head>
    <h:body>
    <h:form id="form">
    <p:dataTable
        value="#{users.list}"
        var="u">
    
        <p:columnGroup type="header">
            <p:row>
                <p:column headerText="USER" />
                <p:column headerText="FRIENDS" />
            </p:row>
        </p:columnGroup>
    
        <p:column>#{u.name}</p:column>
        <p:column>
            <p:dataTable
                value="#{u.friends}"
                var="f">
                <p:column>#{f.name}</p:column>
            </p:dataTable>
        </p:column>
    </p:dataTable>
    </h:form>