Perspective Table multiple entries in one row

Hi all,

Today I would like to know if there is a way to stack multiples values in just one row on a perspective table.. I'm migrating and old C# application to ignition, and I want to recreate it just because the operators are used to it. I dont want to change the structure because of it...
image

so in mi data (like my image example) there are "basket_id"s that have multiple items, so instead of have one row per id, I want to stack the ones that have the same "basket_id"

So, I don't know how to do it, or if its possible to do it directly from a SQL query, or inside ignition after query the data from the DB

It looks like you are asking whether a table can have a different number of rows in each column, which it cannot.

If you want the items to be grouped in that way, could you have the baskets as columns?

image

Well... it sort of can...


The key is to not think of each entry as a row. Instead, think of each "Basket" entry as a key for a list of fruits. Then you can render the Fruit column as a View, where the rendered View is a Flex Repeater of a secondary View which expects one fruit.
TableExample.zip (12.2 KB)
tag.json (466 Bytes)

1 Like

To make it prettier, you could use a subview for the item list. You'd get a sort of accordion, with the common data (basket id, customer name, whatever...) in the main row, and a click on that row would expend a view with the items.

Another solution would be to make a custom table using flex repeaters. That's the way I went, so I could have maximum control over everything.

5 Likes

this really help me... I did something similar based in what you shared to me...

Instead of a view repeater, I used table... and call it from the column config on the first table...

And I had to change my store procedure and divided it in two parts... so my first table get all the data of the baskets (and much more data) excluding the fruits on it, and with another sp I get the fruits based on the basket_id column....

I dont want to share sensitive data, but if it help a little I got this...

There are just some things like... if you notice I dont know how to configure the background of my rendered table to be the same of the row striped color..... and even I can change the text font of my rendered table, the height of each row is the same, so I cannot make it smaller....

and even I can change the text font of my rendered table, the height of each row is the same, so I cannot make it smaller...

so, I don't know why yesterday I didn't find the "PROPS.rows.height" property but it helped me make the row smaller and instead of having only 3 "fruits" per table with a lot of empty space, I have 4 now but I make the view smaller so on the main table I have more rows to.

I dont know how to configure the background of my rendered table to be the same of the row striped color

But please if someone knows how to make my rendered table configured on "PROPS.columns" be the same color of the main table row it would be helpful

Have you set your embedded table background to transparent? (Try #FFFFFF00.)

The Table component allows for striping (props.rows.striped.enabled), which is what I was using. It looks like you've set a background color for whatever View is being used in the Fruits column, which means that the cells will use THAT color instead of the "striping" color. Remove your backgroundColor setting in the rendered View of the Fruits column and it should fall back to the default transparent setting and therefore use the striping.

Have you set your embedded table background to transparent? (Try #FFFFFF00 .)

The Table component allows for striping (props.rows.striped.enabled ), which is what I was using. It looks like you've set a background color for whatever View is being used in the Fruits column, which means that the cells will use THAT color instead of the "striping" color. Remove your backgroundColor setting in the rendered View of the Fruits column and it should fall back to the default transparent setting and therefore use the striping.

I Try both, I first delete any background color I configured on the rendered Table, because yesterday I try to add a background-color transparent as @Transistor mentioned, but didn't work ...

Today I try to do the same and actually I add this background-color transparent to any "style" on the table, I mean the general style, the one in bodyStyle, on pager, on rows, even on cells and columns, but I cannot make it transparent ... only white (I set red the background color of the view, so if the table is transparent I should see the red view right? but it's always white)

so, I think it's because a table cannot be transparent?

The table can't be set to be transparent through the Designer (unless you're using a nightly build which has the recent stylesheet.css resource content).

You could modify the theming files or stylesheet.css resource with the following rule to make the table transparent:

.t.ia_table.ia_container--secondary {
    background-color: transparent;
}

This assumes you have already set the following properties:
Table.props.rows.striped.color.even: "transparent"
Table.props.rows.striped.color.odd: "transparent"
Table.props.bodyStyle.backgroundColor: "transparent"

I'd really use a flex repeater for the subview, instead of a full table.