<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../webcomponentsjs/webcomponents.min.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="../../prism-js/prism-js.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="project-docs.html">
	<style shim-shadowdom>
		.indent { margin-left: 65px; }
		sortable-table { width: 500px; margin-left: 65px; }
		sortable-table::shadow td.column-alice,
		sortable-table::shadow td.column-bill,
		sortable-table::shadow td.column-casey,
		sortable-table::shadow td.column-average,
		sortable-table::shadow td.column-total {
			text-align: right;
			padding-right: 5px;
			width: 100px;
			vertical-align: middle;
		}
	</style>
</head>
<body unresolved is="project-docs">

	<h1>DOM Elements</h1>

	The <code>sortable-column</code> elements should work the same way as a <code>columns</code> array.

	<prism-js language="markup">&lt;sortable-table&gt;
	&lt;sortable-column name="fruit" cellTemplate="fruitsTemplate"&gt;Type of Fruit&lt;/sortable-column&gt;
	&lt;sortable-column name="alice"&gt;&lt;/sortable-column&gt;
	&lt;sortable-column name="bill"&gt;&lt;/sortable-column&gt;
	&lt;sortable-column name="casey"&gt;&lt;/sortable-column&gt;
	&lt;template id="fruitsTemplate"&gt;
		&lt;td&gt;
			&lt;fruit-icon fruit="{{value}}"&gt;&lt;/fruit-icon&gt; {{value}}
		&lt;/td&gt;
	&lt;/template&gt;
	[
		{ "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 }
	]
&lt;/sortable-table&gt;</prism-js>

	<p>

	<sortable-table class="default">
		<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 style="text-align:left">
				<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>

	<p>

	If data is only specified using arrays and column information isn't available, column names are ascending integers.

	<p>
		<strong>Note:</strong> If columns are named, then <code>data</code> must also name columns within the rows. This is intentional to
		avoid reformatting the <code>data</code> array.
	</p>

	<prism-js language="markup">&lt;sortable-table&gt;
   [[ "apple", 4, 10, 2 ],
	[ "banana", 0, 4, 0 ],
	[ "grape", 2, 3, 5 ],
	[ "pear", 4, 2, 8 ],
	[ "strawberry", 0, 14, 0 ]]
&lt;/sortable-table&gt;</prism-js>

	<p>

	<sortable-table class="default">
		[[ "apple", 4, 10, 2 ],
		 [ "banana", 0, 4, 0 ],
		 [ "grape", 2, 3, 5 ],
		 [ "pear", 4, 2, 8 ],
		 [ "strawberry", 0, 14, 0 ]]
	</sortable-table>

	<h2>Binding in DOM Elements</h2>

	All attributes (excluding <code>name</code>) in each <code>sortable-column</code> can be bound to.

	<prism-js language="markup">&lt;sortable-table&gt;
	&lt;sortable-column name="fruit" title="{{column1}}"&gt;&lt;/sortable-column&gt;
	&lt;sortable-column name="alice"&gt;{{column2}}&lt;/sortable-column&gt;
	[
		{ "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 }
	]
&lt;/sortable-table&gt;</prism-js>

	<template is="auto-binding">
		<table class="indent">
			<tr>
				<td>Column 1 title : </td><td><input type="text" value="{{column1}}"></td>
			</tr>
			<tr>
				<td>Column 2 #text : </td><td><input type="text" value="{{column2}}"></td>
			</tr>
		</table>
		<sortable-table class="default">
			<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>
	</template>
</body>
</html>
