Dynamic Table Generator In JavaScript – Table.js

Preview:

Description:

Table.js is a dynamic table creation plugin in vanilla JavaScript that allows you to generate an HTML table from header & row JS objects.

How to use it:

1. Insert the stylesheet table.css in the document. Optional but recommended.

<link rel="stylesheet" href="css/table.css" />

2. Download and insert the table.js into the document.

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

3. Define the header content in the table.

let headings = [
    {
      label: "Firstname",
      for: "firstname"
    },
    {
      label: "Lastname",
      for: "lastname"
    },
    {
      label: "Email",
      for: "email"
    }
];

4. Define the body content in the table.

let rows = [
    {
      firstname: "John",
      lastname: "Doe",
      email: "[email protected]"
    },
    {
      firstname: "Mary",
      lastname: "Moe",
      email: "[email protected]"
    },
    {
      firstname: "July",
      lastname: "Dooley",
      email: "[email protected]"
    }
];

5. Render an HTML table on the page. That’s it.

const table = new Table(headings, rows);