# Autosizing tables in flex containers

**URL:** <https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 9, 2023, 1:28pm UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940 "2023-09-09T13:28:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 9, 2023, 1:28pm UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940/1 "2023-09-09T13:28:44Z")

</div>

Every time I think I'm getting good at this CSS shows me that I'm not really.

 ![Flex table layout](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8af4fde5bbf8f4a7fa0e804783ddc309d31c83a.png)

I'd like the top two tables (1 and 2) to expand to show all rows without scrollbars. Table 1 can be shorter (as it has less rows) but I don't mind it having empty space at the bottom. They're both in a Flex Row container (orange border) so this needs to grow to suit.  
The third table should also expand to show all rows without a table scrollbar and the user should just use the page scrollbar or PgDn / PgUp to see the contents.

Could anyone paste the view into Designer and give me some pointers?

> **View JSON**
>
> ```auto
> {
> "custom": {},
> "params": {},
> "props": {
> "defaultSize": {
> "height": 702
> }
> },
> "root": {
> "children": [
> {
> "children": [
> {
> "meta": {
> "name": "Table1"
> },
> "position": {
> "shrink": 0
> },
> "propConfig": {
> "props.data": {
> "binding": {
> "config": {
> "expression": "null"
> },
> "transforms": [
> {
> "code": "\tdata \u003d []\n\tfor i in range(7):\n\t\tdata.append([i, \"Table 1 item \" + str(i) + \" of 7\"])\n\t\n\theaders \u003d [\"Row\", \"Notes\"]\n\treturn system.dataset.toDataSet(headers, data)",
> "type": "script"
> }
> ],
> "type": "expr"
> }
> }
> },
> "props": {
> "pager": {
> "bottom": false
> },
> "style": {
> "margin": 8,
> "padding": 5
> }
> },
> "type": "ia.display.table"
> },
> {
> "meta": {
> "name": "Table2"
> },
> "position": {
> "basis": "400px"
> },
> "propConfig": {
> "props.data": {
> "binding": {
> "config": {
> "expression": "null"
> },
> "transforms": [
> {
> "code": "\tdata \u003d []\n\tfor i in range(12):\n\t\tdata.append([i, \"Table 2 item \" + str(i) + \" of 12\"])\n\t\n\theaders \u003d [\"Row\", \"Notes\"]\n\treturn system.dataset.toDataSet(headers, data)",
> "type": "script"
> }
> ],
> "type": "expr"
> }
> }
> },
> "props": {
> "pager": {
> "bottom": false
> },
> "style": {
> "margin": 8,
> "padding": 5
> }
> },
> "type": "ia.display.table"
> }
> ],
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "basis": "300px",
> "shrink": 0
> },
> "props": {
> "style": {
> "borderColor": "#D27A0C",
> "borderStyle": "solid",
> "borderWidth": 1,
> "margin": 5
> }
> },
> "type": "ia.container.flex"
> },
> {
> "meta": {
> "name": "Table3"
> },
> "position": {
> "shrink": 0
> },
> "props": {
> "data": [
> {
> "city": {
> "align": "center",
> "editable": true,
> "justify": "left",
> "style": {
> "backgroundColor": "#F7901D",
> "classes": "some-class"
> },
> "value": "Folsom"
> },
> "country": "United States",
> "population": 77271
> },
> {
> "city": "Helsinki",
> "country": "Finland",
> "population": 635591
> },
> {
> "city": "Jakarta",
> "country": "Indonesia",
> "population": 10187595
> },
> {
> "city": "Madrid",
> "country": "Spain",
> "population": 3233527
> },
> {
> "city": "Prague",
> "country": "Czech Republic",
> "population": 1241664
> },
> {
> "city": "San Diego",
> "country": "United States",
> "population": 1406630
> },
> {
> "city": "San Francisco",
> "country": "United States",
> "population": 884363
> },
> {
> "city": "Shanghai",
> "country": "China",
> "population": 24153000
> },
> {
> "city": "Tokyo",
> "country": "Japan",
> "population": 13617000
> },
> {
> "city": "Washington, DC",
> "country": "United States",
> "population": 658893
> },
> {
> "city": "Wellington",
> "country": "New Zealand",
> "population": 405000
> },
> {
> "city": "Delhi",
> "country": "India",
> "population": 11034555
> },
> {
> "city": "Dhaka",
> "country": "Bangladesh",
> "population": 14399000
> },
> {
> "city": "Lagos",
> "country": "Nigeria",
> "population": 16060303
> },
> {
> "city": "Karachi",
> "country": "Pakistan",
> "population": 14910352
> },
> {
> "city": "Istanbul",
> "country": "Turkey",
> "population": 14025000
> },
> {
> "city": "Cairo",
> "country": "Egypt",
> "population": 10230350
> },
> {
> "city": "Mexico City",
> "country": "Mexico",
> "population": 8974724
> },
> {
> "city": "London",
> "country": "United Kingdom",
> "population": 8825001
> },
> {
> "city": "New York City",
> "country": "United States",
> "population": 8622698
> },
> {
> "city": "Tehran",
> "country": "Iran",
> "population": 8154051
> },
> {
> "city": "Bogota",
> "country": "Colombia",
> "population": 7878783
> },
> {
> "city": "Rio de Janeiro",
> "country": "Brazil",
> "population": 6429923
> },
> {
> "city": "Riyadh",
> "country": "Saudi Arabia",
> "population": 5676621
> },
> {
> "city": "Singapore",
> "country": "Singapore",
> "population": 5535000
> },
> {
> "city": "Saint Petersburg",
> "country": "Russia",
> "population": 5191690
> },
> {
> "city": "Sydney",
> "country": "Australia",
> "population": 208374
> },
> {
> "city": "Abidjan",
> "country": "Ivory Coast",
> "population": 4765000
> },
> {
> "city": "Dar es Salaam",
> "country": "Tanzania",
> "population": 4364541
> },
> {
> "city": "Wellington",
> "country": "New Zealand",
> "population": 405000
> },
> {
> "city": "Los Angeles",
> "country": "United States",
> "population": 3884307
> },
> {
> "city": "Berlin",
> "country": "Germany",
> "population": 3517424
> },
> {
> "city": "Jeddah",
> "country": "Saudi Arabia",
> "population": 3456259
> },
> {
> "city": "Kabul",
> "country": "Afghanistan",
> "population": 3414100
> },
> {
> "city": "Mashhad",
> "country": "Iran",
> "population": 3001184
> },
> {
> "city": "Milan",
> "country": "Italy",
> "population": 1359905
> },
> {
> "city": "Kiev",
> "country": "Ukraine",
> "population": 2908703
> },
> {
> "city": "Rome",
> "country": "Italy",
> "population": 2877215
> },
> {
> "city": "Chicago",
> "country": "United States",
> "population": 2695598
> },
> {
> "city": "Osaka",
> "country": "Japan",
> "population": 2691742
> },
> {
> "city": "Bandung",
> "country": "Indonesia",
> "population": 2575478
> },
> {
> "city": "Managua",
> "country": "Nicaragua",
> "population": 2560789
> },
> {
> "city": "Paris",
> "country": "France",
> "population": 2229621
> },
> {
> "city": "Shiraz",
> "country": "Iran",
> "population": 1869001
> },
> {
> "city": "Manila",
> "country": "Philippines",
> "population": 1780148
> },
> {
> "city": "Montreal",
> "country": "Canada",
> "population": 1649519
> },
> {
> "city": "Guadalajara",
> "country": "Mexico",
> "population": 1495189
> },
> {
> "city": "Dallas",
> "country": "United States",
> "population": 1317929
> },
> {
> "city": "Yerevan",
> "country": "Armenia",
> "population": 1060138
> },
> {
> "city": "Tunis",
> "country": "Tunisia",
> "population": 1056247
> }
> ],
> "filter": {
> "style": {
> "margin": 8,
> "padding": 5
> }
> },
> "pager": {
> "bottom": false
> },
> "style": {
> "margin": 8,
> "padding": 5
> }
> },
> "type": "ia.display.table"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column"
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

Many thanks!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 9, 2023, 1:36pm UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940/2 "2023-09-09T13:36:30Z")

</div>

Can’t do it right now, I’ll give it a shot when I have access to a designer.

But I’d like to share what happened to me a few days ago: my flex container wouldn’t grow.  
I thought I was going bonkers, as it’s a pretty simple thing, and the exact same setup worked as expected in other views.  
And the cherry on top: it was behaving properly in the designer.

I spent a good amount of time trying it on different browsers and exploring the css in the browser’s debugger… turns out the `grow` property wasn’t getting saved. All other properties were saved properly, but grow was getting reset to 0.  
I had to create another view and copy-paste the contents to get it to work.

---

<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 9, 2023, 2:29pm UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940/3 "2023-09-09T14:29:18Z")

</div>

> [@pascal.fragnoud](#):
>
> but grow was getting reset to 0

I still see this when I use the context menu to add a component to a flex container; editing the new flex or component props just don't save until you close the View and open it again.

As for the OP, I would try this if it wasn't 00:00 here 😅 tomorrow it is!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 9, 2023, 5:02pm UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940/4 "2023-09-09T17:02:35Z")

</div>

It wouldn't save even after everything was closed several times, including the docker container - took me a few days to figure out what the issue was. Since I was working on other things (container not growing was pretty low in my priority queue), I didn't realize immediately the `grow` property was always 0 when I reopened the view.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 9, 2023, 5:22pm UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940/5 "2023-09-09T17:22:52Z")

</div>

> [@pascal.fragnoud](#):
>
> … turns out the `grow` property wasn’t getting saved.

Well that's a help.  
I think I'm still missing something in my configuration though. Let me know if you have time to have a look at it.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 11, 2023, 9:06am UTC](https://forum.inductiveautomation.com/t/autosizing-tables-in-flex-containers/78940/6 "2023-09-11T09:06:34Z")

</div>

My coworker suggested setting `virtualized : false` on each table.  
It works!

> Enables virtualization of table rows, which is an optimization method that only shows a portion of the underlying data on the chart at a time.

[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Table)