DOM Elements
The sortable-column
elements should work the same way as a columns
array.
<sortable-table>
<sortable-column name="fruit" cellTemplate="fruitsTemplate">Type of Fruit</sortable-column>
<sortable-column name="alice"></sortable-column>
<sortable-column name="bill"></sortable-column>
<sortable-column name="casey"></sortable-column>
<template id="fruitsTemplate">
<td>
<fruit-icon fruit="{{value}}"></fruit-icon> {{value}}
</td>
</template>
[
{ "fruit":"apple", "alice": 4, "bill": 10, "casey": 2 },
{ "fruit":"banana", "alice": 0, "bill": 4, "casey": 0 },
{ "fruit":"grape", "alice": 2, "bill": 3, "casey": 5 },
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]
</sortable-table>
Type of Fruit
{{value}}
|
[
{ "fruit":"apple", "alice": 4, "bill": 10, "casey": 2 },
{ "fruit":"banana", "alice": 0, "bill": 4, "casey": 0 },
{ "fruit":"grape", "alice": 2, "bill": 3, "casey": 5 },
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]
If data is only specified using arrays and column information isn't available, column names are ascending integers.
Note: If columns are named, then data
must also name columns within the rows. This is intentional to
avoid reformatting the data
array.
<sortable-table>
[[ "apple", 4, 10, 2 ],
[ "banana", 0, 4, 0 ],
[ "grape", 2, 3, 5 ],
[ "pear", 4, 2, 8 ],
[ "strawberry", 0, 14, 0 ]]
</sortable-table>
[[ "apple", 4, 10, 2 ],
[ "banana", 0, 4, 0 ],
[ "grape", 2, 3, 5 ],
[ "pear", 4, 2, 8 ],
[ "strawberry", 0, 14, 0 ]]
Binding in DOM Elements
All attributes (excluding name
) in each sortable-column
can be bound to.
<sortable-table>
<sortable-column name="fruit" title="{{column1}}"></sortable-column>
<sortable-column name="alice">{{column2}}</sortable-column>
[
{ "fruit":"apple", "alice": 4, "bill": 10, "casey": 2 },
{ "fruit":"banana", "alice": 0, "bill": 4, "casey": 0 },
{ "fruit":"grape", "alice": 2, "bill": 3, "casey": 5 },
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]
</sortable-table>
{{column2}}
[
{ "fruit":"apple", "alice": 4, "bill": 10, "casey": 2 },
{ "fruit":"banana", "alice": 0, "bill": 4, "casey": 0 },
{ "fruit":"grape", "alice": 2, "bill": 3, "casey": 5 },
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]