<!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" debug log="bind,ready,events"></script>
	<link rel="import" href="../../sortable-table.html">
	<link rel="import" href="../../../core-icon-button/core-icon-button.html">
	<link rel="import" href="../fruit-icon.html">
	<link rel="import" href="../project-docs.html">
	<link rel="import" href="../../../prism-js/prism-js.html">
	<link rel="stylesheet" href="../../css/extjs4.css" shim-shadowdom>
	<link rel="stylesheet" href="../../css/bootstrap.css" shim-shadowdom>
	<link rel="stylesheet" href="../../css/espn.css" shim-shadowdom>
	<style shim-shadowdom>
		core-icon-button { margin: 0 6px }
		sortable-table::shadow > table > tbody > tr > td.column-alice,
		sortable-table::shadow > table > tbody > tr > td.column-bill,
		sortable-table::shadow > table > tbody > tr > td.column-casey,
		sortable-table::shadow > table > tbody > tr > td.column-average,
		sortable-table::shadow > table > tbody > tr > td.column-total {
			margin-left: 5px;
			overflow: hidden;
			vertical-align: middle;
			width: 65px;
		}
		sortable-table.espn::shadow > table > tbody > tr > td.column-alice,
		sortable-table.espn::shadow > table > tbody > tr > td.column-bill,
		sortable-table.espn::shadow > table > tbody > tr > td.column-casey,
		sortable-table.espn::shadow > table > tbody > tr > td.column-average,
		sortable-table.espn::shadow > table > tbody > tr > td.column-total {
			text-align: right;
		}
	</style>
</head>
<body unresolved is="project-docs">

	<h1>Basic Setup of Themes</h1>

	CSS should be used to define the presentation of a <code>sortable-table</code>, and a <code>template</code> should be used to define any custom content.<br>
	A theme is a combination of presentation and content: CSS defines the overall look, while a collection of templates may be used to define certain behaviours such as paging toolbars.

	<p>

	It is easy enough to define a custom theme, as long as one understands the proper syntax to affect <a href="https://w3c.github.io/webcomponents/spec/shadow/" target="_blank" alt="shadow dom">Shadow DOM</a>.

	<p>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<h3>
		A theme inspired by Bootstrap <a href="../../css/bootstrap.css" target="_blank"><core-icon-button icon="file-download">CSS</core-icon-button></a>
		<a href="bootstrap.html" alt="Bootstrap Theme" target="_blank"><core-icon-button icon="visibility">options</core-icon-button></a>
	</h3>

	<prism-js language="markup">&lt;link rel="stylesheet" href="../../css/bootstrap.css" shim-shadowdom&gt;

&lt;div class="panel panel-default"&gt;
	&lt;div class="panel-heading"&gt;Optional heading&lt;/div&gt;
	&lt;sortable-table class="bootstrap" footerTemplate="indexedPager"&gt;
		&lt;!-- data --&gt;
	&lt;/sortable-table&gt;
&lt;/div&gt;</prism-js>

	<p>

	<div class="panel panel-default" style="width:721px">
		<div class="panel-heading">Optional heading</div>
		<sortable-table
			class="bootstrap"
			footerTemplate="indexedPager"
			rowSelection
			pageSize="5"
			checkbox
			multiSelect
		>
			<sortable-column name="fruit" cellTemplate="fruitsTemplate">Fruit</sortable-column>
			<sortable-column name="alice">Alice</sortable-column>
			<sortable-column name="bill">Bill</sortable-column>
			<sortable-column name="casey">Casey</sortable-column>
			<sortable-column name="average" formula="function(row){ return Math.round((row.alice + row.bill + row.casey)/3*10)/10; }">Average</sortable-column>
			<sortable-column name="total" formula="function(row){ return row.alice + row.bill + row.casey; }">Total</sortable-column>

			<template id="fruitsTemplate">
				<td style="text-align:left;vertical-align:middle;width:250px;">
					<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 },
				{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 },
				{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
				{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
				{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
				{fruit: 'grape', alice: 8, bill: 3, casey: 0 }
			]
		</sortable-table>
	</div>

	<br>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<h3>
		A theme inspired by Sencha's ExtJS 4 Grid <a href="../../css/extjs4.css" target="_blank"><core-icon-button icon="file-download">CSS</core-icon-button></a> <a href="extjs4.html" alt="ExtJS 4 Theme" target="_blank"><core-icon-button icon="visibility">options</core-icon-button></a></a>
	</h3>

	<prism-js language="markup">&lt;link rel="stylesheet" href="../../css/extjs4.css" shim-shadowdom&gt;

&lt;div class="x-panel x-grid x-panel-default-framed"&gt;
	&lt;div class="x-panel-header-default-framed-top"&gt;Optional heading&lt;/div&gt;
	&lt;sortable-table class="extjs4" footerTemplate="defaultPager"&gt;
		&lt;!-- data --&gt;
	&lt;/sortable-table&gt;
&lt;/div&gt;</prism-js>

	<p>

	<div class="x-panel x-grid" style="width:725px">
		<div class="x-panel-header-default-framed-top">Optional heading</div>
		<sortable-table
			class="extjs4"
			footerTemplate="defaultPager"
			rowSelection
			pageSize="5"
			checkbox
			multiSelect
		>
			<sortable-column name="fruit" cellTemplate="fruitsTemplate">Fruit</sortable-column>
			<sortable-column name="alice">Alice</sortable-column>
			<sortable-column name="bill">Bill</sortable-column>
			<sortable-column name="casey">Casey</sortable-column>
			<sortable-column name="average" formula="function(row){ return Math.round((row.alice + row.bill + row.casey)/3*10)/10; }">Average</sortable-column>
			<sortable-column name="total" formula="function(row){ return row.alice + row.bill + row.casey; }">Total</sortable-column>

			<template id="fruitsTemplate">
				<td style="text-align:left;vertical-align:middle;">
					<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 },
				{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 },
				{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
				{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
				{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
				{fruit: 'grape', alice: 8, bill: 3, casey: 0 }
			]
		</sortable-table>
	</div>

	<br>

	<hr style="width:75%;height:1px;border:none;color:#DDD;background-color:#DDD;" align="left">

	<h3>
		A theme inspired by ESPN.com <a href="../../css/espn.css" target="_blank"><core-icon-button icon="file-download">CSS</core-icon-button></a>
	</h3>

	<prism-js language="markup">&lt;link rel="stylesheet" href="../../css/espn.css" shim-shadowdom&gt;

&lt;div class="mod-container"&gt;
	&lt;div class="mod-header"&gt;Optional heading&lt;/div&gt;
	&lt;sortable-table class="espn" footerTemplate="simplePager"&gt;
		&lt;!-- data --&gt;
	&lt;/sortable-table&gt;
&lt;/div&gt;
	</prism-js>

	<p>

	<div style="width:723px;" class="mod-container">
		<div class="mod-header">Optional heading</div>
		<sortable-table
			class="espn"
			footerTemplate="simplePager"
			rowSelection
			pageSize="5"
			checkbox
			multiSelect
		>
			<sortable-column name="fruit" cellTemplate="fruitsTemplate">Fruit</sortable-column>
			<sortable-column name="alice">Alice</sortable-column>
			<sortable-column name="bill">Bill</sortable-column>
			<sortable-column name="casey">Casey</sortable-column>
			<sortable-column name="average" formula="function(row){ return Math.round((row.alice + row.bill + row.casey)/3*10)/10; }">Average</sortable-column>
			<sortable-column name="total" formula="function(row){ return row.alice + row.bill + row.casey; }">Total</sortable-column>

			<template id="fruitsTemplate">
				<td
					style="text-align:left;vertical-align:middle;width:250px;"
					class="column-{{column.name}}
						{{sortColumn == column.name && sortDescending ? 'sorted-column-desc' : ''}}
						{{sortColumn == column.name && !sortDescending ? 'sorted-column-asc' : ''}}"
				>
					<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 },
				{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 },
				{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
				{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
				{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
				{fruit: 'grape', alice: 8, bill: 3, casey: 0 }
			]
		</sortable-table>
	</div>
</body>
</html>