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”: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 of the given list (users in the example), and an iterator variable, set by the as parameter (user in the example), will be injected in the body (similarly to the Play! list tag).

You can add custom attributes to the generated <table> tag by passing them as parameters of the #{table} tag:

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

The rowClass parameter is special: if present, all rows (<tr> tags) will be given a class attribute with its value.
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 pass additional parameters to add attributes to the <td> element:

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

Changelog

v1.2.2

* Generate <thead> and <tbody> tags (thanks to jbtbnl) * HTML-escape model fields to prevent XSS

v1.2.1