Generate Table From JS Objects – ToTable

Preview:

Description:

Yet another table generator built on top of pure JavaScript that dynamically generates HTML tables from arrays of objects.

How to use it:

Clone or download the ToTable library and then import the ToTable.js into the document.

<script src="src/ToTable.js"></script>

Create a container element where you want to display the generated table.

<div id="example"></div>

Prepare your data and generate an HTML table inside the container.

document.querySelector('#example').innerHTML = 
  ToTable([
    { firstname: 'Oliver', lastname: 'Twist', age: 14 },
    { firstname: 'Charles', lastname: 'Darwin', age: 78 },
    { firstname: 'Steven', lastname: 'Hawken', age: 50 }
]);
// or
document.querySelector('#example').innerHTML = 
  ToTable(
    ['lastname', 'age'], 
    [
      { firstname: 'Oliver', lastname: 'Twist', age: 14 },
      { firstname: 'Charles', lastname: 'Darwin', age: 78 },
      { firstname: 'Steven', lastname: 'Hawken', age: 50 }
    ]
);
// or
document.querySelector('#example').innerHTML = 
  ToTable({
    firstname: 'name',
    age: 'age'
  }, [
    { firstname: 'Oliver', lastname: 'Twist', age: 14 },
    { firstname: 'Charles', lastname: 'Darwin', age: 78 },
    { firstname: 'Steven', lastname: 'Hawken', age: 50 }
]);