Template Variables

All templates must be nested inside the <sortable-table> tag to be accessible to the polymer element.

Any filter used (eg: sum in a following example) must be a member of PolymerExpressions.prototype. See the Polymer Filters section for more details.

As always, only a very limited subset of Javascript is allowed within {{ }} expressions. See the Polymer documentation on Expression syntax.

Table Scoped Templates

These are passed as attributes to the sortable-table element, and act across all rows and columns in the table - unless overwritten by a corresponding Column Scoped Template.

Table § rowTemplate

Renderer for contents of <tr></tr> row.

Template Variable Description
{{record}} JSON object
{{record.selected}} Boolean indicating this row is contained in selected
{{record.editMode}} Boolean indicating this row is in edit mode
{{record.dirty}} Boolean indicating this row has been edited, and changes can be undone by reversing the undoStack
{{record.fields}} JSON map with keys for each column.name. Values are JSON objects containing computed value for the cell, the row and column
{{record.row}} Row in data

Example of a rowTemplate that prints out column values directly from the raw row of the data array. This is useful for rows that need to recalculate when values change:

Example of a rowTemplate that prints out column values based on internally calculated field values. The field names (ie: alice, bill, casey) are the names of the table columns, this is useful where column formulas are applied:

Example of a rowTemplate that uses a template (and a filter toKeyValueArray that turns an object into an array):

Table § rowEditorTemplate

Row template to use for a row in its user editing state. Only 1 row can be in the editing state at a time. Renderer for contents of <tr></tr> row when in edit mode (double clicked). Similiar to Table § rowTemplate.

In addtion to the template variables available to rowTemplate, there are:

Template Variable Description
{{editRow}} Current row being edited
{{editChanged}} Boolean indicating at least 1 dirty field in current edit
{{undoStack}} All dirty rows of current edit
{{undoEdit}} Function to restore original values of editRow
{{undoAllEdit}} Function to restore original values of all dirty rows
{{closeEdit}} Function to untoggle edit state, resets undoStack
{{cancelEdit}} Function to restore original values of dirty rows and untoggle edit state

It should be noted that all changes are immediate (via 2-way binding). The "undo" functionality attempts to update values back to their original state, any side effects that may have occured cannot be undone.

The undoStack contains an ordered list of all changed rows along with their original values. undoStack.original contains a copy of the row, and undoStack.ref is a reference to the row.

Table § cellTemplate

Renderer for entire <td></td> cell. Will be overwritten if columns specifies a cellTemplate.

Template Variable Description
{{column}} Current column from columns
{{value}} Computed value for cell
{{row}} Current row from data
{{args}} User supplied additional arguments

Example of a cellTemplate that displays an image beside the column value:

Note: Normally row[column.name] == value, but value can be manually set by specifying a formula. This is useful if value won't sort correctly but you need access to the original value.

Table § headerTemplate

Renderer for entire <th></th> cell. Access to {{column}}. Will be overwritten if specified in columns.

Example of a headerTemplate using images to indicate sorting:

Table § footerTemplate

Renderer for an additional row which spans all columns at the bottom of the table. This is useful for paging buttons. There is a built in template called defaultPaging that can be used, or a different one can be specified. This is independent to Column § footerTemplate as they serve different purposes and can be used concurrently.

Template Variable Description
{{page}} Current page number of data
{{lastPage}} Number of pages
{{pageSize}} Number of records per page
{{moveToFirstPage}} Function to move to the first page
{{moveToPreviousPage}} Function to move to the previous page (only if one exists)
{{moveToNextPage}} Function to move to the next page (only if one exists)
{{moveToLastPage}} Function to move to the last page
{{showMore}} Function to increase the pageSize by the original value of pageSize
{{data}} data

Example of a simple footerTemplate which allows the user to traverse pages.

Column Scoped Templates

These are defined within the columns attribute at a per-column scope.

Column § cellTemplate

Renderer for entire <td></td> cell. Overrides table's global cell template for a specific column. See Table § cellTemplate.

Column § headerTemplate

Renderer for entire <th></th> cell. Access to {{column}}. Overrides table's global header template for a specific column. See Table § cellTemplate.

Column § footerTemplate

Renderer for entire <td></td> cell. If no columns specify a footerTemplate the additional footer row will be omitted. If some but not all columns specify a template, the columns without a template specified will render an empty cell.

Template Variable Description
{{column}} Current column from columns
{{values}} Array of all computed values for cells in the current column
{{rowValues}} Array of all values from data for cells in the current column. Since a column may use a function to compute its value, there may not be any bound values: so this array may be empty.
{{args}} User supplied additional arguments

Two convinience polymer filters are included, sum and average which compute the numerical sum and average. Custom filters can also be used, see Polymer Filters.

Example of a footerTemplate that computes the sum of a column using a filter named sum: