Community contributed extensions

Play! Table Module

This module eases displaying data in HTML tables.

Installation

Install and enable this module as any other “Play! module(Play! Documentation)”:http://www.playframework.org/documentation/latest/modules.

Table templates tags

The module just provides two templates tags which can be directly used in your Play! views.

table

The table tag generates a HTML <table>. If you pass it a list of Play! models all their properties will be displayed:

#{table users /}

You can also precise the set of properties you want to display, by setting a columns parameter containing a map of (property −> label):

#{table users, columns: ['fullname':'Name', 'isAdmin':'Administrator'] /}

This form may be enough for simple use cases, but you may want to have more control on the way the properties are displayed. For that purpose you can define the content of the rows in the tag body using column tags:

#{table users, as: 'user'}
  #{column 'Name'}
    ${user.fullname.capitalizeWords()}
  #{/column}
  #{column 'Administrator'}
    ${user.isAdmin?'Yes':'No'}
  #{/column}
#{/table}

The tag body will be executed for each item in the given list (users in the example), providing it an iterator variable, set by the as parameter (user in the example).

You can also set an optional class parameter to add some CSS classes to the generated <table> HTML element as well as a rowClass parameter to add CSS classes for each <tr> element:

#{table users, class: 'user-table', rowClass: 'user-row' /}

Furthermore, each <tr> element will automatically be given an odd or even class, according to its position in the item list.

If you don’t write body you can use the table tag only with Play! models (ie. any class implementing play.db.Model). However, if you provide a body you can use it with any data type.

column

This tag can only be used inside a table tag. It generates a <td> HTML element:

#{table users, as: 'user'}
  #{column 'Name'}${user.fullname}#{/column}
#{/table}

Its first parameter sets the column title and its body defines the column content.

You can also set an optional class parameter to add some CSS classes to the <td> element:

#{table users, as: 'user'}
  #{column 'Name', class: 'user-column-name'}${user.fullname}#{/table}
#{/table}