├── .gitignore
├── LICENSE
├── README.md
├── assets
├── responsiveTable.js
├── style.css
├── tablesaw
│ ├── icons
│ │ ├── icons.css
│ │ ├── png
│ │ │ ├── arrow-gray-down.png
│ │ │ ├── arrow-gray-left.png
│ │ │ ├── arrow-gray-right.png
│ │ │ ├── check.png
│ │ │ ├── sort-ascending.png
│ │ │ └── sort-descending.png
│ │ └── preview.html
│ ├── tablesaw.css
│ └── tablesaw.js
└── tabletop.js
├── config-example.json
├── configs
└── .keep
├── index.html
├── render.py
├── requirements.txt
├── templates
└── index.html
└── webapp
├── app.js
├── build.zip
├── lib
├── css
│ └── style.css
└── js
│ ├── FileSaver.js
│ ├── bootstrap-collapse.js
│ ├── bootstrap-transition.js
│ ├── jszip-utils-ie.min.js
│ ├── jszip-utils.min.js
│ ├── jszip.js
│ ├── jszip.min.js
│ └── tabletop.js
└── preview.html
/.gitignore:
--------------------------------------------------------------------------------
1 | config.json
2 | build/
3 | configs/*.json
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2014-2018 Institute for Nonprofit News
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Responsive tables
2 |
3 | [Generate responsive tables using the webapp](http://inn.github.io/responsive-tables/)
4 |
5 | 🚨 This project is **not maintained or supported,** as of [February 16, 2018](https://github.com/INN/responsive-tables/commit/5ab7f9673a9431ebbbb471e19fdd4e0787f87b2f). 🚨
6 |
7 | ## What is it?
8 |
9 | This repo contains two utilities that do the same thing:
10 |
11 | - A [simple webapp](http://inn.github.io/responsive-tables/) that takes your Google Drive spreadsheet key, lets you format the columns, then generates a .zip with a ready-for-deployment responsive table and all required assets.
12 | - A simple `render.py` script that reads from `config.json` to find your Google Drive spreadsheet key and column formatting information then generates a build directory with a ready-for-deployment responsive table and all required assets.
13 |
14 | It works best with tables that have 5-7 columns.
15 |
16 | ## Webapp Usage
17 |
18 | [Use the webapp](http://inn.github.io/responsive-tables/). We've published it on GitHub pages for ease of use.
19 |
20 | 1. Paste in your URL
21 | 2. Configure your column headers and the table title
22 | 3. Optionally, add your Google Analytics ID
23 | 4. Optionally, preview the table
24 | 5. Download the `.zip` and unzip it to your server
25 | 6. [Embed the table in your site](#embedding-the-table)
26 |
27 | ## Script usage
28 |
29 | If you want to use the script instead of the webapp, go ahead and install this repository on your computer.
30 |
31 | ### Setup
32 |
33 | You'll need [Jinja2](http://jinja.pocoo.org/) and Python for this project.
34 |
35 | sudo easy_install pip
36 | pip install -r requirements.txt
37 |
38 | Install this repository:
39 |
40 | git clone https://github.com/INN/responsive-tables.git
41 |
42 | [Publish](https://support.google.com/docs/answer/37579?authuser=0) your Google Spreadsheet.
43 |
44 | ### Configuration
45 |
46 | Copy `config-example.json` to `config.json`. Open `config.json` and add your spreadsheet's key. The key is a long sequence of apparently-random characters, such as `10yccwbMYeIHdcRQazaNOaHSkpoSa1SUJEtWBfWPsgx0`, found in the URL of the page you use to edit the spreadsheet. An example URL is https://docs.google.com/spreadsheets/d/10yccwbMYeIHdcRQazaNOaHSkpoSa1SUJEtWBfWPsgx0/edit#gid=0, which was used to generate [this embedded example](http://labs.inn.org/discounts/). The key may include dashes. The key is also included in the URL found in the "Document link" field of the [Publish to web](https://support.google.com/docs/answer/183965/?hl=en&authuser=0) dialog.
47 |
48 | Fill in `title` to set the table's title tag.
49 |
50 | Fill in `ua_code` to enable Google Analytics.
51 |
52 | {
53 | "ua_code": "googleanalyticsuacodegoeshere",
54 | "title": "Title tag",
55 | "key": "yourspreadsheetkeygoeshere",
56 | ...
57 |
58 | Next, define the columns to display in your table. For example:
59 |
60 | ...
61 | "columns": [
62 | ["tool", "Tool"],
63 | ["category", "Category"],
64 | ["typeofresource", "Type of resource"],
65 | ["developingmember", "Developing member"],
66 | ["description", "Description"],
67 | ["url", "link"],
68 | ["notes", "notes"]
69 | ]
70 | }
71 |
72 | Each item in the `columns` array follows the format `["simplifiedlabel", "Label for display"]`. Simplified labels are the column headings in your document with spaces and underscores removed, and uppercase letters made lowercase. Allowed characters are lowercase a-z, numbers, and the `-` character.
73 |
74 | ### Render
75 |
76 | Once you've filled in `config.json`, run:
77 |
78 | ./render.py
79 |
80 | This will create a build directory and place a copy of your rendered table and all assets inside it. You can deploy the contents of this directory to your host as-is.
81 |
82 | If the project renders successfully but you have a blank page, make sure your document is [published](https://support.google.com/docs/answer/183965?rd=1&authuser=0) and that permissions allow anyone with the link to view the document.
83 |
84 | ### Multiple configurations
85 |
86 | As a convenience, you can create config files and store them in the `configs` directory to ease re-rendering of tables.
87 |
88 | For example, if you create a config file named `myspecialtable.json`, then you can tell `render.py` to render that specific configuration like so:
89 |
90 | ./render.py -c myspecialtable
91 |
92 | ### Deploying to server
93 |
94 | Copy the contents of the `build` directory to a directory on your website.
95 |
96 | ## Embedding the table
97 |
98 | We're using [pym.js](http://blog.apps.npr.org/pym.js/) to make our tables responsive when embedded via iframe.
99 |
100 | To embed a table, you can use this snippet to get started:
101 |
102 |
103 |
104 |
111 |
112 | Be sure to replace `http://yourdomain.com/path/to/index.html` with the actual URL of your table.
113 |
114 | ## Troubleshooting
115 |
116 | **Data in wrong column**:
117 |
118 | Are the simplified labels in your `config.json` composed only of lowercase letters, numbers, and dashes?
119 |
120 | **No data shows**:
121 |
122 | Is your spreadsheet [published](https://support.google.com/docs/answer/183965?rd=1&authuser=0)?
123 |
124 | ## Libraries used
125 |
126 | This little project uses:
127 |
128 | - [pym.js](http://blog.apps.npr.org/pym.js/),
129 | - [tabletop](https://github.com/jsoma/tabletop),
130 | - [tablesaw](https://github.com/filamentgroup/tablesaw/)
131 | - [JSzip](https://stuk.github.io/jszip/) and [JSzip-utils](https://stuk.github.io/jszip-utils/)
132 | - [FileSaver.js](http://eligrey.com/blog/post/saving-generated-files-on-the-client-side)
133 |
134 | Check them out!
135 |
136 |
--------------------------------------------------------------------------------
/assets/responsiveTable.js:
--------------------------------------------------------------------------------
1 | var ResponsiveTable;
2 |
3 | (function(){
4 | var $ = jQuery;
5 |
6 | ResponsiveTable = function(spreadsheetKey, columns) {
7 | var self = this;
8 |
9 | self.columns = columns;
10 |
11 | self.init = function(dataSpreadsheet) {
12 | self.pym = new pym.Child({ polling: 500 });
13 | self.ttop = Tabletop.init({
14 | key: dataSpreadsheet,
15 | callback: self.writeTable,
16 | simpleSheet: true,
17 | debug: false
18 | });
19 | }
20 |
21 | self.sortData = function(dataSource) {
22 | dataSource.sort(function(a, b){
23 | var one = a[self.columns[0][0]],
24 | two = b[self.columns[0][0]];
25 |
26 | if (!isNaN(Number(one)))
27 | one = Number(one);
28 | if (!isNaN(Number(two)))
29 | two = Number(two);
30 |
31 | if(one < two) return -1;
32 | if(one > two) return 1;
33 | return 0;
34 | });
35 | return dataSource
36 | };
37 |
38 | self.writeTable = function(dataSource){
39 | dataSource = self.sortData(dataSource);
40 | $('#data').html('