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

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

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.

[
  {
    "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": {}
  }
]

Have you tried

white-space: nowrap;

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

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

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