JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<!-- Bootstrap - Latest compiled and minified -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="container">
  <div id="loader"><p>Loading...</p></div>
</div>

CSS

/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

p {
  position: relative;
  top: 50px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

JavaScript

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {

  //use input controls as service to get data from the server

  v.inputControls({
    resource: "/public/Samples/Reports/9g.CustomerDetailReport",
    success: function(controls) {
      controls.forEach(buildTable);
      //Remove custom loading indicator once data has successfully loaded
      document.getElementById("loader").style.display = "none";
    },
    error: function(err) {
      alert(err);
    }
  });

  function buildTable(control) {

    function buildRows(options) {
      var template = "<tr><td>{value}</td></tr>";
      return options.reduce(function(memo, option) {
        return memo + template.replace("{value}", option.value);
      }, "")
    }

    var template = "<table class='table'>"+
                      "<thead><tr><td>{label}</td></tr></thead>" +
                      "<tbody{rows}</tbody>" + 
                      "</table>";
      content = template.replace("{label}", control.label)
      .replace("{rows}", buildRows(control.state.options));

    $("#container").append($(content));
  }
});