JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8080/jrio-docs/viewer/optimized-scripts/client/jrio.js"></script>

<label>Column ID: </label>
<button id="formatId">Apply conditions</button>
<button id="filter">Apply Filter</button>
<br>
<label>Column Move-In Date</label>
<button id="formatDate">Apply conditions</button>
<input id="search_box"></input>
<button id="search">Search</button>
<div id="reportContainer"></div>

CSS

body {
  background-color: lightgray;
}

JavaScript

jrio.config({
  server: "http://localhost:8080/jrio-docs/viewer",
  scripts: "optimized-scripts",
  theme: {
    href: "http://localhost:8080/jrio-docs/viewer/themes/default"
  },
  userLocale: "en_US",
  runtimeContextPath: "http://localhost:8080/jrio"
});

jrio(function(jrioClient) {
  var report = jrioClient.report({
    server: "http://localhost:8080/jrio",
    resource: "/samples/reports/opportunities",
    container: "#reportContainer",
    error: errHandler,
    events: {
      reportCompleted: function(status, error) {
        if (status === "ready") {
          console.log(report.data());
        }
      }
    }
  });


  // Conditions
  addClickHandler("formatId", function() {
    console.log(report.data().components);
    report.updateComponent("amount", {
      detailsRowFormat: {
        align: "right",
        backgroundColor: "DDEE99",
        font: {
          size: 15,
          color: "AA32DD",
          underline: true,
          bold: true,
          italic: true,
          name: "Monospaced"
        },
        pattern: {
          negativeFormat: "(###0)",
          precision: 4,
          grouping: true,
          percentage: true,
          currency: "USD"
        }
      },
      label: "NNNN"
    }).fail(errHandler);
  });

  // Heading format
  addClickHandler("filter", function() {
    console.log(report.data().components);
    report.updateComponent("amount", {
      headingFormat: {
        align: "right",
        backgroundColor: "DDEE99",
        font: {
          size: 15,
          color: "AA32DD",
          underline: true,
          bold: true,
          italic: true,
          name: "Monospaced"
        }
      }
    }).fail(errHandler);
  });


  /* Filtering Amount
    addClickHandler("filter", function() {
    console.log(report.data().components);
    report.updateComponent("amount", {
      filter: {
        operator: "greater",
        value: "3000",
      }
    }).fail(errHandler);
  });
  */
  /* Filtering Date
   ...