Data Input Formats
Table data can be loaded using the data attribute, or by in-lining valid JSON between the sortable-table tags.
Inlined Content
[
{ "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 }
]
DOM
fruit
alice
bill
casey
[
[ "apple", 4, 10, 2 ],
[ "banana", 0, 4, 0 ],
[ "grape", 2, 3, 5 ],
[ "pear", 4, 2, 8 ],
[ "strawberry", 0, 14, 0 ]
]
Simple Attributes
While binding full JSON objects to attributes may be necessary for advanced operation, the custom element is smart enought to figure things out if given simple arrays.
If the 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 class="default" 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 class="default" 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>
[
[ "apple", 4, 10, 2 ],
[ "banana", 0, 4, 0 ],
[ "grape", 2, 3, 5 ],
[ "pear", 4, 2, 8 ],
[ "strawberry", 0, 14, 0 ]
]
Javascript
While more advanced Javascript binding is possible, loading data into the component can be as simple as assignment of a JSON array.