# Is there any way to have Perspective tables automatically initialize column widths (auto-fit) based on content?

**URL:** <https://forum.inductiveautomation.com/t/is-there-any-way-to-have-perspective-tables-automatically-initialize-column-widths-auto-fit-based-on-content/73045>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 28, 2023, 9:11pm UTC](https://forum.inductiveautomation.com/t/is-there-any-way-to-have-perspective-tables-automatically-initialize-column-widths-auto-fit-based-on-content/73045 "2023-04-28T21:11:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tyler.bennett](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@tyler.bennett](https://forum.inductiveautomation.com/u/tyler.bennett)\
**Post date:** [April 28, 2023, 9:11pm UTC](https://forum.inductiveautomation.com/t/is-there-any-way-to-have-perspective-tables-automatically-initialize-column-widths-auto-fit-based-on-content/73045/1 "2023-04-28T21:11:32Z")

</div>

Is there any way to have Perspective tables automatically initialize column widths (autofit) based on content, or is it just manual sizing only?

I keep feeling like autofit should be there as a natural option (ideally the default option) and can't shake the feeling that I am just overlooking some configuration option.

It seems the default behavior of the table is to just split the available space (table width) between the columns. In column configuration you can set column **width** but that seems to act more like the basis property in a nested flex container that had **grow** and **shrink** set to 1 (consuming a percentage of total width relative to the width settings in the other columns). By holding a ruler up the screen I was able to work out that a blank **width** setting for a column defaults to about 100 in the calculation. You can get column width to stay at the predetermined width by setting **strictWidth** in the column configuration to **True** (like setting **grow** and **shrink** to 0, continuing my comparison to a nested flex container).

I half expected that with some combination of **width** and **strictWidth** in the columns properties and **resizeMode** in the table properties I could effect some manner of autofit, but alas, no luck.

Also, changes to the table **resizeMode** property seem to have no noticeable effect at all. I think that may count as a bug or incomplete feature.

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

Ignition v8.1.27 Perspective, Table component

* * *

Here is the json code for the table component I have been experimenting with (using background colors for ease of visually distinguishing columns). You can copy this and paste it into a perspective view/container of your own.

```json
[
  {
    "type": "ia.display.table",
    "version": 0,
    "props": {
      "data": [
        {
          "Column1": "A",
          "Column2": "B",
          "Column3": "C"
        }
      ],
      "columns": [
        {
          "align": "center",
          "boolean": "checkbox",
          "dateFormat": "MM/DD/YYYY",
          "editable": false,
          "field": "Column1",
          "filter": {
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            },
            "enabled": false,
            "number": {
              "condition": "",
              "value": ""
            },
            "string": {
              "condition": "",
              "value": ""
            },
            "visible": "on-hover"
          },
          "footer": {
            "align": "center",
            "justify": "left",
            "style": {
              "classes": ""
            },
            "title": ""
          },
          "header": {
            "align": "center",
            "justify": "left",
            "style": {
              "classes": ""
            },
            "title": ""
          },
          "justify": "auto",
          "nullFormat": {
            "includeNullStrings": false,
            "nullFormatValue": "",
            "strict": false
          },
          "number": "value",
          "numberFormat": "0,0.##",
          "progressBar": {
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "max": 100,
            "min": 0,
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "render": "auto",
          "resizable": true,
          "sort": "none",
          "sortable": true,
          "strictWidth": false,
          "style": {
            "backgroundColor": "#47FFFF",
            "classes": ""
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "viewParams": {},
          "viewPath": "",
          "visible": true,
          "width": ""
        },
        {
          "align": "center",
          "boolean": "checkbox",
          "dateFormat": "MM/DD/YYYY",
          "editable": false,
          "field": "Column2",
          "filter": {
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            },
            "enabled": false,
            "number": {
              "condition": "",
              "value": ""
            },
            "string": {
              "condition": "",
              "value": ""
            },
            "visible": "on-hover"
          },
          "footer": {
            "align": "center",
            "justify": "left",
            "style": {
              "classes": ""
            },
            "title": ""
          },
          "header": {
            "align": "center",
            "justify": "left",
            "style": {
              "classes": ""
            },
            "title": ""
          },
          "justify": "auto",
          "nullFormat": {
            "includeNullStrings": false,
            "nullFormatValue": "",
            "strict": false
          },
          "number": "value",
          "numberFormat": "0,0.##",
          "progressBar": {
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "max": 100,
            "min": 0,
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "render": "auto",
          "resizable": true,
          "sort": "none",
          "sortable": true,
          "strictWidth": false,
          "style": {
            "backgroundColor": "#47FF47",
            "classes": ""
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "viewParams": {},
          "viewPath": "",
          "visible": true,
          "width": 200
        },
        {
          "align": "center",
          "boolean": "checkbox",
          "dateFormat": "MM/DD/YYYY",
          "editable": false,
          "field": "Column3",
          "filter": {
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            },
            "enabled": false,
            "number": {
              "condition": "",
              "value": ""
            },
            "string": {
              "condition": "",
              "value": ""
            },
            "visible": "on-hover"
          },
          "footer": {
            "align": "center",
            "justify": "left",
            "style": {
              "classes": ""
            },
            "title": ""
          },
          "header": {
            "align": "center",
            "justify": "left",
            "style": {
              "classes": ""
            },
            "title": ""
          },
          "justify": "auto",
          "nullFormat": {
            "includeNullStrings": false,
            "nullFormatValue": "",
            "strict": false
          },
          "number": "value",
          "numberFormat": "0,0.##",
          "progressBar": {
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "max": 100,
            "min": 0,
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "render": "auto",
          "resizable": true,
          "sort": "none",
          "sortable": true,
          "strictWidth": true,
          "style": {
            "backgroundColor": "#FFFF47",
            "classes": ""
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "viewParams": {},
          "viewPath": "",
          "visible": true,
          "width": 50
        }
      ],
      "pager": {
        "bottom": false
      },
      "resizeMode": "fixed"
    },
    "meta": {
      "name": "Table"
    },
    "position": {
      "grow": 1
    },
    "custom": {}
  }
]

```

---

<div class="post-metadata">

**Author:** ![Thomas\_Salisbury](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thomas_salisbury/32/62046_2.png) [@Thomas\_Salisbury](https://forum.inductiveautomation.com/u/Thomas_Salisbury)\
**Post date:** [April 29, 2023, 11:09am UTC](https://forum.inductiveautomation.com/t/is-there-any-way-to-have-perspective-tables-automatically-initialize-column-widths-auto-fit-based-on-content/73045/2 "2023-04-29T11:09:04Z")

</div>

Have you tried

```auto
white-space: nowrap;

```

From what I understand, you typical css should work in perspective

---

<div class="post-metadata">

**Author:** ![tyler.bennett](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@tyler.bennett](https://forum.inductiveautomation.com/u/tyler.bennett)\
**Post date:** [June 2, 2023, 10:45pm UTC](https://forum.inductiveautomation.com/t/is-there-any-way-to-have-perspective-tables-automatically-initialize-column-widths-auto-fit-based-on-content/73045/3 "2023-06-02T22:45:31Z")

</div>

> [@Thomas\_Salisbury](#):
>
> Have you tried
> 
> ```auto
> white-space: nowrap;
> 
> ```

That has no effect on column sizing. Have you tried it and found otherwise?

---

<div class="post-metadata">

**Author:** ![Thomas\_Salisbury](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thomas_salisbury/32/62046_2.png) [@Thomas\_Salisbury](https://forum.inductiveautomation.com/u/Thomas_Salisbury)\
**Post date:** [June 5, 2023, 11:04am UTC](https://forum.inductiveautomation.com/t/is-there-any-way-to-have-perspective-tables-automatically-initialize-column-widths-auto-fit-based-on-content/73045/4 "2023-06-05T11:04:07Z")

</div>

I have, but it depends on if you have strict width already set on other columns..