About

This repl creates a simple HTML table from a mustache.js template and an object with arrays for the head and body.

To view this on TripleLog, click here.

HTML

There is just one div in the body for the table, but obviously the table (or tables) can be placed pretty much wherever it is needed.

CSS

Style the table however you like. Add padding, borders, colors, and more. The header cells are so they can easily be styled differently.

JavaScript

Load mustache.js from a CDN or your own server. Adjust the template if needed. You can easily modify the logic to handle different types of arrays depending on how your data is defined.

Call the Mustache.render() function to produce a string that can be placed into the innerHTML of whatever element you desire. If users have any control over the content of the table, you should sanitize with something like DOMpurify.