-
Notifications
You must be signed in to change notification settings - Fork 906
/
Copy pathsheetsee-tables.html
148 lines (146 loc) · 8.41 KB
/
sheetsee-tables.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sheetsee.js</title>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='description' content='sheetsee.js, google, spreadsheet, visualize, data, javascript'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" href="../favicon.png">
<script type='text/javascript' src='../assets/highlight.js'></script>
<link rel='stylesheet' href='../assets/highlight.css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='../assets/style.css'>
<link rel="shortcut icon" href=''/>
</head>
<body class="sheetsee-tables">
<div class="container">
<h1 id="sheetsee-tables">sheetsee-tables</h1>
<p>Sheetsee,js uses this module to make tables. With this module you can create tables with your spreadsheet data that are sortable, searchable and paginate-able.</p>
<p>You'll need a placeholder <code><div></code> in your html, a <code><script></code> with a <a href="https://mustache.github.io">Mustache.js</a> template and a <code><script></code> that tells Sheetsee to build the table.</p>
<h2 id="your-html-placeholder">Your HTML Placeholder</h2>
<p>This is as simple as an empty <code><div></code> with an <code>id</code>.</p>
<h2 id="your-template">Your Template</h2>
<p>Your template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you! It is a <a href="https://mustache.github.io">mustache</a> template inside of <code><script></code> tags.</p>
<p><strong>The <code>id</code> of the template should be the same as the HTML placeholder it corresponds to but with "_template" on the end.</strong></p>
<h3 id="sorting">Sorting</h3>
<p>If you want users to be able to click on headers and sort that column, your template must include table headers with the class <code>tHeader</code>.</p>
<p>You can then style <code>.tHeader</code> in your CSS to make them look how you want.</p>
<p><strong>You must also make the inner text of your table headers have the same capitalization as in your spreadsheet. It's ok to have spaces in your table header but don't use spaces in your spreadsheet headers.</strong></p>
<ul>
<li>Spreadsheet column name: 'PlaceName'<ul>
<li>OK table header: 'Place Name'</li>
<li>Not OK table header: 'PLACENAME', 'placename'</li>
</ul>
</li>
</ul>
<h2 id="your-script">Your Script</h2>
<p>You'll want to set your table options and pass them into <code>Sheetsee.makeTable()</code>. If you want to add a search/filter, pass your options into <code>Sheetsee.initiateTableFilter()</code>.</p>
<h2 id="methods">Methods</h2>
<p>Functions for you to use! There are just two, woo!</p>
<h3 id="sheetsee-maketable-tableoptions-"><code>Sheetsee.makeTable(tableOptions)</code></h3>
<p>You pass in an object containing:</p>
<ul>
<li><code>data</code> <em>array</em> your data from Tabletop.js <strong>required</strong></li>
<li><code>pagination</code> <em>number</em> how many rows displayed at one time, defaults to all</li>
<li><code>tableDiv</code> <em>string</em> the <code><div></code> <code>id</code> placeholder in your HTML, includes the hash <code>#</code> <strong>required</strong></li>
<li><code>filterDiv</code> <em>string</em> the <code><div></code> <code>id</code> containing your <code><input></code> filter if using search, includes the hash <code>#</code> <strong>required if using filter</strong></li>
<li><code>templateID</code> <em>string</em> the <code>id</code> of your <code><script></code> tag with the template, defaults to assume it's the same as <code>tableDiv</code> + <code>_template</code>.</li>
</ul>
<pre><code class="lang-javascript">var tableOptions = {
"data": data,
"pagination": 10,
"tableDiv": "#fullTable",
"filterDiv": "#fullTableFilter",
"templateID": "fullTable_template"
}
Sheetsee.makeTable(tableOptions)
</code></pre>
<h4 id="pagination">Pagination</h4>
<p>If you do not put in a number for pagination, by default it will show all of the data at once. With pagination, HTML will be added at the bottom of your table for navigation, which you can style in your CSS:</p>
<p><em>HTML</em></p>
<pre><code class="lang-HTML"><div id='Pagination' currentPage class='table-pagination'>
Showing page {{currentPage}} of {{totalPages}}
<a class='pagination-pre'>Previous</a><a class='pagination-next'>Next</a>
</div>
</code></pre>
<p><em>CSS</em></p>
<pre><code class="lang-CSS">#Pagination {}
.pagination-next {}
.pagination-pre {}
.no-pag {}
</code></pre>
<h3 id="sheetsee-initiatetablefilter-tableoptions-"><code>Sheetsee.initiateTableFilter(tableOptions)</code></h3>
<p>If you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an id and if you want add placeholder text. You'll also need to add a 'clear' button using the <code>.clear</code> CSS class.</p>
<pre><code class="lang-javascript"><input id="tableFilter" type="text" placeholder="filter by.."></input>
<a href="#" class=".clear">Clear</a>
</code></pre>
<p>Then you'll pass your <code>tableOptions</code> object into this method:</p>
<pre><code class="lang-javascript">Sheetsee.initiateTableFilter(tableOptions)
</code></pre>
<h2 id="example">Example</h2>
<p><em>HTML</em></p>
<pre><code class="lang-HTML"><input id="siteTableFilter" type="text"></input><a href="#" class=".clear">Clear</a>
<div id="siteTable"></div>
</code></pre>
<p><em>Template</em></p>
<pre><code class="lang-JavaScript"><script id="tableTemplate" type="text/html">
<table>
<tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
{{#rows}}
<tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
{{/rows}}
</table>
</script>
</code></pre>
<p><em>JavaScript</em></p>
<pre><code class="lang-javascript"><script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var tableOptions = {
"data": data,
"pagination": 10,
"tableDiv": "#siteTable",
"filterDiv": "#siteTableFilter",
"templateID": "siteTable_template"
}
Sheetsee.makeTable(tableOptions)
Sheetsee.initiateTableFilter(tableOptions)
})
</script>
</code></pre>
<p><em><a href="http://jlord.us/sheetsee.js/demos/demo-table.html">View Demo</a></em>
<em><a href="http://jlord.us/sheetsee.js">Visit Site</a></em></p>
<footer>
<h4 id="getting-started">Getting Started</h4>
<ul>
<li><a href="./about.html">About Sheetsee</a></li>
<li><a href="./building.html">Building Sheetsee</a></li>
<li><a href="./basics.html">Basics</a></li>
</ul>
<h4 id="ideas">Ideas</h4>
<ul>
<li><a href="./templates.html">Templates</a></li>
<li><a href="./tips.html">Tips!</a></li>
</ul>
<h4>Demos</h4>
<ul>
<li><a href="../demos/demo-table.html">Table Demo</a></li>
<li><a href="../demos/demo-map.html">Map Demo</a></li>
</ul>
<h4 id="use">Use</h4>
<ul>
<li><a href="./sheetsee-core.html">Sheetsee-core</a></li>
<li><a href="./sheetsee-tables.html">Sheetsee-tables</a></li>
<li><a href="./sheetsee-maps.html">Sheetsee-maps</a></li>
</ul>
<h4 id="use">Contact</h4>
<ul>
<li><a href="http://www.twitter.com/jllord">@jllord</a></li>
<li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
</ul>
<h4><a class="home-link" href="../index.html">Home</a></h4>
</footer>
</div>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>