You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With this module you can create tables of your data that are sortable, searchable and paginate-able.
5
+
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.
7
6
8
-
You'll need a placeholder `<div>` in your html, a `<script>` mustache template and a `<script>` that initiates the table.
7
+
You'll need a placeholder `<div>` in your html, a `<script>`with a [Mustache.js](https://mustache.github.io) template and a `<script>` that tells Sheetsee to build the table.
9
8
10
9
## Your HTML Placeholder
11
10
12
-
This is as simple as an empty `<div>` with an id.
11
+
This is as simple as an empty `<div>` with an `id`.
13
12
14
13
## Your Template
15
14
16
-
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 an HTML template inside of `<script>` tags. **The id of the template should be the same as the HTML placeholder it corresponds to but with "_template" on the end. Unless you're using one template, for multiple divs, in which case, you'll pass in the template name in the options of `makeTable()`**
15
+
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 [mustache](https://mustache.github.io) template inside of `<script>` tags.
16
+
17
+
**The `id` of the template should be the same as the HTML placeholder it corresponds to but with "_template" on the end.**
17
18
18
19
### Sorting
19
20
20
21
If you want users to be able to click on headers and sort that column, your template must include table headers with the class `tHeader`.
21
22
22
23
You can then style `.tHeader` in your CSS to make them look how you want.
23
24
25
+
**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.**
26
+
27
+
- Spreadsheet column name: 'PlaceName'
28
+
- OK table header: 'Place Name'
29
+
- Not OK table header: 'PLACENAME', 'placename'
30
+
24
31
## Your Script
25
32
26
-
You'll want to set your table options and pass them into `Sheetsee.makeTable()`. If you want to add a search/filter, pass your options into `Sheetsee.initiateTableFilter()`
33
+
You'll want to set your table options and pass them into `Sheetsee.makeTable()`. If you want to add a search/filter, pass your options into `Sheetsee.initiateTableFilter()`.
34
+
35
+
## Methods
27
36
28
-
## Funtions
37
+
Functions for you to use! There are just two, woo!
29
38
30
-
### Sheetsee.makeTable(tableOptions)
39
+
### `Sheetsee.makeTable(tableOptions)`
31
40
32
41
You pass in an object containing:
33
42
34
-
-`data` your data array
35
-
-`pagination` how many rows displayed at one time, defaults to all
36
-
-`tableDiv` the <div>placeholder in your HTML
37
-
-`filterDiv` the `<div>` containing your `<input>` filter if using search
38
-
-`templateID`if you are reusing a template, use it's name here (if you don't include this, it will assume it matches `tableDiv` + `_template`)
43
+
-`data`_array_your data from Tabletop.js **required**
44
+
-`pagination`_number_how many rows displayed at one time, defaults to all
45
+
-`tableDiv`_string_the `<div>``id`placeholder in your HTML, includes the hash `#`**required**
46
+
-`filterDiv`_string_the `<div>``id`containing your `<input>` filter if using search, includes the hash `#`**required if using filter**
47
+
-`templateID`_string_ the `id` of your `<script>` tag with the template, defaults to assume it's the same as `tableDiv` + `_template`.
39
48
40
49
```javascript
41
50
var tableOptions = {
42
-
"data":gData,
43
-
"pagination":10,
44
-
"tableDiv":"#fullTable",
45
-
"filterDiv":"#fullTableFilter",
46
-
"templateID":"fullTable"
47
-
}
51
+
"data":data,
52
+
"pagination":10,
53
+
"tableDiv":"#fullTable",
54
+
"filterDiv":"#fullTableFilter",
55
+
"templateID":"fullTable_template"
56
+
}
48
57
Sheetsee.makeTable(tableOptions)
49
58
```
50
59
51
60
#### Pagination
52
61
53
-
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 naviagtion, which you can style in your CSS:
62
+
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:
54
63
55
64
_HTML_
56
65
@@ -64,42 +73,34 @@ _HTML_
64
73
_CSS_
65
74
66
75
```CSS
67
-
#Pagination {background: #eee;}
68
-
.pagination-next, .pagination-pre {cursor: hand;}
69
-
.no-pag {color: #acacac;}
76
+
#Pagination {}
77
+
.pagination-next {}
78
+
.pagination-pre {}
79
+
.no-pag {}
70
80
```
71
81
72
-
##Table Filter/Search
82
+
### `Sheetsee.initiateTableFilter(tableOptions)`
73
83
74
-
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, placeholder text:
84
+
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 `.clear` CSS class.
0 commit comments