data
attribute, or by in-lining valid JSON between the sortable-table
tags.
<sortable-table> [ { "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>
<sortable-table> <sortable-column>fruit</sortable-column> <sortable-column>alice</sortable-column> <sortable-column>bill</sortable-column> <sortable-column>casey</sortable-column> [ [ "apple", 4, 10, 2 ], [ "banana", 0, 4, 0 ], [ "grape", 2, 3, 5 ], [ "pear", 4, 2, 8 ], [ "strawberry", 0, 14, 0 ] ] </sortable-table>
data
is specifies as Arrays and not Objects, be sure to specify columns
as well otherwise column headers will be the integers 0 to N.
<sortable-table columns='["fruit","alice","bill","casey"]' data='[ [ "apple", 4, 10, 2 ], [ "banana", 0, 4, 0 ], [ "grape", 2, 3, 5 ], [ "pear", 4, 2, 8 ], [ "strawberry", 0, 14, 0 ] ]'> </sortable-table>
Or mix simple attributes with inlined content:
<sortable-table columns='["fruit","alice","bill","casey"]'> [ [ "apple", 4, 10, 2 ], [ "banana", 0, 4, 0 ], [ "grape", 2, 3, 5 ], [ "pear", 4, 2, 8 ], [ "strawberry", 0, 14, 0 ] ] </sortable-table>
<script> window.addEventListener('polymer-ready', function(){ document.getElementById('mytable').data = [ { "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 } ]; }); </script> <sortable-table id="mytable"></sortable-table>