JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="app"></div>

CSS

#selected_resource {
  margin-bottom: 30px;
}

#container {
  height: 400px;
  margin-left: 20px;
  margin-top: -20px;
}

/*Start of Crosstab specific styles*/
/*Crosstab side panel*/
#container .jr-mDatatable-cellRowlabel.jr-mDatatable-cellField.jr {
  background-color: #E0D2BC;
  font-weight: bold;
  color: black;
}

/*Crosstab totals section in side panel*/
#container .jr-mDatatable-cell.jr-mDatatable-cellRowlabel.jr.jr-mDatatable-cellTotal {
  background-color: #E0D2BD;
  border: 1px solid #c19a83;
}

/*Crosstab totals in main table - even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab totals in main table - odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - odd row*/
#container .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - even row*/
#container .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Table styles*/
/*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 {
 ...

React

function RenderVisualize () {
  React.useEffect(function () {
    visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
    let adv
    function renderView() {
      adv = v.adhocView({
        resource: "/public/viz/Adhoc/Product_Sales2",
        container: "#container",
        canvas: {
            type: "Table"
        },
        success: function() {
          //use to find available parameters / control.id
          console.log("")
          console.log("Available filters")
          console.log(adv.data().metadata.inputParameters);
        }
      });
			
      //dynamically get input control (parameter) values
      let ic = v.inputControls({
          resource: "/public/viz/Adhoc/Product_Sales2",
          success: function(data) {
          	renderInputControls(data)
          },
          error: function(e) {
              alert(e);
          }
      });
   }
    
    function renderInputControls (data) {
    	data.forEach(function(control) {
      
      	let $productCategory = $("#selected_resource");
        if (control.id == "product_category_1") {
        	let _opt = control.state.options;
          console.log(_opt);
          //console.log(_opt[0]);
          
          _opt.forEach(function(val) {
          console.log(val.value);
          let o = new Option(val.label, val.value, val.selected);
          //console.log(o);
          $productCategory.append(o);
          });
      	}
    	});
    }
    
    $("#selected_resource").change(function() {
        adv.params({
          product_category_1: [$("#selected_resource").val()]
        }).run().done(function(data) {
          console.log("success changing param");
        }).fail(function() {
          console.log("fail");
          console.log(arguments);
        })
    });
  
  $('#selected_resource').prop('disabled', false);
  //render initial view
  renderView();
});
  }, [])

  return (
  <React.Fragment>
   ...