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}