A JSON to HTML table generator
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
get-columns
.eslintrc.js
.gitignore
LICENSE
Readme.md
index.js
index.test.js
package-lock.json
package.json
webpack.config.js

Readme.md

HtmlTableBuilder

... The missing table generator.

I know there are a lot of html table generators in NPM, but I wanted to learn test driven development and webpack from ground up, and Here's what I learnt in the process.

This library has been developed with a test-first approach, then I've written every single webpack configuration.

How to use it

First create a div with an id:

<div id="test-table"></div>

Then pass the array you want to render as HTML table to the function HtmlTableBuilder.objectToHtmlTable() and see the magic happening.

const testData = [
  {
    mountain: 'Everest',
    height: 8848,
    chain: 'Himalaya'
  },
  {
    mountain: 'Fuji',
    height: 3776,
    country: 'Japan',
    type: 'volcano'
  },
  {
    mountain: 'Kilimanjaro',
    height: 5895,
    country: 'Tanzania',
    type: 'volcano'
  }
];

const htmlTable = HtmlTableBuilder.objectToHtmlTable(testData);
document.getElementById('test-table').appendChild(htmlTable);

Todo

The next stuff I want to do in this library is:

  • a live example
  • accept everything, not only an array of object. If in the array you pass a string, render the string. If you pass another array, render an inner table inside. etc etc.
  • From table to json: this will be more difficult and will require more time, but eventually I'll do it.