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

Extensions
795

What I understand is that it's only assigned.

(minimum width) to the entire table.

It depends a lot on the length of the text; look at this example in the first column.

What would happen if it's no longer a number but long text?
The first column disappears in the fixed area.

Even though I deleted (Tilulo) because it wouldn't be centered anymore, it's tolerable without text.

td:first-child{ position: sticky; width:50px; left: 0; z-index: 10; background: white; }
td:nth-child(2){ position: sticky; width:50px; left: 50px; z-index: 10; background: white; }
td:nth-child(3){ position: sticky; width:50px; left: 100px; z-index: 10; background: white; }

(z-index) What does it mean?

796

I provided my "solution" based upon the requirements you provided. If you intend to do something completely different, then you will need to research html/css and possibly javascript, in order to do what you want...

The z-index places those cells either above or below other cells, this helps with the fixed columns and rows.

1 Like
797

I've noticed an error in the extension, or is it my mistake?

What happens is that when I select a list to include in the table like this:

001,pedro\n..... (without spaces), the dialog box works perfectly.

But when I select a list like this:

001,pedro m\n..... (with spaces), the dialog box flickers, and I have to press the button again for the flickering to stop. What could be causing this?


image
image1402×676 91.5 KB

image

001,pedro\n004,luis\n003,juan\n005,raul\n002,omar
001,pedro m\n004,luis p\n003,juan\n005,raul\n002,omar

798

There's no other option but to use an underscore in the spaces.

Although it's probably not the right thing to do.
Regards

image

799

I would like the selection of a bullet point to retrieve the content of columns 1 and 2 and highlight the entire row.

Currently, with these blocks, I have to make two selections—one for the row and one for the bullet point—to get the content of rows 1 and 2.

image
image1349×705 85.3 KB

If you could help me, please. :pray:
TIMAI2
Taifun

800

You could try this:

tvchxhighlight.aia (29.0 KB)

image

//clear all checked checkboxes
function clearChx() {  
var chx = document.querySelectorAll('input[type="checkbox"]');   
for (let i = 0; i < chx.length; i++) {      
document.getElementById("r" + [i+1] + "c3").innerHTML = '<input type="checkbox"/>';   
} }  
clearChx();

//un-highlight all rows
function clearRow() {  
var chx = document.querySelectorAll('input[type="checkbox"]');   
for (let i = 0; i < chx.length; i++) {      
document.getElementById("tr" + [i+1]).style.backgroundColor = 'transparent';   
} }  
clearRow();

//highlight checked row
function setRow() {     
document.getElementById("tr" + row).style.backgroundColor = 'palegreen'; 
};  
setRow();

//check highlighted row
function setchx() {     
document.getElementById("r" + row + "c3").innerHTML = '<input type="checkbox" checked/>'; 
};  
setchx();

blocks
blocks979×1150 127 KB

There are several other ways to achieve the same.

1 Like
801

Perfect.
The purpose of this model is to select these rows and move them to another box to generate an order.

These can be:

*Just one row, as in this solved example.

*And also with the selection of 2 or more rows.

The second option, with the selection of 2 or more rows, should look like this.

The Label1 tag will continue to be added while the box is checked, and if it is unchecked, the selected rows will be updated and removed from the list.

image

I hope that's clear, but thank you in advance. TIMAI2

802

Once again, you ask for one thing, then expect another...you can probably work out what you need to do from the javascripts I have provided.

1 Like
803

My apologies.
It's not because I want to do it in parts, but because I need the blocks this way to apply them in different circumstances.

Furthermore, a third option is needed: a checkbox in the header that selects all the boxes. But I will implement that once I understand the second option.

For example, in this case, I don't know whether to add the selected element to a list after the selection.

Or during the selection.

Because after the selection, it adds the values ​​but doesn't update them.

Unless I add a restriction to prevent repetition.

blocks (15)
blocks (15)1788×1262 303 KB

image

804

This is my project for selecting multiple rows, but I'm having these issues:

See the third search in the video.

*I need to uncheck the box to clear the color of the selected row and remove it from the list. (The problem is that the same content is added when I check the box.)

*Finally, I need to prevent any selection in the header.

The header should be static.

image
image862×767 86.8 KB

tvchxhighlight_2.aia (202.3 KB)

805

It looks good :+1:

I just need to select everything with the (todo) button.

TIMAI2
You could take a look at it
And if you could help me with the button that selects everything, I would appreciate it.
Regards

tvchxhighlight_2 (1).aia (203.5 KB)

806

You should have everything you need to figure out what to do.

807

I can install this text without the pop-up table.

image

But the idea is for it to appear in the table for a more aesthetically pleasing look.

image

808

Maybe this extension instead ?

809

I'm not yet proficient with Table Viewers and I don't want to start with another one.

I just want something like RunJS that selects everything.
Here, it only selects the first row. I need it to select all of them.

blocks (15)
blocks (15)1632×350 55.1 KB

image
image944×319 36.5 KB

810

Iterate over all the rows in the table, they all have ids.

Have you looked at the source code block (use Do It in companion app) which will show you all the html/css for the table.

811

Yes, of course, when I click the (all) button, it automatically selects the first row.

image
image1128×470 49.8 KB

image

812

What do you think?
TIMAI2
Is it possible?

813

Yes, anything is possible :wink:

814

Based on this app, could you provide me with an example in

(RunJS)