Home » Java » Enterprise Java » PrimeFaces 5.0 DataTable Column Toggler

About Josh Juneau

Josh Juneau
Josh is an application developer and technical writer. He has authored several books for Apress, primarily focusing on Java development. Most recently, he has authored Java EE 7 Recipes, Introducing Java EE 7, and Java 8 Recipes. Josh is a member of the JCP, and he is on the JSF 2.3 Expert Group.

PrimeFaces 5.0 DataTable Column Toggler

I have had an opportunity to work a bit with the PrimeFaces 5.0 DataTable, and the enhancements are great.  Today, I wanted to show just one of the new features…the DataTable column toggler.  This feature enables one to choose which columns are displayed via a list of checkboxes.

To use a column toggler, simply add a commandButton to display picklist of column choices into the header of the table, as follows:
 
 
 
 
 

<p:commandButton icon="ui-icon-calculator" 
   id="toggler" style="float: right;" type="button" value="Columns"/>

Next, add a columnToggler component to the table header, and specify the DataTable ID as the data source. In this case, the DataTable ID is “datalist”:

<p:columnToggler datasource="datalist" trigger="toggler"/>

That’s it! In the end, a button is added to the header of the table, which allows the user to specify which columns are displayed (Figure 1).

Figure 1:  Column Toggler in Action

Figure 1: Column Toggler in Action

The full source listing for the DataTable in this example is as follows:

<p:dataTable id="datalist" paginator="true" rowkey="#{item.id}"
     rows="10" rowsperpagetemplate="10,20,30,40,50" 
     selection="#{poolController.selected}" selectionmode="single"
     value="#{poolController.items}" var="item" widgetvar="poolTable">

    <p:ajax event="rowSelect"
      update="createButton viewButton editButton deleteButton"/>

    <p:ajax event="rowUnselect"
      update="createButton viewButton editButton deleteButton"/>

    <f:facet name="header">
       <p:commandButton icon="ui-icon-calculator" id="toggler"
           style="float: right;" type="button" value="Columns"/>
       <p:columnToggler datasource="datalist" trigger="toggler"/>
       <div style="clear:both" />
    </f:facet>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_id}"/>
        </f:facet>
        <h:outputText value="#{item.id}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_style}"/>
        </f:facet>
        <h:outputText value="#{item.style}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_shape}"/>
        </f:facet>
        <h:outputText value="#{item.shape}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_length}"/>
        </f:facet>
        <h:outputText value="#{item.length}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_width}"/>
        </f:facet>
        <h:outputText value="#{item.width}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_radius}"/>
        </f:facet>
        <h:outputText value="#{item.radius}"/>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ListPoolTitle_gallons}"/>
        </f:facet>
        <h:outputText value="#{item.gallons}"/>
    </p:column>
    <f:facet name="footer">
        <p:commandButton id="createButton" icon="ui-icon-plus"
            value="#{bundle.Create}"
            actionListener="#{poolController.prepareCreate}"
            update=":PoolCreateForm"
            oncomplete="PF('PoolCreateDialog').show()"/>
        <p:commandButton id="viewButton"   icon="ui-icon-search"
            value="#{bundle.View}" update=":PoolViewForm"
            oncomplete="PF('PoolViewDialog').show()"
            disabled="#{empty poolController.selected}"/>
        <p:commandButton id="editButton"   icon="ui-icon-pencil" 
            value="#{bundle.Edit}" update=":PoolEditForm"
            oncomplete="PF('PoolEditDialog').show()"
            disabled="#{empty poolController.selected}"/>
        <p:commandButton id="deleteButton" icon="ui-icon-trash" 
            value="#{bundle.Delete}"
            actionListener="#{poolController.destroy}"
            update=":growl,datalist"
            disabled="#{empty poolController.selected}"/>
    </f:facet>
</p:dataTable>

Happy coding with PrimeFaces 5.0! This example was generated using PrimeFaces 5.0 RC 2. The final release should be out soon!

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of