<!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="project-docs.html">

	<style shim-shadowdom>
		input { text-align: right }
		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>Paging, (Top N-Rows when <code>page==1</code>)</h1>

	Respond to changes in `page` and `pageSize`.<br>
	Gracefully handle out of range values.<br>
	Don't be confused by sorting, selection or select all.<br>

	<p>

	<template id="example" bind>
		<sortable-table
			class="default"
			page="{{page}}"
			pageSize="{{pageSize}}"
			checkbox
			multiselect
			columns="{{columns}}"
			selected="{{selected}}"
			sortColumn="fruit"
			footerTemplate="defaultPager"
		>
		[
			{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 },
			{fruit: 'lemon', alice: 5, bill: 7, casey: 2 },
			{fruit: 'mango', alice: 3, bill: 1, casey: 7 },
			{fruit: 'peach', alice: 1, bill: 4, casey: 4 },
			{fruit: 'watermelon', alice: 3, bill: 8, casey: 8 },
			{fruit: 'cantaloupe', alice: 2, bill: 9, casey: 12 },
			{fruit: 'cherry', alice: 3, bill: 5, casey: 3 },
			{fruit: 'plum', alice: 8, bill: 9, casey: 0 },
			{fruit: 'kiwi', alice: 4, bill: 4, casey: 2 },
			{fruit: 'orange', alice: 1, bill: 3, casey: 7 },
			{fruit: 'raspberry', alice: 4, bill: 4, casey: 5 }
		]
		</sortable-table>
	</template>

	<p>

	<template id="info" bind>
		<table style="margin-left: 65px;">
			<tr><td><strong>Page</strong></td><td><input type="number" value="{{page}}"></td></tr>
			<tr><td><strong>PageSize</strong></td><td><input type="number" value="{{pageSize}}"></td></tr>
			<tr><td><strong>Selected</strong></td><td style="text-align:right;padding-right:17px;">{{selected.length}}</td></tr>
		</table>
		<br>
		<sortable-table class="default" data="{{selected}}"></sortable-table>
	</template>

	<script>
	window.addEventListener('polymer-ready', function(){
		var model = {
			sortColumn: 'fruit',
			page: 1,
			pageSize: 7,
			columns: [
				{name: 'fruit'},
				{name: 'alice'},
				{name: 'bill'},
				{name: 'casey'}
			],
			selected: []
		};
		document.getElementById('example').model = model;
		document.getElementById('info').model = model;
	});
	</script>
</body>
</html>