JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!--Provide URL to visualize.js-->
<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<!--Provide container to render your visualization-->
<div id="details"></div>
<div id="container"></div>

CSS

.my-selected {
  background-color: lightblue!important;
}

#details {
  margin-bottom: 10px;
}

JavaScript

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  var ahv = v.adhocView({
    resource: "/public/viz/Hyperlinks/Table",
    container: "#container",
    success: function() {
      console.log("rendered");
    },
    error: function(e) {
      console.log(e);
    },
    linkOptions: {
      events: {
        click: function(ev, data, defaultHandler, extendedData) {
          console.log(data, extendedData);
          
          $("tr").removeClass("my-selected");
          $("tbody tr:nth-child(" + (extendedData.row.relativeIndex + 1) + ")").addClass("my-selected");
          
          $("#details").html(renderDetails(extendedData));
        }
      }
    }
  });
});

function renderDetails(data) {
	return _.template(`
  	<table border="1" cellspacing="0">
    	<thead>
      	<tr>
        	<% row.cells && row.cells.forEach(function (cell) { %>
        	<th><%= cell.label || cell.name %></th>
          <% }) %>
        </tr>
      </thead>
      <tbody>
      	<tr>
        	<% row.cells && row.cells.forEach(function (cell) { %>
        	<td><%= cell.value %></td>
          <% }) %>
        </tr>
      </tbody>
    </table>
  `)(data);  
}