JSFiddle - React, Tailwind, and code Playground

by Sebastian Kropp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<a id="addapp" class="btn btn-default" role="button">
    <span class="glyphicon glyphicon-plus"></span> Add App
</a>

<a id="removeapp" class="btn btn-default" role="button">
    <span class="glyphicon glyphicon-minus"></span> Remove App
</a>

<a id="updateapp" class="btn btn-default" role="button">
    <span class="glyphicon glyphicon-pencil"></span> Update message count
</a> 
<br>
<br>
<div id="nestedUpdateExample"></div>

JavaScript

(function () {
    "use strict";
    var data = [];
    data.push({name: 'Application1', logCounts: {DEBUG: 8, INFO: 12, WARN: 32, ERROR: 47, FATAL: 5} });
    data.push({name: 'Application2', logCounts: {DEBUG: 1, INFO: 2, WARN: 3, ERROR: 4, FATAL: 5} });
    data.push({name: 'Application3', logCounts: {DEBUG: 14, INFO: 221, WARN: 33, ERROR: 44, FATAL: 57} });
    
    // helper to return random number between min and exclusive max
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    // helper to create random application names
    function makeid() {
        var text = "",
            possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
            i;
        
        for (i = 0; i < getRandomInt(5, 10); i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        
        return text;
    };

    function renderLoop(data) {
        var tablediv = d3.select("#nestedUpdateExample"),
            table = tablediv.select("#logtable"),
            keys,
            tbody;

        if (data.length > 0) {
            // remove err msg if it was shown previously
            tablediv.select("#logtableerrmsg").remove();
            keys = d3.keys(data[0].logCounts);

            // create table if table does not exist
            if (!table.node()) {
                table = tablediv
                  .append("table")
                    .attr("id", "logtable")
                    .attr("class", "table table-striped");
                table
                  .append("thead").selectAll("tr").data(function () {
                    // Add "Application Name" to the header data
                    var headerRowData = ["Application Name"];
                    return headerRowData.concat(keys);
                })
              // ENTER row level (for table header)
              .enter()
                .append("td").text(function (d) { return d;});
    ...