App Inventor and HTML/JavaScript with Input Parameters

Dynamic Table Layout and Table Listpicker

Thank you Christopher for being the sponsor of the App Inventor 2 version!

It was asked in the App Inventor Forum, how to display a table in App Inventor without knowing how many rows will be supplied. And let me add to this requirement, without knowing how many columns will be supplied!

Thank you Craig! Your JavaScript example helped me to set up this solution.

You can use this example for your projects without need to adjust anything in the HTML document. And: it works with any desired number of rows and/or columns!

You also might be interested in my editable(!) dynamic table layout example!

New in Version 3:




<!doctype html>
  <meta name="author" content="">
  <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>

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

    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");
    //var urlArray ="/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");

    var tbody = doc.createElement("tbody");
      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");
    var table = doc.createElement("table");

    doc.getElementById("myTable").getElementsByTagName('table')[0].className = "striped";

    function addRow(dom, tag) {
        var el = doc.createElement(tag);
        el.innerHTML = rowArray[j];

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Questions and Answers

Q1: How would you use this example and populate it with a list of lists?
A: So your question is: how to convert a list of lists into a table in csv format? This is very easy: just use the list to csv table block for that.

Q2: Hi Taifun, the new dynamic table tutorial was tested by me and and i got an ammount of 19763 rows by 58 columns of data, then it starts to lag the device a lot (1Gb RAM 1.2Ghz CPU), just a simple tablet.
A: Great! Thank you for your feedback.

Q3: This does not work on other mobiles when they run my App. When I set development to false my App can not find the table.html file. Please tell me how does this file get loaded onto the android_asset directory.
A: During development, you have to use the development path, for production (apk file) you have to use the production path. Therefore make sure to set the flag development to false before building your app.

The directory /AppInventor/assets is only available on your development device. These are temporary files used by the companion app. While building the app, the assets are stored inside the app, which is the /android_asset directory. Only on your development device the temporary directory is still there and you can access it, so this is why there is some kind of confusion.

So if you do not set the flag development to false before building your app, you will still be able to run the apk file on your development device, but nobody else, because other people do not have the temporary directory on their device. Hope that helps.

Q4: I found a minor problem of the table generate. There is a small rectangle appear at left bottom corner, see screenshot

A: Make sure, the csv table does not end with \n (new line character), else you get that small rectangle in the last row of the table. Alternatively you also can remove the last character (here the new line character) like this, see screenshot below.

Q5: Is it possible to change font size, color or type, and line heights from table, and background color in this extremely messy and complex CSS file?
A: Yes, just adjust the example to your needs... for help with the CSS used in the table example see also How to adjust the CSS, please do a Google search.

Q6: Instead of showing "you picked index:" and the line number, is it possible to catch the data in that line and show it in a label?
A: You might want to take a look at the Clock.Timer event and adjust it to your needs.


Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:

Thank you! Taifun

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.

Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact