App Inventor Tutorials and Examples: Dynamic Table Layout

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!

Note: there seems to be an issue with the new Android System Webview update on some devices. See Boban's tip here how to solve it. Thank you Boban!

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

New in Version 3:

The tools extension offers the method PathToAssets which always returns the correct path to the assets.
New event listener added for each row to be able to pick a row of the table, thank you Handi zufaro!
Now using materializecss.com to get a nicer layout. Thank you materializecss.com team for the CSS and thank you Helios for the tip.

New in Version 4:

Removed the clock component and replaced it by the new Webviewer.WebViewStringChange event

New in Version 5 (2020-10-21):

PathToAssets method of the tools extension has been updated, which now returns file:///storage/emulated/0/Android/data/<packageName>/files/assets/ for devices >= Android 10
The example now also can be tested in the Kodular companion app without need to adjust the path to the assets manually

Blocks

Screenshot

HTML/JavaScript

<!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 = ",";

    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.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 addRow(dom, tag) {
      for(j=0;j<rowArray.length;j++){
        var el = doc.createElement(tag);
        el.innerHTML = rowArray[j];
        tr.appendChild(el);
        dom.appendChild(tr);
      }
    }
  </script>

</body>
</html>

For questions about App Inventor,
please ask in the App Inventor community.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: 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.
.

Q4: 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 materializecss.com. How to adjust the CSS, please do a Google search.

Q5: 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 WebViewTextChange event and adjust it to your needs. Just use the index which is returned from the webviewer to read the corresponding row from the csvTable. It might help to convert the table to a list of lists using the list from csv table block.

Q6: How to change the background colors?
A: See this solution.

Q7: How to fix the header row?
A: See this solution. Thank you Thiago_Kamikaze_Ofic!

Q8: I want to detect the click and double click event on the table but I haven't made it yet...
A: See TimAi2's answer here. Thank you Tim!

Download

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!

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun

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

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.

App Inventor and HTML/JavaScript with Input Parameters

Dynamic Table Layout and Table Listpicker

Note: there seems to be an issue with the new Android System Webview update on some devices. See Boban's tip here how to solve it. Thank you Boban!

Blocks

Screenshot

HTML/JavaScript

For questions about App Inventor,please ask in the App Inventor community.Thank you.

Questions and Answers

Download

For questions about App Inventor,
please ask in the App Inventor community.Thank you.