JSFiddle - React, Tailwind, and code Playground

by Daniel Petzold

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>


<a>Table customized with <b>CSS styles</b>.</a>
<!--Provide container to render your visualization-->
<div id="container"></div>

CSS

#container {
  height: 340px;
  margin-left: 5px;
  margin-top: 10px;
}

/*Datatable headers*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell.jr {
  background-color: #8e5f40;
  font-size: 1.24em;
  font-weight: bold;
  color: white;
}

/*Header for cell text*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-text {
  padding-top: .30em;
}

/*Header for cell numbers*/
#container .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-number {
  padding-top: .60em;
}

/*Datatable cells*/
#container .jr-mDatatable-cell.jr {
  color: black;
  font-size: 1.14em;
  border: none;
}

/*Datatable text style*/
#container .jr-mDatatable-cell-text.jr {
  line-height: 25px;
}

/*Datatable odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr.jr-jHyperLink {
  background-color: #F0E9E0;
}

/*Datatable even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr.jr-jHyperLink {
  background-color: #E5DACD;
}

/*Datatable row header (when data is in group section of ad hoc view)*/
#container .jr-mDatatable-cell.jr.jr-jHyperLink {
  background-color: #E0D2BC;
}

/*Use to turn off visualization selector*/
#container .jr-mAdhoc-visualization-launcher.jr {
  display: none;
}

JavaScript

visualize({
  auth: {
    name: "jasperadmin",
    password: "jasperadmin",
    organization: "organization_1"
  }
}, function(v) {
	var adv
  function renderView(uri) {
    adv = v.adhocView({
      resource: "/public/viz/Adhoc/Table1",
      container: "#container",
      error: function(e) {
      	console.log(e);
    	}
    });
  }
  //render initial view
  renderView();
});