# Table columns dont change width

**URL:** <https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 5, 2025, 3:55pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882 "2025-05-05T15:55:59Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [May 5, 2025, 3:55pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/1 "2025-05-05T15:55:59Z")

</div>

I'm using a script to write a dataset to the `data` property of a table. The columns are for a name, setpoint, and actual value, and I'd like the name column to be bigger than the other two. However, when I add columns to the `columns` property and try to change the width, nothing happens. I assumed this was because those columns were written from a script, but I added a 4th, blank column and still can't resize it. Not sure why `columns.0.width` doesn't change the width of column 0.

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [May 5, 2025, 4:07pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/2 "2025-05-05T16:07:20Z")

</div>

Unless you check `strictWidth`, then `width` is treated as a value relative to the value set for other columns.

---

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [May 5, 2025, 4:18pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/3 "2025-05-05T16:18:30Z")

</div>

I did it with `strictWidth` both checked and unchecked, and it made no difference

---

<div class="post-metadata">

**Author:** ![vtran](https://avatars.discourse-cdn.com/v4/letter/v/779978/32.png) [@vtran](https://forum.inductiveautomation.com/u/vtran)\
**Post date:** [May 5, 2025, 4:33pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/4 "2025-05-05T16:33:45Z")

</div>

You might want to make sure that the `field` property matches exactly with your column name. I'm pretty sure it's case sensitive

---

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [May 5, 2025, 4:47pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/5 "2025-05-05T16:47:11Z")

</div>

That didn't seem to work either

---

<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:** [May 5, 2025, 4:50pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/6 "2025-05-05T16:50:57Z")

</div>

Right-click on the table, copy, paste in here and format it properly. See [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831). We can then check it out.

---

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [May 5, 2025, 5:04pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/7 "2025-05-05T17:04:50Z")

</div>

```python
[
  {
    "type": "ia.display.table",
    "version": 0,
    "props": {
      "data": {
        "$": [
          "ds",
          192,
          1746456718847
        ],
        "$columns": [
          {
            "name": "MaterialName",
            "data": [
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              ""
            ],
            "type": "String"
          },
          {
            "name": "Setpoint",
            "data": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
            ],
            "type": "Double"
          },
          {
            "name": "Actual",
            "data": [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0
            ],
            "type": "Double"
          }
        ]
      },
      "selection": {
        "enableRowSelection": false
      },
      "columns": [
        {
          "field": "",
          "visible": true,
          "editable": false,
          "render": "auto",
          "justify": "auto",
          "align": "center",
          "resizable": false,
          "sortable": true,
          "sort": "none",
          "filter": {
            "enabled": false,
            "visible": "on-hover",
            "string": {
              "condition": "",
              "value": ""
            },
            "number": {
              "condition": "",
              "value": ""
            },
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            }
          },
          "viewPath": "",
          "viewParams": {},
          "boolean": "checkbox",
          "number": "value",
          "progressBar": {
            "max": 100,
            "min": 0,
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "nullFormat": {
            "includeNullStrings": false,
            "strict": false,
            "nullFormatValue": ""
          },
          "numberFormat": "0,0.##",
          "dateFormat": "MM/DD/YYYY",
          "width": "100px",
          "strictWidth": true,
          "style": {
            "classes": ""
          },
          "header": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          },
          "footer": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          }
        },
        {
          "field": "",
          "visible": true,
          "editable": false,
          "render": "auto",
          "justify": "auto",
          "align": "center",
          "resizable": true,
          "sortable": true,
          "sort": "none",
          "filter": {
            "enabled": false,
            "visible": "on-hover",
            "string": {
              "condition": "",
              "value": ""
            },
            "number": {
              "condition": "",
              "value": ""
            },
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            }
          },
          "viewPath": "",
          "viewParams": {},
          "boolean": "checkbox",
          "number": "value",
          "progressBar": {
            "max": 100,
            "min": 0,
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "nullFormat": {
            "includeNullStrings": false,
            "strict": false,
            "nullFormatValue": ""
          },
          "numberFormat": "0,0.##",
          "dateFormat": "MM/DD/YYYY",
          "width": "5px",
          "strictWidth": true,
          "style": {
            "classes": ""
          },
          "header": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          },
          "footer": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          }
        },
        {
          "field": "",
          "visible": true,
          "editable": false,
          "render": "auto",
          "justify": "auto",
          "align": "center",
          "resizable": true,
          "sortable": true,
          "sort": "none",
          "filter": {
            "enabled": false,
            "visible": "on-hover",
            "string": {
              "condition": "",
              "value": ""
            },
            "number": {
              "condition": "",
              "value": ""
            },
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            }
          },
          "viewPath": "",
          "viewParams": {},
          "boolean": "checkbox",
          "number": "value",
          "progressBar": {
            "max": 100,
            "min": 0,
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "nullFormat": {
            "includeNullStrings": false,
            "strict": false,
            "nullFormatValue": ""
          },
          "numberFormat": "0,0.##",
          "dateFormat": "MM/DD/YYYY",
          "width": "5px",
          "strictWidth": true,
          "style": {
            "classes": ""
          },
          "header": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          },
          "footer": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          }
        }
      ],
      "dragOrderable": false,
      "rows": {
        "height": "38px"
      },
      "pager": {
        "options": [
          15
        ],
        "activeOption": 15
      }
    },
    "meta": {
      "name": "Table"
    },
    "position": {
      "grow": 1,
      "basis": "400px"
    },
    "custom": {},
    "propConfig": {
      "custom.maxRows": {
        "binding": {
          "config": {
            "path": "this.props.data"
          },
          "transforms": [
            {
              "code": "\treturn value.getRowCount()",
              "type": "script"
            }
          ],
          "type": "property"
        }
      },
      "custom.rowFirst": {
        "binding": {
          "config": {
            "expression": "(({this.props.pager.activePage} -1) *{this.props.pager.activeOption}) +1"
          },
          "type": "expr"
        }
      },
      "custom.rowLast": {
        "binding": {
          "config": {
            "expression": "toInt(min({this.custom.maxRows},\r\n ({this.props.pager.activePage}*{this.props.pager.activeOption})))"
          },
          "type": "expr"
        }
      }
    },
    "events": {
      "system": {
        "onStartup": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tarray = \"Ingredients\"\n\tsize = 30\n\tmembers = [\"MaterialName\", \"Setpoint\", \"Actual\"]\n\tdevice = self.session.custom.tagFolder\n\t\n\tself.props.data = scripts.tag.udtArrayToDataSet(array, size, members, device)"
          }
        }
      }
    }
  }
]

```

The event script is taking the tagname from the PLC, taking it's UDT elements, and turning that into a dataset type for the table.

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [May 5, 2025, 5:14pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/8 "2025-05-05T17:14:49Z")

</div>

You need to fill in `field` with the column name.

---

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [May 5, 2025, 5:36pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/9 "2025-05-05T17:36:53Z")

</div>

Like I said in response to vtran, that didn't seem to make a difference. I just don't have them typed in on the code snippet I sent.

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [May 5, 2025, 5:45pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/10 "2025-05-05T17:45:23Z")

</div>

> [@BigByte](#):
>
> I just don't have them typed in on the code snippet I sent.

It may not be the only reason, but I'm pretty sure you won't get it to work if you don't include them.

---

<div class="post-metadata">

**Author:** ![Nick\_Wilson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nick_wilson/32/80663_2.png) [@Nick\_Wilson](https://forum.inductiveautomation.com/u/Nick_Wilson)\
**Post date:** [May 5, 2025, 5:47pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/11 "2025-05-05T17:47:47Z")

</div>

Can you click on the dataset editor button to the right of your table's props.data and take a screenshot like this? Remove every object from props.columns, add a new object to it, and set the field value to any of the column names as shown in your dataset editor ensuring that the case matches.

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

---

<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:** [May 5, 2025, 5:49pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/12 "2025-05-05T17:49:16Z")

</div>

It definitely won't work without the field names being properly specified.

When `strictWidth : true` it's expecting `width : integer`. You're providing a string, `100px`. Remove the `px`

It's in [Perspective - Table | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-table#properties) but way down in **columns**.

> - **width** : The width of this column. If resize is enabled, specifies the column width on initial load. User can override this in the runtime if the Resizable option is enabled. **Value is numeric.**

If you set `strictWidth : false` then the width determines the _proportional_ width of each column. e.g. 10, 15, 25 (which sums to 50) would allocate 20%, 30% and 50% of the table width to the respective columns.

---

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [May 5, 2025, 6:26pm UTC](https://forum.inductiveautomation.com/t/table-columns-dont-change-width/105882/13 "2025-05-05T18:26:49Z")

</div>

That was it. Removed the px and now it resizes (with the field names). Thanks!