Wrap Text on Column Headers and Fixed Column Width

Apliqo UX
2

Hi @twong ,

For wrapping the column headers, you can create a custom CSS Style and apply the format to a specific/all columns on …\apq-c3-custom\css\custom-style.css

something like this:

.handsontable th.Header-wrap  { 
    white-space: pre-wrap !important
 }

Then just apply the ColumnFormat on the Advanced settings of the widget.

"columnFormat": {
      "": [
        {
          "className": "Header-wrap"
        }
      ]
    }

There are a few threads on that in the forum already:

For the column widths, after you applied the word wrapping, you can change dragging the cursor on the column then use the “save to options” on edit mode, and it will save the advanced settings, the code you can modify later on, might need a bit of testing on the size depending on the col header size.

  "table": {
    "colWidths": [
      285,
      120,
      120,
      120,
      170
    ]}

Hope this helps!