Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including html-table-builder with all npm packages installed. Try it out:

var htmlTableBuilder = require("html-table-builder")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

html-table-builder v1.0.1

A function that converts a JS object to an HTML table.

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.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free