CODEWITHSUNDEEP
jsf-2primefaces
marius0114
marius0114

Reputation: 145

How to create a data Table or tree to look similar as the picture in primefaces?

i develop a web application and i want a similar table like in the picture.

Tabel from MongoVUE

Can i make a table with jsf2.2 and primefaces 4.0 with a plus button. And when i add on the plus button the documents a visible like in the picture (number 4 in the table).

Or is this impossible with jsf and primefaces and i need another framework. For my work i must work with jsf. So the framework must be compatible with jsf.

The <p:accordionPanel> for Primefaces looks not bad. Can i combine this with a <p:dataTable>? Or have the <p:dataTable> the chance to group table entries with the same doc-Number like in the picture below?

I found this Link Data Tabel looks good. The Tree looks also good Link Tree

Upvotes: 0

Views: 1584

Answers (1)

Qussay Najjar
Qussay Najjar

Reputation: 591

Use the same Tree - Animate example, but modify the expandedIcon and collapsedIcon of the first <p:treeNode> in order to get the plus and minus icons:

 <p:tree id="docTree" value="#{documentsController.root}" var="doc" animate="true">  
    <p:treeNode expandedIcon="ui-icon-plus"  
                collapsedIcon="ui-icon-minus">  
        <h:outputText value="#{doc.name}"/>  
    </p:treeNode>
 ...

[UPDATE]

Or if you want to get a data-table view, you can use Tree Table, and to get the plus and minus icons, add this to your css:

.ui-icon-triangle-1-e {
    background-position: -19px -128px !important;
}

.ui-icon-triangle-1-s {
    background-position: -50px -128px !important;
}

Upvotes: 1

Related Questions