[FREE] TableViewer - fully style customized to show table data

I have make another version of TableViewer, it's a package of Webviewer and Javascript and CSS.
so you can set up the style as you wish, if you know some CSS knowledge.

V6 UPDATE

  1. SetStyleSheet now can accept url to an external css file.
  2. add SetClass block, which can set class to a tag or id selector
  3. add ClearStyle block, which can clear all styles, including the native basic style(table border)
  4. bring back ShowTable. since this will greatly enhance the performance of the extension.
  5. add RunJs function and AfterRunJs event.

V5 UPDATE

  1. add OnScroll event

V4 UPDATE

  1. add ScroolTo function
  2. deprecated ShowTable function

V3 UPDATE

  1. add ClearTabe block.
  2. other minor fix. Now you can use data rows with different length.

V2 UPDATE

  1. add SetStyleSheet block, you can write the stylesheet here, if you have too much style to setup. Only the last time to use this block works, since the second time will override first time.
  2. add ShowTable block. Now every time you change the data and style, you have to call this block to show the table. Specially for those updated from v1.
  3. add HasHead and HasFoot property. If set to true, it will take the first row of data as head, and last row as foot.
    the default value is false.
  4. add SourceCode property to show the source code for easy to debug.

Alll Blocks

block names have indicated what they can do.
image-20221005142959876
image-20221005143010573
data: a list of list
image-20221005143023860
image-20221010185548477
now the sheet socket can accept:

  1. style sheet like 'th{background-color:lightblue; position:sticky; top:0}'
  2. online css file path like 'http://your.domain.com/cssfile.css'
  3. local css file, like '//cssfile.css' (for from assets) or 'cssfile.css' (for from ASD)

image

image

image-20221010185604046
image
image

image-20221010190719285
image-20221010190705454
image-20221010190101719

image

image
image
image

Sample blocks

1. basic usage:

image-20221010191516407
image-20221010191531671

2. fix first row on top.


Some useful SetStyle:

set outer margin of table
Snipaste_2022-10-08_18-57-55

set background-color of 2nd row:
Snipaste_2022-10-08_18-58-04

set font-size of all odd column:
Snipaste_2022-10-08_18-58-10

set border-width of cell at row 3 column 3:
Snipaste_2022-10-08_18-58-17

Download

for more information please check here:
https://kevinkun.cn/tableviewer/

15 Likes
TableView Extension Versions 3 and 4 by @Ken
Listpicker: how do I change color for a VISITED item in a listpicker (where each item is linked to a url)
How can put color in tableview if "word" = yes?
Showing error message in table view
Change Background Color of Items in List picker
Delete only the last 2 data in all listview records
Move row of several listview arranged in parallel at the same time
Help on TableView Extension by ken
Table view in graphical mode
Web page not available
Bring a selection into view after triggering a selection
How do you make the list scroll automatically and the words can change color when the word is pronounced
How can i create a calendar? assigning color to calendar cells. how can i do it
Runtime Error:No static method setFontTypeface
Which Layout instead of TableArrangement?
Please help me to view this data in table form in app
Align information in a listview
Hello, How do I get my data out of an array and place them in their respective textboxes? I am pulling the data from mysql database
TableView with WebViewer, JavaScript and CSS. Helped by chat.openai GPT. Perplexity
Problem with TableView Extension
TableView Extension Versions 3 and 4 by @Ken
Tengo un problema con la extracción de datos de google sheets a mi aplicacion en mit app inventor
Show repeated items in list?
Runtime error only when build the app, Tableview extension by Ken
Runtime error only when build the app, Tableview extension by Ken
TableView Extension Versions 3 and 4 by @Ken
TableView Extension Versions 3 and 4 by @Ken
TableView Extension Versions 3 and 4 by @Ken

Built-in properties not displaying ?

image

You show an html file, how is this used with the extension? (or does this simply show the html generated from the data?)

1 Like

Sorry, I forget to mention the value of the property should be same as in CSS:
image

the html picture is only to show the structure of the html behind the table, then you will know how to write the style/css to change table/tr/td etc.

3 Likes

Works fine, thanks

Worked up a solution for this:

https://community.appinventor.mit.edu/t/how-can-put-color-in-tableview-if-word-yes/67188/6

image

Do you know of a better approach ?

2 Likes

[Feature Request]
With your table click function, it would be good to return the entire row text for all columns as well.

I only know this method.

for entire row data, you may use the "select list item" to pick data from original data list.

and i am considering to add a block to combine nearby cells, which will make this entire row data very complicated.

1 Like

Another example which "answers" this question:

image

so much easier :smiley:

2 Likes

I'm trying to show a csv with many columns, how can I set horizontal scroll ?
blocks(1)

Just drag left/right, should be scrollable vert/horiz automatically

[Feature request]
Sticky header row

found this:

but requires a th row.

Tried with tr:nth-child(1) but nothing happened

1 Like

Some blocks for table styling (there are 8columns, 5 to scroll to....

image

2 Likes

Thank you Tim, solved with

1 Like

With these blocks I can set the selected cell background color, how can I restore the previous color after selecting another cell? I can save row and col but the color ?

would the original colour be known, e.g. the one you set when drawing the table ?

v2 is coming, pls check first post.

now is possible. it looks like th is not necessary, but thead is.
I have add a sample at 1st post.

now it's possible to remove the style you already setup last time, just to set the value to "" (empty string) using SetStyle block, then ShowTable.

2 Likes

i can't show my table in the table viewer


@KhuBann

now "Index: 7, Size: 7
Note: You will not see another error reported for 5 seconds."