Generate Table From JS Objects – ToTable

Category: Javascript , Table | March 21, 2018
Author: Olian04
Views Total: 1,519
Official Page: Go to website
Last Update: March 21, 2018
License: MIT

Preview:

Generate Table From JS Objects – ToTable

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 }
]);

You Might Be Interested In:


Leave a Reply