Sortable Table using Polymer Web Components

# 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

    	<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>

[ { "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

    	<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>

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 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>

[ [ "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.

    	<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>