<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.
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.
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):
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.
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.
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:
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.
These are defined within the columns
attribute at a per-column scope.
Renderer for entire <td></td>
cell.
Overrides table's global cell template for a specific column.
See Table § cellTemplate.
Renderer for entire <th></th>
cell. Access to {{column}}
.
Overrides table's global header template for a specific column.
See Table § cellTemplate.
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
: