Dynamic Table

INTRO

Inspired by Ken's Tableview extension, and following the arrival of version 3 of KevinKun's DCLite extension (now known as CompCreator), and given that several folks were needing more functionality, I have put together an example/demo (whatever) of how you can generate an editable dynamic table using blocks. The developer can change various colours, fontsizes, and set individual column widths. In this example data is loaded from a simple "built" table and the edited data is saved to a tinydb.

Although to do this requires some 700 blocks (70% of which are used to generate and format the table), its intended use is as a part of an app to display and edit data, from any source the developer chooses. I would recommend to not fiddle about with the code/blocks too much, the text box resizing routines can be very temperamental!

This example was tested using App Inventor 2 on Android 10 and Android 11 devices in companion (2.62u) and compiled

HOW DOES IT WORK?

Gotchas...


On initialise, the saved updated data is loaded, if there is none, then the default table data is loaded

Many variables are set for the various settings and lists required (this is just a few of them)

The procedure for individual column width settings. note that for "fit" the width settings are percentage values. You will also see that some of the width values have a -1 or -2, this is to ensure a border on the right. This may need adjustment for a table with many columns for an appropriate view.

The column width procedures. by removing all the setCol procedures you will use the default column width setting. You can set none, one, more or all widths for all columns.

The settings procedure. You can safely edit these values to your liking. Setting the odd/even colours the same will present a single colour table...

The Load Data button click. Here we set the list, apply all the settings, reset most of the variables, clear any previous table, set the required horizontal arrangement for display, and run the loadData procedure (next up)

The big horrible one! This procedure generates the table and applies the data. The header is separated out from the data itself so that it can be fixed. Spacers are inserted at various points to help with the formatting of the table. Various lists of components are also created. Towards the end a list of lists of all the data textboxes (component names) is generated.

This should demonstrate the power and flexibility of the CompCreator extension, a mighty thing, in a tiny package!

The last five sets of blocks and procedures I will cover together. Here we handle the text box editing and resizing. Text box selection is handled by the GotFocus and LostFocus events. The tricky part is to hand off the newly selected text box after the previous text box has been edited, to ensure that the correct row in the table is selected for resizing. The procedures ensure that a check is made as to whether the resizing is for a page/table load, or follows a text box edit. Simple (not). When the clock is run, I also handle the updating of data to the tinydb, and run the procedures for setting individual column widths.

VIDEO

First shows the tables in standard format and then in fit format, and demonstrates the table editing. Then individual column widths are applied to both views. Also shows how to unset the saved data to restore the default table

AIA

DynamicTableV2CC.aia - updated to CompCreator

DynamicTableV3CC.aia - includes Header row editing