JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<head>
  <meta name="author" content="puravidaapps.com">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="materialize.min.css"  media="screen,projection"/>

  <title>Table Layout</title>
</head>

<body>
  <div id="myTable"></div>

  <script>
    // if you have commas inside your text, feel free to use another delimiter, for example |
    var delimiter = ",";

		// would be set by App Inventor
		var getWebViewString = ()=>"A,B,C,D\nAlvin,Eclair,$0.87,CLOSED\nAlan,Jellybean,$3.76,OPEN\nJonathan,Lollipop,$7.00,CLOSED";
    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = getWebViewString().split("\n");
    //var urlArray = location.search.slice(1).split("/n");

    var doc = document;
    var fragment = doc.createDocumentFragment();
    var thead = doc.createElement("thead");
    var tr = doc.createElement("tr");

    // split at delimiter
    var rowArray = urlArray[0].split(delimiter);

    addRow(thead, "th");
    fragment.appendChild(thead);

    var tbody = doc.createElement("tbody");
    for(i=1;i<urlArray.length;i++){
      var tr = doc.createElement("tr");

      // split at delimiter
      var rowArray = urlArray[i].split(delimiter);

      tr.addEventListener ("click", function () {
        // return index (add 1 because first row is the header row)
        //window.document.title = this.rowIndex + 1;
        window.AppInventor.setWebViewString(this.rowIndex + 1);
      });

      addRow(tbody, "td");
    }
    fragment.appendChild(tbody);
    var table = doc.createElement("table");
    table.appendChild(fragment);
    doc.getElementById("myTable").appendChild(table);

    // http://stackoverflow.com/a/9236195/1545993
    doc.getElementById("myTable").getElementsByTagName('table')[0].className = "striped";


    function...