JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<a>Scroll down table for <b>infinite scrolling</b>.</a><br><br>
<!--Provide container to render your visualization-->
<div id="App"></div>
React
function RenderVisualize () {
React.useEffect(function () {
visualize({
auth: {
name: "joeuser",
password: "joeuser",
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();
});
}, [])
return (
<div id='container'></div>
)
}
ReactDOM.render(<RenderVisualize />, document.querySelector("#App"))