# Perspective: Designing a "table" for mobile and PC

**URL:** <https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [August 31, 2020, 7:25am UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205 "2020-08-31T07:25:16Z")\
**Posts on this page:** 13\
**Page:** 2

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 1, 2020, 11:53pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/21 "2020-09-01T23:53:50Z")

</div>

Hmm, I just tried this, but I’m not seeing any options to use an embedded View instead of a table row.

There’s a sub-view property but that seems to be attached to a table row, it doesn’t replace the look of the row itself.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/08c60942a4eb34e8ca8f0d58dac5562ba8728164.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 2, 2020, 12:06am UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/22 "2020-09-02T00:06:00Z")

</div>

> [@nminchin](#):
>
> Hmm, I just tried this, but I’m not seeing any options to use an embedded View instead of a table row.

Create a one column table, where each cell is a json including the parameters you need

Then reference that in your embedded view from `params.value`

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 22, 2020, 11:18am UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/23 "2020-09-22T11:18:39Z")

</div>

I’m just jumping back onto this and finally found where you were talking about all along RE the viewPath in the column config of the Table. Cool!  
However, I’m struggling to pass my 4 params to my view…  
I can see that there are view params you can pass that are under `table.columns[0].viewParams`, however it seems that this applies to every row (i need different params per row).

This is what I have:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/213ac7d238b6da41ead632647c405202c476c15a.png)

and this is what i’ve tried in the data for pass the params (SitePath, TankFarm, TankPrefix, TankNumber) - passing just the TankNumber should suffice for testing as the rest are defined with default values:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/2503e233fdc08d0dcb911fe37339ff5811a2ad59.png)

These keys and values within the EmbeddedView object have no impact on what’s displayed.  
However, as soon as I add some values into the columns section, all rows are updated with those values:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/b/cb9640bc37c154c4c4d03fdec2e829f1dece961d.png)

I tried this as well:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/70146dd680187b9d558d59e6d92a2217d1cd3e02.png)

The user manual is confusing:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7b650def74e0162916f18074ad4ce6af8d9e4359.png)

Tried adding a ‘value’ key as the user manual says you need for object array elements…  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/81a9614a05b036305c1d258f08e23d5f86e425ec.png)

Second question: how do I set the height of the rows?

@cmallonee @paul-griffith

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 22, 2020, 11:57am UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/24 "2020-09-22T11:57:44Z")

</div>

Got it. I found this in the user manual… not very obvious, also very strange to implement, see the blank “EmbeddedView” object:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b520e6d76dffb6b83c083d22d8da1b0a20f8848e.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f20916c5e5749b04b0666bc90c231d44816d4cdc.png)  
The reason there’s an empty “EmbeddedView” key is so that it’s associated with the EmbeddedView column… I have no idea what would happen if I wanted to have multiple columns where each one used an embedded view with the same params (and if so, what if those params needed different values??)

and my Embedded View params definitions:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4b9be1c3e6eff485df913c26ee3d39ea294dc267.png)

**I still have no idea how to set the height of the rows though… currently each row is full screen height, or there abouts (very tall!)**

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/19f284e6acfef7cca546f0038543eaac7932547c.png)  
(that’s almost a single row, some cut off the bottom)  
This is what it’s supposed to be:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b999354a3f3439465682f734b50fc0fb91b9dd1b.png)

Adding cells.style.height as per this post ([[FEATURE-16567] Perspective Table Row Height - #3 by Paul.Scott](http://forum.inductiveautomation.com/t/feature-16567-perspective-table-row-height/33466/3)) yields straaange results…

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/5/c55bbc8ceac542def72ec764e16e756ee2f893c3.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 22, 2020, 2:12pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/25 "2020-09-22T14:12:15Z")

</div>

So a few things, you can either access `view.params.rowData` on the embedded view to get all of that rows data, or you can access `view.params.value` to get just that cells value in that column.

> [@nminchin](#):
>
> and if so, what if those params needed different values??

What I do in This case is turn my single column into a json dictionary, so that each “cell” is a whole dictionary worth of data

> [@nminchin](#):
>
> I still have no idea how to set the height of the rows though…

Make sure that `useDefaultViewHeight` Is true, and then make the `defaultHeight` of your view equal to the smallest height you’ll need. If it’s a pain to work on the view at that point while the height is so short, create a binding on the `defaultHeight` prop that looks at your `session.props.deviceType` (I think that’s what it is) and see if it’s equal to “designer”. If it is then map it to the tallest height you need, and if it’s not then default to the shortest height

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 22, 2020, 2:14pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/26 "2020-09-22T14:14:24Z")

</div>

> [@kgamble](#):
>
> `useDefaultViewHeight` Is true

Do you know where that should be defined?

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 22, 2020, 2:15pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/27 "2020-09-22T14:15:39Z")

</div>

This is on the embedded view itself, and it may be `self.view.props.defaultHeight` but I would have to look

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 22, 2020, 2:16pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/28 "2020-09-22T14:16:57Z")

</div>

Whoops I can’t read, thought you said defaultHeight, i thought it was in the table column props, but if it’s not I would have to load up a designer and check. Try just doing the minimum height thing, you may not need the `useDefaultViewHeight`

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 22, 2020, 2:19pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/29 "2020-09-22T14:19:34Z")

</div>

Nah there’s nothing to do with height in the column ☹  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/6/c6c015672542015b71af5a88a06c23b4f11ec8a1.png)

There’s nothing to do with height anywhere at all that I can find, in any of the properties ☹ ☹ (that was the property that I expected to see, useDefaultViewHeight). It’s weird how in your example you posted the height of the items is ok, but mine is 10 times taller than the default…

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 22, 2020, 2:51pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/30 "2020-09-22T14:51:30Z")

</div>

> [@nminchin](#):
>
> It’s weird how in your example you posted the height of the items is ok, but mine is 10 times taller than the default…

Change the actual default height of your embedded view to something like 40 (it will look bad, but see if it fixes it)

> [@kgamble](#):
>
> I ran this with 10,000 instances with no issues. Granted my view is alot dumber than yours, but the virtualization premise should help yours out too.
> 
> [DynamicHeight.zip](https://forum.inductiveautomation.com/uploads/short-url/zTFCyxkzQ1lLdWMbNDNuZO8cuHQ.zip) (14.4 KB)

I did include a copy of my test here as well, so you may need to grap that and figure out whats not the same

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 22, 2020, 2:55pm UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/31 "2020-09-22T14:55:22Z")

</div>

You’re right, it looked terrible haha, but it still didn’t change the height of the rows ☹  
I had a look at your example to work out how you did the embedded view 🙂 i’ll see if there’s anything else in there that’s different, as you say.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 25, 2020, 12:49am UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/32 "2020-09-25T00:49:42Z")

</div>

I found the issue with Travis’ help. My embedded view was a flex container set to row. You can’t set the height of a row flex, only the width, and some of the components I used don’t “know” their height, so when put into the table they don’t show the height you’re expecting (it sounded more technical coming from Travis’ mouth…)  
Anyway, to resolve it (at least for now), I changed the embedded view to column flex, added a row flex container to it where I cut and paste all my content into, and then set the basis of the row flex container to the height I wanted it to be. Then voila, it showed up that height in the Table 🙂

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 25, 2020, 1:39am UTC](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205/33 "2020-09-25T01:39:59Z")

</div>

> [@nminchin](#):
>
> My embedded view was a flex container set to row.

Ahhh, I thought it was a column container. A column container does have an “awareness” of its height in this way as well

[Previous page](https://forum.inductiveautomation.com/t/perspective-designing-a-table-for-mobile-and-pc/38205.md?page=1)
