[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.

v8 UPDATE

add event OnShowTable, fired after ShowTable is called.

v7 UPDATE

add property TransparentBackground, designer only.

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:

18 Likes

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."