Set a max-width and max-height for table cells - handsontable

Question

Is it possible to set a max-width and max-height for cells in Handsontable?
I've tried to set this via CSS on the <th> and <td> elements but this doesn't work.
I saw in the docs that you can set the columns to particular widths, but not maximums.

Answer 1

So, the solution is to use your HOT instance's manualColumnWidths array. This array will set the widths for all columns automatically. It's nested somewhere in the code so that anytime there's a change to the DOM it updates which is why using CSS or jQuery on the widths of the elements themselves wasn't working. It's a good structure, we just need this to be more explicitly written somewhere.
Note that you can repeat this for rows by just using manualRowHeights instead, as well as the rest of the row methods.
Now, here is how you would set maximums and minimums for column resizing events. Set the afterColumnResize option to this following function:
function setAfterColumnResize() {
return function(col, size) {
var headers = $(".colHeader"); // first is empty if there are rowHeaders
var maxW = [10, 200, 400]; // note that the first is the row header
var minW = [1, 100, 100]; // note that the first is the row header
var actualCol = col + 1; // this is to account for the row header
var maxColW = maxW[actualCol];
var minColW = minW[actualCol];
var actualW = $(headers[actualCol]).parent().parent().width();
if (hot && maxColW && actualW > maxColW) {
hot.manualColumnWidths[col] = maxColW;
hot.render()
}
if (hot && minColW && actualW < minColW) {
hot.manualColumnWidths[col] = minColW;
hot.render()
}
}
}
Now let me explain it. When this event gets triggered, you first find the header using the col index it gives you. Correct it if you have row headers set to true (which is what I do here and in the fiddle). Then you set the arrays of max/min widths (of course you can do this more elegantly in your code).
Then grab the actual current width of the column in question by looking at the parent's parent of the span (this is a little messy but it's the simplest way I found of doing). The conditional after should be self explanatory.
And lastly, the important bits. You can see that by accessing hot.manualColumnWidths you can set the width that you want. I set it to the max if my current width exceeds it. Then just re-render and you're done!
There are a few issues like the fact that these events get called only after resizing so if you originally set the table to render with a width larger than your max, it won't do anything. If that's the case, just call this function after rendering the table the first time (call it once per column).
This would also be the case if you didn't want to use the column resizing event; in this case, it would just be a normal function that you call after rendering.
Hope this helps! Here is a demo fiddle showing it in action :D