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

[Kevinkun]

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.


data: a list of list


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)

Sample blocks

1. basic usage:

2. fix first row on top.

Some useful SetStyle:

set outer margin of table

set background-color of 2nd row:

set font-size of all odd column:

set border-width of cell at row 3 column 3:

Download

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

[TIMAI2]

Built-in properties not displaying ?

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

[Kevinkun]

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

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.

[TIMAI2]

Works fine, thanks

[TIMAI2]

Worked up a solution for this:

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

Do you know of a better approach ?

[TIMAI2]

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

[Kevinkun]

@TIMAI2

Do you know of a better approach ?

I only know this method.

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

[Kevinkun]

@TIMAI2

good to return the entire row text for all columns as well

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

[TIMAI2]

Another example which "answers" this question:

Custom List View like Grid Table using Dynamic Componen

so much easier

[patel]

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

[TIMAI2]

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

[TIMAI2]

[Feature request]
Sticky header row

found this:

Position Sticky and Table Headers | CSS-Tricks

but requires a th row.

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

[TIMAI2]

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

[patel]

Thank you Tim, solved with

[patel]

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 ?

[TIMAI2]

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

[Kevinkun]

v2 is coming, pls check first post.

@TIMAI2

Sticky header row

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

@patel

how can I restore the previous color

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.

[KhuBann]

i can't show my table in the table viewer

[Kevinkun]

@Kevinkun

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.

@KhuBann

[KhuBann]

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