├── .gitignore
├── index.js
├── package.json
├── readme.md
├── test.html
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | node_modules
3 | bundle.js
4 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var Writable = require('stream').Writable
 2 | 
 3 | 
 4 | module.exports = function (parent) {
 5 |   if(typeof parent === 'string')
 6 |     parent = document.querySelector(parent)
 7 |   var totable = new Writable({objectMode: true})
 8 |   var table = document.createElement('table')
 9 |   var header = document.createElement('tr')
10 |   table.appendChild(header)
11 |   while (parent.firstChild) parent.removeChild(parent.firstChild)
12 |   parent.appendChild(table)
13 |   var keys = []
14 |   totable._write = function (data, enc, cb) {
15 |     processKeys(Object.keys(data))
16 |     renderData(data)
17 |     cb(null)
18 |   }
19 | 
20 |   function processKeys(k) {
21 |     k.forEach(function (key) {
22 |       if(keys.indexOf(key) === -1) {
23 |         keys.push(key)
24 |         var rowHead = document.createElement('th')
25 |         rowHead.appendChild(document.createTextNode(key))
26 |         header.appendChild(rowHead)
27 |       }
28 |     })
29 |   }
30 |   
31 |   function renderData(data) {
32 |     var row = document.createElement('tr')
33 |     keys.forEach(function (key) {
34 |       var cell = document.createElement('td')
35 |       var value
36 |       if(data[key] === 0) value = '0'
37 |       else value = data[key] || ''
38 |       if (typeof value == 'object')
39 |         value = JSON.stringify(value)
40 |       cell.appendChild(document.createTextNode(value))
41 |       row.appendChild(cell)
42 |     })
43 |     table.appendChild(row)
44 |   }
45 | 
46 |   return totable
47 | }
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "htmltable",
 3 |   "version": "1.2.1",
 4 |   "description": "Writable stream for rendering an html table in the browser",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "browserify test.js > bundle.js"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/finnp/htmltable.git"
13 |   },
14 |   "keywords": [
15 |     "html",
16 |     "table"
17 |   ],
18 |   "author": "Finn Pauls",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/finnp/htmltable/issues"
22 |   },
23 |   "homepage": "https://github.com/finnp/htmltable",
24 |   "devDependencies": {
25 |     "browserify": "^6.1.0"
26 |   },
27 |   "dependencies": {}
28 | }
29 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # htmltable
 2 | 
 3 | When converting an object stream into an HTML table, you have the problem that
 4 | you need to know all the keys in the beginning. However this would mean loading all
 5 | the data into memory before rendering.
 6 | 
 7 | This module is written for the browser and will update the head with javascript while
 8 | streaming the data.
 9 | 
10 | Install it with `npm install htmltable` and use it with browserify. You can test
11 | the module by running `npm run build` and open the `test.html` file.
12 | 
13 | ![Example](https://i.imgflip.com/ddyux.gif)
14 | 
15 | ## Usage
16 | 
17 | ```js
18 | var htmltable = require('htmltable')
19 | 
20 | var table = htmltable(document.querySelector('#table'))
21 | 
22 | table.write({a: 1})
23 | window.setTimeout(function () {
24 |   table.write({a: 2, b:1})
25 |   table.end()
26 | }, 1000)
27 | ```
28 | 
29 | You can also pass in a selector like `htmltable('#table')` directly.
30 | 
31 | where the body of the HTMl element contains:
32 | ```
33 | <div id="table"></div>
34 | ```
35 | it will eventually be
36 | ```
37 | <div id="table">
38 | <table>
39 |   <thead>
40 |     <tr>
41 |       <th>a</th>
42 |       <th>b</ah>
43 |     </tr>
44 |   </thead>
45 |   <tbody>
46 |     <tr>
47 |       <td>1</td>
48 |       <td></td>
49 |     </tr>
50 |     <tr>
51 |       <td>2</td>
52 |       <td>1</td>
53 |     </tr>
54 |   </tbody>
55 | </table>
56 | </div>
57 | ```
58 | 
59 | but you will be able to see the first row before the second comes in.


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title></title>
 5 |     <script src="bundle.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div id="table"></div>
 9 |   </body>
10 | </html>


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | var htmltable = require('./')
 2 | 
 3 | function test() {
 4 |   var table = htmltable('#table')
 5 |   // var table = htmltable(document.querySelector('#table'))
 6 | 
 7 |   table.write({a: 1})
 8 |   table.write({a: 0, b:1})
 9 |   table.write({a: {b: 1}})
10 |   table.write({a: null, b:undefined}) // empty row
11 |   table.write({c: 3})
12 |   window.setTimeout(function () {
13 |     table.write({a: 2, d: 3})
14 |     table.end()
15 |   }, 1000)
16 |   
17 |   window.setTimeout(function () {
18 |     test() // should not append
19 |   }, 3000)
20 | }
21 | 
22 | 
23 | window.onload = test


--------------------------------------------------------------------------------